Flutter轻量级状态管理插件lite_state的使用

简介

Flutter Lite State 是一个极其轻量的状态管理库，它帮助开发者在不需要依赖任何重量级库的情况下轻松控制小部件的状态。Lite State非常适合那些希望快速启动项目而不必编写大量样板代码、不想依赖BuildContext或不希望在一个地方拥有过多功能的开发者。

特点

• 不需要上下文即可轻松控制小部件的状态。
• 通过继承LiteStateController类来创建控制器，所有魔法都在内部发生。
• 支持延迟初始化和即时初始化两种方式。
• 可以方便地将数据存储到SharedPreferences中，并且可以在应用启动时恢复这些数据。

快速开始

创建控制器

首先我们需要创建一个继承自LiteStateController的控制器类：

import 'package:lite_state/lite_state.dart';

class AuthController extends LiteStateController<AuthController> {
  // 控制器逻辑...
}

初始化控制器

接下来，在应用程序启动时初始化控制器：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    initJsonDecoders({
      AuthData: AuthData.decode, // 如果有需要持久化的数据类型，则在此处注册解码器
    });

    initControllersLazy({
      AuthController: () => AuthController(),
      LoaderController: () => LoaderController(),
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

使用LiteState构建UI

然后就可以在任何地方使用LiteState来构建UI了：

Widget build(BuildContext context) {
  return LiteState<AuthController>(
    builder: (BuildContext c, AuthController controller) {
      return Scaffold(
        body: Center(
          child: Column(
            children: [
              Text('Welcome, ${controller.userName}'),
              Button(
                text: controller.isAuthorized ? 'Log Out' : 'Authorize',
                onPressed: () {
                  if (controller.isAuthorized) {
                    findController<AuthController>().logout();
                  } else {
                    findController<AuthController>().authorize();
                  }
                },
              ),
            ],
          ),
        ),
      );
    },
  );
}

单次使用的控制器

如果需要创建一个仅在特定范围内使用的控制器，可以这样做：

return LiteState<SingleUseController>(
  controller: SingleUseController(),
  builder: (BuildContext c, SingleUseController controller) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Single Use Controller'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(
              controller.counter.toString(),
              style: const TextStyle(fontSize: 50.0),
            ),
            Button(
              text: 'Update Counter',
              onPressed: () {
                controller.counter++;
              },
            ),
          ],
        ),
      ),
    );
  },
);

多个隔离控制器

当同一个类型的多个控制器实例不会相互冲突时，可以通过设置useIsolatedController参数为true来实现：

LiteState<ControllerForMultiControllerSetup>(
  controller: _controller1,
  useIsolatedController: true,
  builder: (BuildContext c, ControllerForMultiControllerSetup controller) {
    // ...
  },
),

持久化数据

为了使某些数据能够在应用程序重启后仍然存在，我们可以利用SharedPreferences进行数据的保存与读取。首先定义一个实现了LSJsonEncodable接口的数据类：

class AuthData implements LSJsonEncodable {
  String type;
  String token;
  String userName;

  AuthData({
    required this.type,
    required this.token,
    required this.userName,
  });

  @override
  Map encode() {
    return {
      'type': type,
      'token': token,
      'userName': userName,
    };
  }

  static AuthData decode(Map map) {
    return AuthData(
      type: map['type'],
      token: map['token'],
      userName: map['userName'],
    );
  }
}

接着在控制器中定义相关属性：

class AuthController extends LiteStateController<AuthController> {
  AuthData? get authData {
    return getPersistentValue<AuthData>('authData');
  }

  set authData(AuthData? value) {
    setPersistentValue<AuthData>('authData', value);
  }

  String get userName {
    return authData?.userName ?? 'Guest';
  }
}

最后不要忘记在initState()方法中初始化解码器：

initJsonDecoders({
  AuthData: AuthData.decode,
});

这样就完成了对AuthData对象的持久化支持。更多完整示例请参考官方提供的example项目。