Flutter Getx 入門

提供了狀態(tài)管理、智能依賴注入、和路由能力。

狀態(tài)管理

class Controller extends GetxController{
  var count = 0.obs;      // 響應(yīng)式
  increment() => count++; // 不再需要 setState
}

class Home extends StatelessWidget {
  final Controller c = Get.put(Controller(), 'my-counter');  // 創(chuàng)建實(shí)例
  // final Controller c = Get.find(tag: 'my-counter'); // 查找并使用一個(gè)已存在的Controller
  // final Controller c = Get.find<Controller>(); // 同上

  @override
  Widget build(context){
    Obx(() => Text("${c.count.value}")); // 當(dāng)count變化后重繪此處
    GetBuilder<Controller>(        // 復(fù)雜數(shù)據(jù)類型使用GetBuilder提高性能
      init: Controller(), // 首次啟動(dòng)
      builder: (_) => Text("${c.count.value}"),
    )
  }
}
// or
class Home extends GetView<Controller> {
  @override
  Widget build(context){ ... } // 直接可用 controller 屬性

創(chuàng)建響應(yīng)式的 3 種方法:

  • final name = RxString('')
  • final name = Rx<String>('')
  • final name = ''.obs
    • 基礎(chǔ)類型在使用時(shí)需要name.value,復(fù)雜類型可以直接使用(類需要自己實(shí)現(xiàn))

watch:

  • ever(count1, (_) => print("count1 has been changed to $_"));

    • dart immediate 默認(rèn)為 true, count1.firstRebuild = false 取消 immediate
  • 只監(jiān)聽一次使用once方法

  • 自帶防抖和節(jié)流

    • debounce(count1, (_) => ..., time: Duration(seconds: 1))
    • interval(count1, (_) => ..., time: Duration(seconds: 1))

GetBuilder: rerender 時(shí)機(jī) - 它為了性能主動(dòng)放棄了響應(yīng)式,rerender 時(shí)機(jī)、范圍都由開發(fā)者控制以達(dá)到性能最大化(大大減少了事件監(jiān)聽發(fā)送、內(nèi)存占用)

  • 不再依賴StatefulWidget的狀態(tài)管理,所有狀態(tài)放入GetxController,組件全部StatelessWidget

  • initState、dispose,效果同StatefulWidget(不推薦)

  • 有生命周期onInitonReady、onClose(推薦)

    class Controller extends GetxController {
      int counter = 0;
      void increment() {
        counter++;
        update(); // 主動(dòng)rerender
      }
    }
    
    GetBuilder<Controller>(
      init: Controller(),   // 首次啟動(dòng)自動(dòng)初始化,組件卸載時(shí)自動(dòng)刪除
      builder: (_) => Text( // rerender只會(huì)重繪builder方法
        '${_.counter}',
      ),
    )
    
  • “如需要使用的控制器已在內(nèi)存中,將與內(nèi)存中的共享” 初始化 2 次但只有一個(gè)實(shí)例嗎?

路由

GetMaterialApp( // Before: MaterialApp(
  home: MyHome(),
  initialRoute:"/", // same as before
  //routes:{
  //  "new_page":(context) => NewRoute(),
  //  "/":(context) => MyHomePage(title: '首頁'),
  //},
  getPages: [
    GetPage(name: '/', page: () => MyHomePage()),
    GetPage(name: '/new_page', page: () => Second()),
  ],
)

// Navigator.push
Get.to(NextScreen());
// Navigator.pushNamed
Get.toNamed('/details', arguments: '12');
print(Get.arguments); // 12
// Navigator.pop
Get.back(result: '參數(shù)');
var data = await Get.to(Xxx()); // 參數(shù)
// replace
Get.off(NextScreen());
// reLaunch
Get.offAll(NextScreen());

// 類URL傳參
Get.toNamed('/details?id=12');
print(Get.parameters['id']); // 12
// or
GetPage(name: '/details/:id', page: () => Second())
Get.toNamed("/details/12");
print(Get.parameters['id']); // 12

路由守衛(wèi)

MaterialApp(
  ...
  // before
  // onGenerateRoute:(RouteSettings settings) {
  //    return MaterialPageRoute(builder: (context){
  //      String routeName = settings.name;
  //      // 如果訪問的路由頁需要登錄,但當(dāng)前未登錄,則直接返回登錄頁路由。
  //    }
  //  );
  // }
  routingCallback: (routing) {
    if(routing.current == '/second'){
      // do something
    }
  }
);

基于中間件的路由守衛(wèi)

MaterialApp(
  onGenerateRoute: Router.generateRoute,
  initialRoute: "/",
  navigatorKey: Get.key,
  navigatorObservers: [
    GetObserver(MiddleWare.observer), // HERE !!!
  ],
)

class MiddleWare {
  static observer(Routing routing) {
    if(routing.current == '/second'){
      // do something
    }
  }
}

它還有 國際化、主題、請(qǐng)求 等能力

// 無需 context 使用 snackbar
Get.snackbar('Hi', 'i am a modern snackbar');
// 和 Dialogs
Get.defaultDialog(
  onConfirm: () => print("Ok"),
  middleText: "Dialog made in 3 lines of code"
);
// bottomSheet
Get.bottomSheet(
  Container(
    child: Wrap(
      children: [
        ListTile(
          leading: Icon(Icons.music_note),
          title: Text('Music'),
          onTap: () {}
        ),
        ListTile(
          leading: Icon(Icons.videocam),
          title: Text('Video'),
          onTap: () {},
        ),
      ],
    ),
  )
);

狀態(tài)管理 https://github.com/jonataslaw/getx/blob/4.6.1/documentation/zh_CN/state_management.md

依賴管理 https://github.com/jonataslaw/getx/blob/4.6.1/documentation/zh_CN/dependency_management.md

路由管理 https://github.com/jonataslaw/getx/blob/4.6.1/documentation/zh_CN/route_management.md

https://pub-web.flutter-io.cn/packages/get

https://github.com/jonataslaw/getx

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容