Flutter信号管理插件onix_flutter_signals的使用

Flutter信号管理插件onix_flutter_signals的使用

特性

本包包含一些基础类，旨在改进使用Signals状态管理的体验。

• PassiveSignalState - 一个状态类，不会在模型变化时自动重建小部件。你需要使用Watch或Watch.builder来包裹需要重建的小部件。还可以使用.watch(context)扩展方法在信号变化时重建小部件。

• ReactiveSignalState - 一个状态类，会在模型变化时自动重建小部件。它在内部使用了Watch小部件。

使用

要使用此包，需要在pubspec.yaml文件中添加Signals作为依赖项：

dependencies:
  signals: ^x.x.x

接下来，扩展你的ScreenModel类为SignalModel：

class MainScreenModel extends SignalModel {

向模型中添加信号：

final Signal<int> counter = signal(0);

在构造函数中初始化computedModel以在信号变化时改变模型的状态。如果使用多个信号，不要忘记添加它们。computedModel是一个信号，当它所依赖的任何信号发生变化时，它的值也会改变。对于非整数类型，需要计算其哈希值：

final Signal<int> counter = signal(0);
final Signal<String> text = signal('');

MainScreenModel() {
  computedModel = computed(
    () => counter.value.hashCode ^ text.value.hashCode,
  );
}

扩展你的状态fulWidget状态为PassiveSignalState以手动控制小部件的重建：

class _MainScreenState extends PassiveSignalState<MainScreenModel, MainScreen>

或者扩展为ReactiveSignalState以在模型变化时自动重建小部件：

class _MainScreenState extends ReactiveSignalState<MainScreenModel, MainScreen>

在createModel函数中创建模型实例：

MainScreenModel createModel() => MainScreenModel();

在buildWidget方法中编写小部件主体，而不是build方法：

[@override](/user/override)
Widget buildWidget(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('主屏幕'),
    ),
    body: Center(
      child: Watch(
        (context) => Text(
          '${stateSignals.counter}',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          stateSignals.counter.value++;
        });
      },
      child: Icon(Icons.add),
    ),
  );
}

如果你使用的是PassiveSignalState，你必须手动重建小部件，可以使用以下方式：

使用Watch小部件：

Watch(
  (context) => Text(
    '${stateSignals.counter}',
    style: Theme.of(context).textTheme.headlineMedium,
  ),
),

使用Watch.builder小部件：

Watch.builder(
  builder: (context) => Text(
    '${stateSignals.counter}',
    style: Theme.of(context).textTheme.headlineMedium,
  ),
),

或者使用.watch(context)扩展方法：

Text(
  '${stateSignals.counter}',
  style: Theme.of(context).textTheme.headlineMedium,
).watch(context),

示例代码

以下是完整的示例代码，展示了如何使用onix_flutter_signals插件。

import 'package:example/signals_examples/passive/passive_state_example.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const PassiveStateExample(),
    );
  }
}