Flutter状态管理插件state_mgr的使用

Flutter状态管理插件state_mgr的使用

state_mgr 是一个用于 Flutter 应用的状态管理库。它允许你在不使用 StatefulWidget 的情况下管理对象的状态。

ChangeLog

ChangeLog.md

关于

该插件允许你管理对象的状态，而不需要使用 StatefulWidget。状态管理器可以让你将模型的状态管理和其展示逻辑分开。

使用

下面是一个基本的应用示例，展示了如何使用 state_mgr 库。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '简单状态管理示例',
      home: MyStaterPage(title: 'Flutter Demo 状态管理页面'),
    );
  }
}

class MyStaterPage extends StatelessWidget {
  const MyStaterPage({super.key, required this.title});

  final String title;

  static int _counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stater<StateManager>(
        builder: (stater) {
          return Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text(
                    '你已经按下了按钮这么多次：',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                _counter++;
                stater.invalidate();
              },
              tooltip: '增加',
              child: const Icon(Icons.add),
            ), // 这个逗号使得构建方法更美观
          );
        }
    );
  }
}

让我们将计数器状态处理逻辑提取到一个单独的类 CounterState 中。

class MyStaterPage extends StatelessWidget {
  const MyStaterPage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stater(
        manager: () => CounterState(),
        builder: (stater) {
          return Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text(
                    '你已经按下了按钮这么多次：',
                  ),
                  Text(
                    '${stater.counter}',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () => stater.counter++,
              tooltip: '增加',
              child: const Icon(Icons.add),
            ), // 这个逗号使得构建方法更美观
          );
        }
    );
  }
}

class CounterState extends StateManager {
  int _counter = 0;
  int get counter => _counter;
  set counter(int value) {
    if (_counter == value) return;
    _counter = value;
    invalidate();
  }
}

现在所有的计数器状态管理逻辑都可以在单独的 CounterState 类中完成。

例如，我们可以添加模拟从服务器获取响应的延迟。

class CounterState extends StateManager {
  int _counter = 0;
  int get counter => _counter;
  set counter(int value) {
    if (_counter == value) return;

    Future.delayed(const Duration(seconds: 1), () {
      _counter = value;
      invalidate();
    });
  }
}

现在我们可以扩展并添加更多选项来控制计数器状态逻辑。

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '状态管理演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyStaterPage(title: '状态管理演示页面'),
    );
  }
}

class MyStaterPage extends StatelessWidget {
  final String title;

  const MyStaterPage({super.key, required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stater(manager: () => CounterState('能量')),
          Stater(manager: () => CounterState('健康')),
          Stater(manager: () => CounterState('伤害')),
        ],
      ),
    );
  }
}

class CounterState extends StateManager {
  String label;

  CounterState(this.label);

  int _value = 0;

  int get value => _value;

  set value(int value) {
    if (value < 0) value = 0;
    if (_value == value) return;
    _value = value;
    invalidate();
  }

  void dec() => value--;

  void inc() => value++;

  [@override](/user/override)
  Widget build() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '$label: $value',
          style: Theme.of(context).textTheme.headline4,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OutlinedButton(
                style: OutlinedButton.styleFrom(backgroundColor: Colors.red.shade100),
                onPressed: value > 0 ? dec : null,
                child: const Icon(Icons.keyboard_arrow_left)),
            const SizedBox(width: 5),
            OutlinedButton(
                style: OutlinedButton.styleFrom(backgroundColor: Colors.green.shade100),
                onPressed: inc,
                child: const Icon(Icons.keyboard_arrow_right)),
          ],
        )
      ],
    );
  }
}