接上一篇文章，這篇文章主要介紹，路由管理，國際化管理，響應式管理方法，資料持久化管理。還是先看看大神麼們都是怎麼寫的，從中學習一下。看到又一個比較好用的庫getx，方便簡介，基本上都包含今天要封裝的內容，那就用起來吧。ps：有人可能會有想法說是應該自己寫，總用第三方的庫，遇到問題不好處理，有點道理，換個想法如果自己沒達到那個水平也可以先使用第三方庫，好好看看大神的原始碼，來提升自己。總之所當面看待吧。
引入GetX
在pubspec.yaml檔案中加入
dependencies:
get: ^3.24.0
複製程式碼在需要使用的檔案中引入
import 'package:get/get.dart';
複製程式碼在main.dart中使用GetMaterialApp替換MaterialApp
return GetMaterialApp(
enableLog: false,
debugShowCheckedModeBanner: false,
defaultTransition: Transition.rightToLeftWithFade,
theme: ThemeData(
primarySwatch: Colors.orange,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: TabBarPage());
複製程式碼路由管理
比較喜歡這個的原因： 不需要獲取上下文context直接跳轉頁面，程式碼很簡潔，並且支援別名路由跳轉
效果：
不帶引數頗通跳轉
Get.to(OtherPage())
複製程式碼帶引數跳轉
Get.to(OtherPage(id：''))
複製程式碼無返回跳轉
比如在登入成功之後的跳轉，不能夠再返回到登入頁面
Get.off(OtherPage(id：''))
複製程式碼跳轉到Tabbar頁面
比如在商品的詳情頁面直接跳轉到購物車頁面，一般購物車頁面在Tabbar上。
Get.off(TabbarPage(currentIndex: 1));
複製程式碼別名跳轉
這種情況大家可以去看下GetX的文件，這裡就不介紹了。因為我不打算在專案裡面坐這種跳轉。ps：純個人原因
SnackBars，Dialogs，BottomSheets使用
GetX中，我們也可以不獲取上下文context進行跳用SnackBars，Dialogs， BottomSheets使用
SnackBars
效果：
Get.snackbar(
"Hey i'm a Get SnackBar!",
"It's unbelievable! I'm using SnackBar without context, without boilerplate, without Scaffold, it is something truly amazing!",
icon: Icon(Icons.alarm),
shouldIconPulse: true,
barBlur: 20,
isDismissible: true,
duration: Duration(seconds: 3),
backgroundColor: Colors.red);
複製程式碼具體的屬性，大家可以點選進去看下原始碼配置
Dialogs
效果：
Get.defaultDialog(
onConfirm: () => print("Ok"),
buttonColor: Colors.white,
middleText: "Dialog made in 3 lines of code");
複製程式碼也可以彈出自定義的元件
Get.dialog(YourDialogWidget());
複製程式碼BottomSheets
效果：
Get.bottomSheet(Container(
decoration: BoxDecoration(color: Colors.red),
child: Wrap(
children: <Widget>[
ListTile(
leading: Icon(Icons.music_note),
title: Text('Music'),
onTap: () {}),
ListTile(
leading: Icon(Icons.videocam),
title: Text('Video'),
onTap: () {},
),
],
),
))；
複製程式碼以上是簡單的用法，我們可以新建哥utils資料夾，封裝成一個工具類去呼叫這個方法。
國際化管理
目前涉及到2中模式，
- 根據系統語言設定國際化
- 在應用內設定國際化顯示
首先建立一個Languages.dart檔案 簡單的寫了一個hello的中英文含義
import 'package:get/get.dart';
class Languages extends Translations {
@override
Map<String, Map<String, String>> get keys => {
'zh_CN': {
'hello': '你好 世界',
},
'en_US': {
'hello': 'Hallo Welt',
}
};
}
複製程式碼在main.dart中加入程式碼：
return GetMaterialApp(
translations: Languages(), // 你的翻譯
locale: Locale('zh', 'CN'), // 將會按照此處指定的語言翻譯
fallbackLocale: Locale('en', 'US'), // 新增一個回撥語言選項，以備上面指定的語言翻譯不存在
);
複製程式碼顯示只需要加入如下就ok。很簡單
Text('hello'.tr)
複製程式碼跟隨系統語言
ui.window.locale 獲取當前系統語言，設定本地語言
GetMaterialApp(
translations: Languages(), // 你的翻譯
locale: ui.window.locale, // 將會按照此處指定的語言翻譯
fallbackLocale: Locale('en', 'US'), // 新增一個回撥語言選項，以備上面指定的語言翻譯 不存在
......
)
複製程式碼在應用內設定國際化顯示
更新文字顯示為中文如下：
var locale = Locale('zh', 'CN');
Get.updateLocale(locale);
複製程式碼多寫兩句用RadioListTile實現一下效果
RadioListTile(
value: 'chinese',
groupValue: _selected,
title: Text('中文'),
subtitle: Text('中文'),
selected: _selected == 'chinese',
onChanged: (type) {
var locale = Locale('zh', 'CN');
Get.updateLocale(locale);
setState(() {
_selected = type;
});
}),
RadioListTile(
value: 'english',
groupValue: _selected,
title: Text('英文'),
subtitle: Text('英文'),
selected: _selected == 'english',
onChanged: (type) {
var locale = Locale('en', 'US');
Get.updateLocale(locale);
setState(() {
_selected = type;
});
},
),
複製程式碼這是本人測試使用用的程式碼。看一下效果
響應式管理方法
GetX舉例是一個計數器的例子，已經很容易理解了，作用就是不用在引入過多的狀態管理的庫，比如provide之類的。用法差不多。更簡潔。還是記錄一下，方便以後檢視用
class Controller extends GetxController{
var count = 0.obs;
increment() => count++;
}
複製程式碼lass Home extends StatelessWidget {
@override
Widget build(context) {
// 使用Get.put()例項化你的類，使其對當下的所有子路由可用。
final Controller c = Get.put(Controller());
return Scaffold(
// 使用Obx(()=>每當改變計數時，就更新Text()。
appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),
// 用一個簡單的Get.to()即可代替Navigator.push那8行，無需上下文！
body: Center(child: RaisedButton(
child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
floatingActionButton:
FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
}
}
class Other extends StatelessWidget {
// 你可以讓Get找到一個正在被其他頁面使用的Controller，並將它返回給你。
final Controller c = Get.find();
@override
Widget build(context){
// 訪問更新後的計數變數
return Scaffold(body: Center(child: Text("${c.count}")));
}
}
複製程式碼這塊還沒有在程式中使用，但是狀態管理在程式中使用還是很方便的，比如更改使用者資訊，登入。購物車邏輯中都可以使用
資料持久化管理
這個地方引入了第二個第三方庫
flustars: ^0.3.3
# https://github.com/Sky24n/sp_util
# sp_util分拆成單獨的庫，可以直接引用
sp_util: ^1.0.1
複製程式碼用起來也很方便感覺不錯。 為了之後方便使用，現定義一個Global.dart檔案，做初始化操作
import 'package:flustars/flustars.dart';
class Global {
static Future initSqutil() async => await SpUtil.getInstance();
}
在main方法中呼叫：
Global.initSqutil();
複製程式碼接下來進行儲存資料以及獲取資料的方法，型別包括：字串，布林值，物件，陣列 舉個例子：
存資料
SpUtil.putString( 'login', '登入了',);
取資料
SpUtil.getString('login',defValue: '');
複製程式碼額外提的一點就是儲存物件型別陣列,分兩種形式，getObjList， getObjectList方法
類似泛型的結構， 可以進行轉換
List<Map> dataList = SpUtil.getObjList('cityMap', (v) => v);
返回一個Map陣列
List<Map> dataList = SpUtil.getObjectList('cityMap');
複製程式碼這個地方可以配合國際化語言切換時使用。比如每次改變語言進行儲存。然後每次開啟app進行，獲取初始化。
one more things...
- 網路請求
- 頁面不同狀態展示封裝