Flutter动态观察与监听插件beholder的使用

简介

beholder 是一个用于 Flutter 的简单状态管理库。该库主要用于处理应用的状态变化，并能够自动更新依赖于这些状态变化的视图。

安装

首先，你需要在项目的 pubspec.yaml 文件中添加 beholder 插件：

dependencies:
  beholder: ^x.x.x

然后运行 flutter pub get 来安装它。

快速开始

步骤 1: 定义一个 ViewModel

ViewModel 用于封装状态和业务逻辑。例如，定义一个计数器的 ViewModel：

class CounterViewModel extends ViewModel {
  late final counter = state(0);

  void increment() => counter.value++;
}

步骤 2: 监听状态变化

使用 Observer 来监听并自动更新视图。当 counter 的值发生变化时，视图会重新构建：

final vm = CounterViewModel();

Widget build(BuildContext context) {
  return Observer(
    builder: (context, watch) => OutlinedButton(
      onPressed: vm.increment,
      child: Text("${watch(vm.counter)}"),
    ),
  );
}

步骤 3: 处理异步数据

ViewModel 可以处理异步数据，通过 state 和 AsyncValue 类型来实现。例如，搜索用户时的状态管理：

class SearchUsersScreenVm extends ViewModel {
  late final search = state("");
  late final users = state(Loading<List<User>>());

  SearchUsersScreenVm() {
    search.listen((_, current) => refresh());
  }

  Future<void> refresh() async {
    users.value = Loading();
    try {
      final List<User> result = await Api.fetchUsers(search: search.value);
      users.value = Data(result);
    } catch (error) {
      users.value = Failure(error);
    }
  }
}

步骤 4: 释放资源

每次使用完 ViewModel 后，记得调用 dispose 方法来释放资源：

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final vm = SearchUsersScreenVm();

  @override
  Widget build(BuildContext context) {
    // 构建视图
  }

  @override
  void dispose() {
    vm.dispose();
    super.dispose();
  }
}

观察者模式

状态管理 (state)

state 是 beholder 中的核心概念之一。它能够跟踪其值的变化，并通知所有依赖它的观察者。

更新值

late final counter = state(0);
void increment() {
  counter.value = counter.value + 1;
  // 或者
  counter.update((current) => current + 1);
}

监听值的变化

counter.listen((previous, current) {
  // 对当前值进行处理
});

计算属性 (computed)

computed 用于从 state 中派生出新的值：

class User {
  final String name;
  User(this.name);
}

class UserProfileVm extends ViewModel {
  late final user = state<User?>(null);
  late final username = computed((watch) => watch(user)?.name ?? 'Guest');
}

参数化计算属性 (computedFactory)

如果需要参数化的计算属性，可以使用 computedFactory：

class UserListVm extends ViewModel {
  late final users = state(<User>[]);
  late final usernameByIndex = computedFactory((watch, int index) {
    return watch(users)[index];
  });
}

// 使用
final vm = UserListVm();

Widget build(BuildContext context) {
  return ListView.builder(
    itemBuilder: (context, index) => Observer(
      builder: (context, watch) {
        final username = watch(vm.usernameByIndex(index));
        return Text(username);
      }
    )
  );
}

将 Observable 转换为 Stream

每个 Observable 都可以被转换为一个 Stream：

class SearchScreenVm extends ViewModel {
  SearchScreenVm(this.githubApi) {
    final subscription = search.asStream().listen((value) {
      print("Search query changed to $value");
    });

    disposers.add(subscription.cancel);
  }

  late final search = state('');
}

工具类

异步值 (AsyncValue)

AsyncValue 用于处理异步数据，有三种子类型：

• Data - 异步操作成功完成
• Loading - 异步操作未完成
• Failure - 异步操作出现错误

Widget build(BuildContext context) {
  return Observer(
    builder: (context, watch) {
      final posts = watch(vm.posts);
      if (posts case Loading(previousResult: Data(value: var posts))) {
        return Stack(
          children: [
            ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) => Text(posts[index].title),
            ),
            const CircularProgressIndicator(),
          ]
        );
      }

      // 其他逻辑
    }
  );
}

为什么使用 late 关键字？

late 关键字允许你在字段初始化时调用实例方法。例如：

class CounterViewModel extends ViewModel {
  late final counter = state(0);
}

这相当于：

class CounterViewModel extends ViewModel {
  final ObservableState<int> counter;
  CounterViewModel() : counter = ObservableState(0) {
    disposers.add(counter.dispose);
  }
}