Flutter状态管理插件StateX的使用

StateX 是一个用于简化和集中状态管理的库。它通过在单个存储（store）中进行状态管理来提高性能，因为构建器只处理特定范围内的变化，避免了整个小部件树的重新构建。

示例代码

示例代码

// 模拟的仓库类，用于示例
class Repository {
  Future<bool> authUser(String email, String passwold) async {
    await Future.delayed(Duration(seconds: 3));
    return true;
  }
}

// 这样我们就创建了一个新的视图模型，其中将集中管理主页的状态
class HomeViewModel extends StateXStore {
  // 以这种方式创建一个新的属性，该属性由StateX管理
  late final xEmail = StateX.of(this)("");
  late final xPassword = StateX.of(this)("");
  late final xUserStatus = StateX.of(this)("请登录");

  final repo = Repository();

  set email(String value) => xEmail.value = value;
  String get email => xEmail.value;

  set password(String value) => xPassword.value = value;
  String get password => xPassword.value;

  set userStatus(String value) => xUserStatus.value = value;
  String get userStatus => xUserStatus.value;

  bool get isValid => email.isNotEmpty && password.isNotEmpty;

  void auth() async {
    // 这里表示视图处于加载状态
    setLoading(true);
    if (await repo.authUser(email, password)) {
      xUserStatus.value = "用户已登录";
      // 这里表示视图可以取消加载状态
      setLoading(false);
    } else {
      // 如果出现错误，则设置异常
      setError(Exception("邮箱或密码无效"));
    }
  }
}

void main() {
  // 这里添加全局观察者，用于应用程序状态的管理和错误日志记录
  StateXGlobalObserver.listen((type, state) => print(type));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StateX',
      theme: ThemeData(primarySwatch: Colors.blue, accentColor: Colors.white),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var viewModel = HomeViewModel();

  [@override](/user/override)
  void initState() {
    // 这里添加一个观察者，用于错误管理，但任何状态的变化都会通过这里
    viewModel.addObserver((type, state, key) => print(key == viewModel.xEmail.key));
    super.initState();
  }

  [@override](/user/override)
  dispose() {
    viewModel.dispose();
    super.dispose();
  }

  Widget _buildButton(bool inLoading) {
    Widget buttonChild = inLoading
        ? SizedBox(
            width: 20,
            height: 20,
            child: CircularProgressIndicator(
              color: Colors.white,
            ))
        : Text("进入");
    return Container(
      width: double.infinity,
      height: 48,
      child: ElevatedButton(
        onPressed: viewModel.isValid ? viewModel.auth : null,
        child: buttonChild,
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("StateX"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(21),
          child: Center(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  // 使用 scoped builder 的示例
                  StateXScopedBuilder(
                    // 指定哪个 store 将管理此范围内的更改
                    store: viewModel,
                    // 可选参数。指定要监听哪些属性的状态更改，如果不传递此参数，scoped 将在每次 store 更改时重建
                    states: [viewModel.xUserStatus],
                    onState: () => Text(
                      viewModel.userStatus,
                    ),
                  ),
                  TextField(
                    onChanged: (value) {
                      viewModel.email = value;
                    },
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  TextField(
                    onChanged: (value) {
                      viewModel.password = value;
                    },
                  ),
                  SizedBox(
                    height: 20,
                  ),

                  // 使用 scoped builder 的另一个示例
                  StateXScopedBuilder(
                    // 指定哪个 store 将管理此范围内的更改
                    store: viewModel,
                    // 可选参数。指定要监听哪些属性的状态更改，如果不传递此参数，scoped 将在每次 store 更改时重建
                    states: [viewModel.xEmail, viewModel.xPassword],
                    onLoading: () => _buildButton(true),
                    onState: () => _buildButton(false),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  // 使用 state builder 的示例
                  StateXBuilder(
                    // 指定哪个 store 将管理此 builder 中的更改
                    store: viewModel,
                    // 可选参数。指定要监听哪些属性的状态更改，如果不传递此参数，scoped 将在每次 store 更改时重建
                    states: [viewModel.xEmail, viewModel.xPassword],
                    // 参数指示当 store 处于加载状态时将重建
                    includeLoading: true,
                    builder: (context, snapshot) {
                      return _buildButton(snapshot.type == StateXType.isLoading);
                    },
                  )
                ],
              ),
            ),
          ),
        ));
  }
}