Flutter插件just的介绍与使用

Flutter插件just的介绍与使用

Just

Just 是一个轻量级的状态管理库，基于 Provider 构建。

使用方法

1. 定义 ViewModel

ViewModel 是状态持有者，包含 State 和 Action。

class HomeViewModel extends ViewModel {
  // 状态定义
  final count = 0.obs;
  final now = Obs<DateTime.now>();
  final name = Obs<String?>(null);
  final age = Obs<int>(10); // 10.obs 或 Obs(10);

  // 动作1
  void increment() {
    final newValue = count.value + 1;
    // 更新状态
    setValue(count, newValue);
  }

  // 动作2
  void syncTime() {
    // 更新状态
    setValue(now, DateTime.now());
  }

  // 动作3
  void syncUserInfo() {
    var newAge = Random().nextInt(100);
    setValue(age, newAge);
    var wordPair = generateWordPairs().first;
    setValue(name, wordPair.asCamelCase);
  }

  [@override](/user/override)
  void dispose() {
    // 当销毁时执行的操作
    super.dispose();
  }
}

2. 集成 ViewModel

通过 ViewModelProvider 提供 ViewModel。

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 集成 ViewModel（状态持有者）
    return ViewModelProvider(
      create: (context) => HomeViewModel(),
      child: _HomePage(),
    );
  }
}

3. 数据绑定和动作

获取 ViewModel 的方法如下：

final viewModel = context.viewModel<HomeViewModel>();

数据绑定的方法如下：

DataBinding(() => Text('count: ${viewModel.count.value}'))

当状态（如 count）发生变化时，绑定的数据会自动重新构建。

class _HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final viewModel = context.viewModel<HomeViewModel>();
    return Scaffold(
      appBar: AppBar(
        title: const Text('Just'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 绑定状态 : count
            DataBinding(
              () => Text(
                'count: ${viewModel.count.value}',
                style: const TextStyle(fontSize: 20),
              ),
            ),
            const SizedBox(height: 10),
            // 绑定状态 : now
            DataBinding(
              () => Text(
                'now: ${viewModel.now.value.millisecondsSinceEpoch}',
                style: const TextStyle(fontSize: 20),
              ),
            ),
            const SizedBox(height: 10),
            // 绑定状态 : name 和 age
            DataBinding(
              () => Column(
                children: [
                  Text(
                    'name: ${viewModel.name.value}',
                    style: const TextStyle(fontSize: 20),
                  ),
                  const SizedBox(width: 10),
                  Text(
                    'age: ${viewModel.age.value}',
                    style: const TextStyle(fontSize: 20),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 10),
            Column(
              children: [
                FilledButton(
                  onPressed: () {
                    viewModel.increment();
                  },
                  child: const Text("increment"),
                ),
                FilledButton(
                  onPressed: () {
                    viewModel.syncTime();
                  },
                  child: const Text("syncTime"),
                ),
                FilledButton(
                  onPressed: () {
                    viewModel.syncUserInfo();
                  },
                  child: const Text("syncUserInfo"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}