Flutter架构管理插件flutter_arch的使用

flutter_arch

flutter_arch 是一个用于帮助开发者更好地管理Flutter应用架构的插件。它包括ViewModel、LiveData及BaseViewState等组件，主要用于将业务逻辑和UI分离。

arch

ViewModel

ViewModel 用于处理业务逻辑，并为 BaseViewState 提供可观测的数据 LiveData。

使用示例：

class HomeModel extends ViewModel {
  /// 可观测的数据
  LiveData<int> count = LiveData(0);

  HomeModel(BuildContext context) : super(context);

  @override
  void initData() {
    // 完成初始化数据工作
    count.setValue(1);
  }

  /// 提供给UI操作的数据的
  void incrementCounter() {
    var countValue = count.getValue() + 1;
    Future.delayed(
        const Duration(seconds: 3), () => count.setValue(countValue));
  }

  /// 释放资源
  @override
  void dispose() {}
}

BaseViewState

BaseViewState 是一个用于 State 的mixin类，为UI状态提供 ViewModel。

使用示例：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with BaseViewState<MyHomePage, HomeModel> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    // initState阶段使用getValue直接，从LiveData中获取数据
    _counter = model.count.getValue();
    // 观察LiveData中数据变化，第二lifecycleOwner会将观察者与State的生命周期绑定，当state 执行dispose后，观察者会自动取消注册。
    model.count.listen((t) {
      // 根据需要去更新UI
      setState(() {
        _counter = t;
      });
    }, lifecycleOwner: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            IconButton(
                iconSize: 100,
                color: Colors.amber,
                onPressed: () =>
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (_) => const MyHomePage(title: "第二个"))),
                icon: const Icon(Icons.nat)),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 通过model 操作数据。
        onPressed: () => model.incrementCounter(),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  /// 实现该方法 会在initState阶段执行 创建Model
  @override
  HomeModel createModel() => HomeModel(context);
}

LiveData

LiveData 是一个数据持有类，可以通过 listen 方法观测数据的变化。listen 的第一个参数为数据变化的回调，可选参数 lifecycleOwner 类型为 BaseViewState，指定 lifecycleOwner 时，数据变化的回调会在 BaseViewState dispose时自动取消注册。如果 LiveData 不指定 lifecycleOwner，则需要手动移除数据变化的回调。

使用示例：

class UserInfo {
  String name;

  UserInfo(this.name, this.account);

  String account;
}

LiveData<UserInfo> userInfo = LiveData(UserInfo("jack", "123"));

void setUserInfo(UserInfo info) {
  // 更新数据
  userInfo.setValue(info);
}

void observer(UserInfo info) {
  if (kDebugMode) {
    print("name=${info.name} & account= ${info.account}");
  }
}

void listenUserInfo() {
  // 直接获取
  userInfo.getValue();
  // 监听变化 lifecycleOwner 类型
  userInfo.listen(observer, lifecycleOwner: null);
}

void removeObserver() {
  // 手动移除
  userInfo.removeObserver(observer);
}