GetX学习笔记
getx状态管理框架学习笔记
在这里学习了：
Flutter应用框架搭建(一)GetX集成及使用详解 - 掘金 (juejin.cn)
一、依赖添加
dependencies:
get: ^4.6.5
二、初始化
要使用 GetX 需要对 GetX 进行初始化，需将默认的 MaterialApp 替换为
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
三、状态管理
GetX 提供了两种响应式状态管理的方法：响应式变量方式和状态管理器方式。
1、响应式变量方式
定义一个响应式变量，只需在变量的末尾加上一个 .obs 就可将变量定义为响应式变量：
var count = 0.obs;
响应式变量可以用在任何类型上：
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs;
// 自定义类 - 可以是任何类final user = User().obs;
获取响应式变量的值
使用的时候调用 value 即可拿到变量的值。
/////////// 注意对于 List 、Map 则不需要加 .value。///////////////
bool isLoggedValue = isLogged.value
int countValue = count.value
double numberValue = number.value
String item = items[0] //不需要.value
int value = myMap['key'] //不需要.value
String name = user.value.name
更新数据：
对于基础数据类型，只需要对 value 重新赋值即可更新数据并通过 Obx 刷新界面：
isLogged.value = true
count.value = 1
number.value = 12.0
对于其他数据类型需要调用 update 或者变量方法更新，如下：
user.update((value) {
value?.name = "123";
});
或者使用变量名方法重新赋值一个对象，比如变量名为 user 则可使用 user() 方法进行更新:
user(User(name: "abcd", age: 25));
刷新界面
在界面上使用响应式变量只需在使用变量的控件上包裹 Obx 即可实现响应式更新，即变量的值发生变化时自动刷新界面：
Obx(() => Text("${count.value}"))
数据变化监听
除了使用 Obx 实现界面数据自动刷新外，GetX 提供了多种手动方式对响应式变量进行数据变化监听，当数据发生变化时执行自定义的逻辑，比如数据变更后重新请求接口等。
- ever 当数据发生改变时触发
- everAll 和 "ever "很像，只是监听的是多个响应式变量的变化，当其中一个发生变化就会触发回调
- once 只在变量第一次被改变时被调用
- debounce 防抖，即延迟一定时间调用，且在规定时间内只有最后一次改变会触发回调。如设置时间为 1 秒，发生了3次数据变化，每次间隔500毫秒，则只有最后一次变化会触发回调。
- interval 时间间隔内只有最后一次变化会触发回调。如设置时间间隔为1秒，则在1秒内无论点击多少次都只有最后一次会触发回调，然后进入下一次的时间间隔。
使用方式：
///每次`count`变化时调用。
ever(count, (newValue) => print("$newValue has been changed"));
///只有在变量count在第一次被改变时才会被调用。
once(count, (newValue) => print("$newValue was changed once"));
///防DDos - 每当用户停止输入1秒时调用，例如。
debounce(count, (newValue) => print("debouce$newValue"), time: Duration(seconds: 1));
///忽略1秒内的所有变化，只有最后一次会触发回调。
interval(count, (newValue) => print("interval $newValue"), time: Duration(seconds: 1));
Eg. 计数器例子
class CounterPage extends StatelessWidget {
var count = 0.obs;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Counter"),
),
body: Center(
child: Obx(
() => Text("${count.value}", style: const TextStyle(fontSize: 50))),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => count++,
),
);
}
}
2、状态管理器
GetX 还提供了使用 Controller 来管理状态，实现一个自定义 Controller 类继承自 GetxController ，Controller 中进行业务逻辑的处理，当需要改变状态数据时调用 update() 来通知数据改变。本项目在很多地方用到。
拿计数器例子来说。
controller中，使用 Controller 来管理状态，自定义Controller 类继承至GetxController。
class CounterController extends GetxController{
int count = 0;
void increment(){
count ++ ;
update();
}
}
view中，使用 GetBuilder 进行包裹，这样使用 Controller 中的数据变化时，调用 update() 后就会刷新界面控件。
GetBuilder<CounterController>(
init: CounterController(), //Controller 首次初始化
builder: (controller) {
return Text("${controller.count}", style: const TextStyle(fontSize: 50));
})
init: CounterController()只用初始化一次，之后的GetBuilder中不用写init。
Eg.计数器例子
class CounterController extends GetxController {
int count = 0;
void increment() {
count++;
update();
}
}
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Counter"),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
GetBuilder<CounterController>(
init: CounterController(),
/// 初始化 Controller
builder: (controller) {
return Text("${controller.count}",
style: const TextStyle(fontSize: 50));
}),
GetBuilder<CounterController>(
///没有进行初始化
builder: (controller) {
return Text("${controller.count}",
style: const TextStyle(fontSize: 50));
}),
],
),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
///使用 find 找到 Controller
CounterController controller = Get.find();
///调用 Controller 方法
controller.increment();
},
),
);
}
}
四、依赖
依赖管理。
解释：在GetBuilder 的 init 中初始化Controller 后，可在其他地方使用Get.find() 找到初始化的Controller。这就是依赖管理。
GetX 依赖管理可以注入任意类型的实例，并提供了多种依赖注入方式。
依赖注入
① Get.put
Get.put是 GetX 状态管理库中的一个方法，用于向 GetX 依赖注入系统中注册一个实例。依赖注入，是一种设计模式，它的目的是通过将依赖项注入到对象中来增强应用程序的可测试性、可维护性和可扩展性。
在 GetX 中，可以使用 get.put() 方法向依赖注入系统中注册一个实例。
例如，假设有一个 UserController 类用于管理用户信息，可以在应用程序启动时使用 get.put() 方法将其注册：
Get.put<UserController>(UserController());
Get.put<UserController>(UserController(), permanent: true);
Get.put<UserController>(UserController, tag: "counter");
依赖注入时除了依赖类的实例以外还可以设置额外参数：
- permanent：是否永久，默认 false 当实例不再使用时会进行销毁，true 则会一直保留
- tag：标签，用于区分同一个类不同实例。
在这个示例中，UserController 实例被注册为全局单例，可以在整个应用程序中访问该实例。可以在其他类中使用 Get.find() 方法来获取已注册的实例：
class UserProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 获取 UserController 实例
final UserController controller = Get.find();
return Scaffold(
appBar: AppBar(title: Text('User Profile')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Username: ${controller.username}'),
Text('Email: ${controller.email}'),
],
),
),
);
}
}
② Get.lazyPut()
Get.lazyPut() 是 GetX 状态管理库中的一个方法，它与 Get.put() 类似，也用于向 GetX 依赖注入系统中注册一个实例。不同之处在于，Get.lazyPut() 方法是“延迟注册”，即只有在该实例第一次被引用时才会创建。
这种延迟注册的好处在于，可以避免在应用程序启动时创建不必要的实例，从而提高性能和内存使用效率。例如，如果有一个耗时的初始化过程，可以使用 Get.lazyPut() 方法来延迟创建该实例。
下面是一个示例，展示了如何使用 Get.lazyPut() 方法：
class UserController extends GetxController {
final UserRepository _repository;
UserController(this._repository);
Future<void> init() async {
// 耗时的初始化过程
}
}
void main() async {
// 延迟注册 UserController 实例
Get.lazyPut<UserController>(() => UserController(UserRepository()));
runApp(MyApp());
// 等待 UserController 初始化完成
await Get.find<UserController>().init();
}
在示例中，UserController 实例通过 Get.lazyPut() 方法进行延迟注册，只有在实例被引用时才会创建。(即第一次 find 某一个类的时候才会进行初始化) 在应用程序启动时，UserController 的初始化过程被异步执行，初始化完成后才继续执行应用程序。
需要注意的是，Get.lazyPut() 方法只会创建一个实例，并且该实例会被缓存。如果你需要每次获取实例时都重新创建一个新的实例，请使用 Get.create() 方法。
lazyPut 同样有额外参数，跟 put 基本相同。
- fenix：类似'永久'，不同的是，当不使用时，实例会被丢弃，但当再次需要使用时，Get会重新创建实例
- tag：标签，用于区分同一个类不同实例。
③ Get.putAsync
putAsync 可以异步注册一个实例。用于某些实例需要异步初始化时使用，比如 SharedPreferences:
Get.putAsync<SharedPreferences>(() async {
final prefs = await SharedPreferences.getInstance();
await prefs.setInt('counter', 12345);
return prefs;
})
跟 put 一样，同样拥有 permanent 和 tag 参数，且作用一样。
④ Get.create
create 与 put 使用方式上基本类似，不同的是它的 permanent 默认为 true。
Get.create<CounterController>(() => CounterController());
获取实例
可以使用以下方法获取依赖的实例：
final controller = Get.find<CounterController>();
// 或者
CounterController controller = Get.find();
// 通过 tag 获取
final controller = Get.find<CounterController>("counter");
移除实例
也可以通过 delete() 方法来手动移除注入的依赖实例，大部分情况下不需要手动调用该方法，GetX 内部会自动处理，当不需要时自动移除
Get.delete<CounterController>();
五、路由管理
普通路由
- to:进入下一个界面
Get.to(CounterPage());
使用 arguments 进行参数传递：
Get.to(CounterPage(), arguments: count);
使用 arguments 方式可以传递任意类型的参数。
在下个页面获取参数：
dynamic args = Get.arguments;
- off：进入下一个界面，且导航没有返回
Get.off(CounterPage());
- offAll: 进入下一个界面并取消之前的所有路由
Get.offAll(CounterPage());
- back：返回
Get.back();
返回传参：
Get.back(result: 'success');
获取返回参数：
var data = await Get.to(CounterPage());
别名路由
首先，需要创建一个AppRouter 类用于统一配置路由映射关系：
GetPage 定义别名与页面的映射关系。
abstract class AppRouter {
static final pages = [
GetPage(
name: AppPath.login,
page: () => const LoginPage(),
),
GetPage(
name: AppPath.register,
page: () => const RegisterPage(),
),
GetPage(
name: AppPath.forgetPassword,
page: () => const ForgetPasswordPage(),
),
GetPage(
name: AppPath.setProfile,
page: () => const SetProfilePage(),
),
];
}
同时也可以创建AppPath 类用于统一配置路由名称
abstract class AppPath {
static const String home = '/';
static const String login = '/login';
static const String register = '/register';
static const String forgetPassword = '/forgetPassword';
static const String setProfile = '/setProfile';
static const String startLive = '/startLive';
static const String liveRoom = '/liveRoom';
static const String aboutUs = '/aboutUs';
static const String editProfile = '/EditProfile';
static const String setMySignature = '/setMySignature';
static const String myFollowing = '/myFollowing';
static const String feedback = '/feedback';
static const String sessionList = '/sessionList';
}
然后在 GetMaterialApp 进行initialRoute 和 getPages 的配置，即初始页面和路由映射集合:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
initialRoute: AppPath.home,
getPages: AppRouter.pages,
theme: ThemeData(
primarySwatch: Colors.blue,
)
);
}
}
- 路由跳转：
Get.toNamed(RouteGet.login);
- 路由传参：
Get.toNamed(RouteGet.login, arguments: {"name":"aaaa"});
也可以直接在路由别名后面跟参数，类似于 Url get 传参的方式：
Get.toNamed("/NextScreen?device=phone&id=354&name=Enzo");
- 接收参数：
- 通过 arguments 进行传参，在下个页面接收参数直接使用 Get.arguments 获取到传递过来的参数：
dynamic args = Get.arguments;
使用别名后 Url 传递参数的方式，使用 Get.parameters 获取参数：
Get.parameters['device']
Binding
Bindings 是 GetX 状态管理库中的一个概念，它用于在页面或路由生命周期中注册和注销依赖项，以确保资源的正确释放和管理。
在 GetX 中，每个页面或路由都可以有一个对应的 Binding 类，该类负责管理页面或路由所需要的所有依赖项。当通过 GetX 路由进入页面时，会自动调用 dependencies 方法， 可以在这里进行依赖关系的注册等。
别名路由举例：
class LoginBinding extends Bindings {
@override
void dependencies() {
Get.lazyPut(() => LoginController());
}
}
然后在GetPage 中进行绑定
GetPage(
name: AppPath.login,
page: () => const LoginPage(),
binding: LoginBinding(),
),
普通路由使用：
Get.to(CounterPage(), binding: CounterBinding());
