前言
在现代应用程序开发中，状态管理和路由导航是两个至关重要的方面，尤其是在构建复杂的用户界面时。Getx 是一个轻量级且高效的 Flutter 库，为开发者提供了一套强大的工具，旨在简化这两个领域的操作。通过简单的语法和灵活的功能，Getx 让状态管理变得更加直观，同时提供了便捷的导航方法和国际化支持。无论您是刚入门的开发者还是经验丰富的专业人士，Getx 都能帮助您提升开发效率，快速构建高性能的 Flutter 应用。
Getx
需要用到 getx 都 包裹在 GetMaterialApp
get
先下载依赖
cupertino_icons: ^1.0.2 get: ^4.6.5
再引入
import 'package:get/get.dart';
使用
defaultDialog
GetMaterialApp
ElevatedButton( onPressed: () { Get.defaultDialog( title: "tip", middleText: "this is a content", confirm: ElevatedButton( onPressed: () { Get.back(); }, child: Text("confirm")), cancel: ElevatedButton( onPressed: () { Get.back(); }, child: Text("cancel"))); }, child: Text("click me")), )
snackbar
ElevatedButton( onPressed: () { Get.snackbar("title", "have a good day", snackPosition: SnackPosition.TOP); }, child: Text("click me again")),
bottomSheet 加主题管理
ElevatedButton( onPressed: () { Get.bottomSheet(Container( // color: Colors.white, color: Get.isDarkMode ? Colors.black87 : Colors.white, height: 200, child: Column( children: [ ListTile( leading: Icon(Icons.wb_sunny_outlined), title: Text( "day model", // style: TextStyle( // color: Get.isDarkMode // ? Colors.white // : Colors.black87), ), onTap: () { Get.changeTheme(ThemeData.light()); Get.back(); }, ), ListTile( leading: Icon(Icons.wb_sunny), title: Text( "evening model", ), onTap: () { Get.changeTheme(ThemeData.dark()); Get.back(); }, ) ], ), )); }, child: Text("click me again")),
isDismissible:true // 可以 点 背景 关闭 enableDrag: true // 可 拖动 isControlled : true // 是否 全屏 enterBottomSheetDuration:Duration(milliseconds:1000) exit // 出现时间和 退出时间
Navigation
使用
children: [ ElevatedButton(onPressed: (){ Get.to(()=>MyTest(), // 传参 arguments: "hello,jack", // 动画 fullscreenDialog: true, transition: Transition.upToDown, duration: Duration(milliseconds: 2000), curve: Curves.bounceIn); }, child: Text("go to home")), ],
接收 参数
children: [ Text("this is home"), // 接收参数 Text(Get?.arguments??""), ElevatedButton(onPressed: (){ Get.back(); }, child: Text("go back")) ],
子给父传参
父
ElevatedButton(onPressed: () async{ var data = await Get.to(()=>MyTest(),arguments: "Hello,jack"); print("the data is $data"); }, child: Text("go to home")),
子
ElevatedButton(onPressed: (){ // 可 带参 Get.back(result: "the data is you want get"); }, child: Text("go back"))
Obx
RxInt count = RxInt(0); // var count = Rx<double>(0); // var count = 0.obs; void increment() { count++; }
Obx(() => Text( "count is: $count", style: TextStyle(color: Colors.blue, fontSize: 20), )), SizedBox( height: 20, ), ElevatedButton( onPressed: () { increment(); }, child: Icon(Icons.add)),
getxController
国际化配置
translations 国际化 配置文件
locale 设置默认 语言， 不设置 则为当前 系统语言
fallbackLocale 配置错误下 使用的语言
messages
import 'package:get/get.dart'; class Messages extends Translations{ @override Map<String,Map<String,String>> get keys =>{ 'zh_CN':{ 'hello':"你好,世界" }, 'en_US':{ 'hello':"hello,world" } }; }
messageController
控制器改变语言
import 'dart:ui'; import 'package:get/get.dart'; class MessagesController extends GetxController{ void changeLanguage(String languageCode,String countryCode){ var locale=Locale(languageCode,countryCode); Get.updateLocale(locale); } }
使用
MessagesController messagesController = Get.put(MessagesController());
Text( // 这个 很重要 'hello'.tr, style: TextStyle(color: Colors.blue, fontSize: 20), ), SizedBox(height: 20,), ElevatedButton( onPressed: () { messagesController.changeLanguage('zh', 'CN'); }, child: Text("chinese")), SizedBox( height: 20, ), ElevatedButton( onPressed: () { messagesController.changeLanguage('en', 'US'); }, child: Text("english")),
