当前位置：首页 > news >正文

Flutter 状态管理框架Get

news 2024/10/25 0:10:58

状态管理框架 Get的使用

GetMaterialApp

路由的注册

路由的跳转

middlewares的使用

组件使用 defaultDialog bottomSheet snackbar

状态刷新有很多种方式

ValueBuilder

Obx 基础使用

是时候引入GetxController, 也是Get里面的常用的

GetX

优化控制器的使用 put

优化控制器的使用find

优化控制器的使用懒加载lazyput

GetView

接下来GetConnect就是网络请求的使用

GetConnect

GetConnectStatemixin

GetConnectDio

切换主题

多语言切换

常使用的Getx自带的API

不得不说，GetX使你的代码量减少了许多，一个obs. 一个obx. 搞定你的数据监听刷新, 给你不一样的简洁。

GetMaterialApp

 return GetMaterialApp(title: 'Flutter Demo',getPages: MyRoutes.routes, //注册路由// initialRoute: MyHomePage.route,  //该属性, 设置有有问题, 在自定义转场动画的时候, 跳转的时候右边会黑屏 unknownRoute: MyRoutes.notFoundPage, //默认404的路由地址theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(),);

// initialRoute: MyHomePage.route，//该属性，在自定义转场动画的时候, 跳转的时候右边会黑屏

路由的注册

class MyRoutes {static List<GetPage> routes = [//正常注册GetPage(name: MySettingPage.route, page: () => const MySettingPage()),GetPage(name: MyHomePage.route, page: () => const MyHomePage(), children: [//children 这里可以注册子页面, 一级, 二级, 三级, 页面都可以GetPage(name: MyProductPage.route, page: () => const MyProductPage(), children: [GetPage(name: MyProductDetailPage.route, page: () => const MyProductDetailPage()),GetPage(name: MySettingPage.route, page: () => const MySettingPage()),GetPage(name: MySettingPage.routeID, page: () => const MySettingPage()),]), ]),];
}

路由的跳转

//使用路由String跳转, 这样写, 注册的时候 /MyProductPage 必须要在 MyHomePage 的children: [ 里面] 如上展示
Get.toNamed("/MyHomePage/MyProductPage");
Get.toNamed("/MyHomePage/MyProductPage/MySettingPage");
//直接跳转对应的页面
Get.to(const MyProductPage());
//使用路由跳转并传值
Get.toNamed("/MyHomePage/MyProductPage/MySettingPage?id==345");//返回上一个页面, 并传值, 接收参数的 var result = await Get.toNamed("/MyHomePage/MyProductPage/MySettingPage?id==345");
Get.back(result: {"success": true}),//特殊路由传值 需要定义路由: "/MySettingPage/:id";, 才能使用下方跳转传值
Get.toNamed("/MyHomePage/MyProductPage/MySettingPage/8910");//跳转后, 消除上页面的堆栈
Get.off(const MyProductDetailPage());
Get.offNamed(MyProductDetailPage.route);//跳转后, 消除所有的堆栈
Get.offAll(const MyProductDetailPage());
Get.offAllNamed(MyProductDetailPage.route);

middlewares的使用

一个类似拦截器的功能，可以传入多个，需要自定研究下优先级。

 GetPage(name: MyMinePage.route, page: () => const MyMinePage(), middlewares: [        MyRouteAuthMiddleware()]),
class MyRouteAuthMiddleware extends GetMiddleware {@overrideRouteSettings? redirect(String? route) {// 加入 AuthService 这里可以判断下用户是否登录,  如果true return super.的方法//否则去都登陆页面Future.delayed(const Duration(seconds: 1), () => Get.snackbar("提示", "请先登录APP"));return const RouteSettings(name: MyLoginPage.route);}
}

组件使用 defaultDialog bottomSheet snackbar

Get.snackbar
Get.bottomSheet
Get.defaultDialog
自行调用, 没有难度

状态刷新有很多种方式

ValueBuilder

爱了, 爱了, 直接导入头文件, 只刷新该作用域的.

ValueBuilder<List<String>?>(initialValue: const ["A", "B", "C"],builder: (value, updateFn) {return Column(children: [Text("List -> $value"),ElevatedButton(onPressed: () {List<String> newList = [...value!]; // 使用扩展运算符来创建列表的浅拷贝newList.add("${newList.length}");// newList.removeAt(1); // 移除索引为1的元素newList.shuffle();//元素随机updateFn(newList); // 使用新列表更新状态},child: const Text('ValueBuilder -> add'),)]);}),

Obx 基础使用

比如在Widget, 声明一个属性, 使用的时候使用Obx(()=>{}) 包裹一下,然后在其他地方点击,修改count值就OK了, 因为增加了obs, 就成了, count.value++ 来修改值

//Int
RxInt count = 0.obs;
var count1 = 0.obs;
Obx(() => Column(children: [Text("int -> $count"),Text("int -> $count1"),
])//刷新
updateCount() {count.value++;count1.value++;}
在监听list. map. 枚举 的时候要注意, 一定要从新赋值才会刷新//刷新枚举void updateViewState(ViewState newValue) {  viewState.value = newValue; // 更新枚举值  }  
//刷新listupdateList() {list[0] = "BMW";list1[0] = "BMW"; 
}
//刷新Map
updateMap() {map["Audi"] = "BMW";map1["Audi"] = "BMW";
}
//刷新List中的Model
updateModels() {models[0] = GetXModels(name: "BMW");models1[0] = GetXModels(name: "BMW");}
//刷新Model
updateModel() {model.value = GetXModels(name: "BMW");model1.value = GetXModels(name: "BMW");
}
使用的地方一地个要加上Obx()

是时候引入GetxController, 也是Get里面的常用的

GetX<MyGetxController>

可以包裹引用Controller值的地方, 进行局部刷新, 还有声明周期的回调推荐 ☆☆☆

//要创建控制器Controller
class MyPutController extends GetxController {}
//在widget的build方法中
final MyGetxController getxController = MyGetxController();
//使用例子ListTile(title: const Text("update list"),subtitle: GetX<MyGetxController>(init: getxController,initState: (_) {},builder: (_) {return Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text('我要买${getxController.list.toString()}'),Text('我要买${getxController.list1.toString()}'),],);},),onTap: () {//list, 要修改list里面的元素, 才会去更新UIgetxController.updateList();},
),

优化控制器的使用 put

//在Widget的build方法里面我们注册一个controller 推荐 ☆☆☆

final MyPutController countController = Get.put<MyPutController>(MyPutController());
在使用过程中使用Obx(())包裹即可, 
ListTile(title: const Text("update Count"),subtitle: Obx(() => Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text('count = ${countController.count.value}'),Text('count = ${countController.count1.value}'),],)),onTap: () {countController.updateCount();},
),

优化控制器的使用find

//在put过MyProductController()的Widget的build方法里面即二级页面, 三级页面....子页面

final MyProductController productController = Get.find<MyProductController>();
在使用过程中使用Obx(())包裹即可, 也可以使用GetX<MyProductController>build 也可以
ListTile(title: Text("传值 Get.arguments; = ${details.toString()} parameters == ${parameters.toString()}"),subtitle: Obx(() => Text(productController.myProductList.length.toString())),onTap: () {productController.addProduct(MyProduct(name: 'iPhone 16', description: 'APPle 设备', price: 8199));productController.addCount();}),

优化控制器的使用懒加载lazyput

这里就要引出Binding的使用了

class MyGetLazyPutBinding implements Bindings {@overridevoid dependencies() {Get.lazyPut(() => MyGetLazyPutController());}
}
// MyGetLazyPutController 上面说的controller. 必须创建, 切继承GetxController
//注册路由的时候
GetPage(name: MyLazyPutPage.route, page: () => const MyLazyPutPage(),binding: MyGetLazyPutBinding()),
//在Widget页面的时候就,不用调用Getx.put的方法, 会自动Put
//直接去find找到该Controller
final MyGetLazyPutController getLazyPutController = Get.find<MyGetLazyPutController>();
//在使用过程中使用Obx(())包裹即可, 也可以使用GetX<MyProductController>build 也可以
//建议自己撸一遍代码, 会印象更加深刻

GetView

这个更加简单, 省略put, find 的步骤, 不过还是要一个Controller的

//创建Widget的时候,需要增加一个泛型
class MyGetViewPage extends GetView<MyGetLazyPutController> 
//上面的路由注册, 还是要注册一个Controller
GetPage(name: MyLazyPutPage.route, page: () => const MyLazyPutPage(),binding: MyGetLazyPutBinding()),
//在widget中, 就自带了controller的变量 ,可以翻看源码中
abstract class GetView<T> extends StatelessWidget {const GetView({Key? key}) : super(key: key);final String? tag = null;T get controller => GetInstance().find<T>(tag: tag)!;@overrideWidget build(BuildContext context);
}
//就会知道, 内部帮忙find_Controller