Flutter状态管理插件simple_state的使用

Flutter状态管理插件simple_state的使用

简介

什么是SimpleState？

它是一个Flutter包，使得应用程序的反应式数据可以轻松连接到用户界面。

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  simple_state: [latest-version]

使用

简单的可观察对象

为了处理最简单的对象，我们使用Observable<T>，它可以通知观察者值的变化，但不会处理集合或对象内容的变化。

import 'package:simple_state/simple_state.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: SimpleObservable(),
      ),
    );

class SimpleObservable extends StatelessWidget {
  SimpleObservable({super.key});

  final _simpleObservable = Observable('Hello');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // 观察者每次监听到变化时都会触发
          child: Observer(
            builder: (_) => Text(_simpleObservable.value),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.flutter_dash),
          // 更改可观察对象的值
          onPressed: () => _simpleObservable.value += '\nWorld',
        ),
      ),
    );
  }
}

集合的可观察对象

为了处理集合，实现了三个类：ObservableList<T>，ObservableMap<K,V> 和 ObservableSet<T>。当向集合中添加/更改/删除元素时，观察者会收到通知。

import 'package:simple_state/simple_state.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: CollectionsObservable(),
      ),
    );

class CollectionsObservable extends StatelessWidget {
  CollectionsObservable({super.key});

  final _listObservable = ObservableList([0]);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // 观察者每次监听到变化时都会触发
          child: Observer(
            builder: (_) => ListView.builder(
              itemCount: _listObservable.length,
              itemBuilder: (_, i) => Text(_listObservable[i].toString()),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.flutter_dash),
          // 向可观察列表添加元素
          onPressed: () => _listObservable.add(_listObservable.length),
        ),
      ),
    );
  }
}

自定义的可观察对象

你也可以实现复杂的对象，这些对象可以通知观察者它们的变化。

import 'package:simple_state/simple_state.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: CustomObservable(),
      ),
    );

class CustomTitleObservable extends ChangeNotifier {
  CustomTitleObservable([String? title]) : _title = title;

  String? _title;

  String get title => _title ?? '';

  set title(String value) {
    _title = value;

    notifyListeners();
  }
}

class CustomObservable extends StatelessWidget {
  CustomObservable({super.key});

  late final _customObservable = CustomTitleObservable('#');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // 观察者每次监听到变化时都会触发
          child: Observer(
            builder: (_) => Text(_customObservable.title),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.flutter_dash),
          // 更改自定义可观察对象的值
          onPressed: () => _customObservable.title += '!',
        ),
      ),
    );
  }
}

反应

反应本质上是对变化的订阅。你可以创建一个反应 Reaction.when，它返回一个类型为 Reaction 的对象。要移除反应，必须调用 removeListeners()。你还可以创建异步反应 Reaction.asyncWhen。你也可以在小部件树中使用 ReactionWidget 小部件来使用反应。

import 'package:simple_state/simple_state.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      const MaterialApp(
        home: ReactionObservable(),
      ),
    );

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

  [@override](/user/override)
  _ReactionObservableState createState() => _ReactionObservableState();
}

class _ReactionObservableState extends State<ReactionObservable> {
  late final _exampleMap = ObservableMap<int, String>({});

  late final Reaction _reaction;

  [@override](/user/override)
  void initState() {
    // 创建一个反应，当映射长度达到五个元素时清空映射
    _reaction = Reaction.when(
      condition: () => _exampleMap.length == 5,
      reaction: _exampleMap.clear,
    );

    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    // 删除反应订阅
    _reaction.removeListeners();

    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // 观察者每次监听到变化时都会触发
          child: Observer(
            builder: (_) => ListView.builder(
              itemCount: _exampleMap.length,
              itemBuilder: (_, i) => Text(_exampleMap[i] ?? ''),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.flutter_dash),
          // 向可观察映射添加元素
          onPressed: () => _exampleMap[_exampleMap.length] = 'Item ${_exampleMap.length}',
        ),
      ),
    );
  }
}