Flutter状态属性管理插件stateful_props的使用

stateful_props 是一个用于简化 StatefulWidget 状态管理的插件，提供了多种预定义的属性类（Props），帮助开发者更高效地处理常见的Flutter用例。本文将介绍如何安装和使用这个插件，并提供完整的示例代码。

🔨 安装

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

dependencies:
  stateful_props: ^1.2.0

⚙ 导入

在需要使用的文件中导入 stateful_props 包：

import 'package:stateful_props/stateful_props.dart';

🕹️ 基本使用

stateful_props 提供了多种预定义的 Props 类，例如 AnimationControllerProp, FocusNodeProp, FutureProp, IntProp, DoubleProp, StringProp, BoolProp, PageControllerProp, ScrollControllerProp, StreamProp, StreamControllerProp, TabControllerProp, TextEditingControllerProp 等等。

这些 Props 类通常会自动处理值变化时调用 setState 和必要的 dispose 操作。

示例：使用 AnimationControllerProp

以下是一个简单的例子，展示如何使用 AnimationControllerProp 来管理 AnimationController：

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with StatefulPropsMixin {
  late final _anim = AnimationControllerProp(this, duration: Duration(seconds: 1), autoBuild: true);

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: _anim.controller.value,
      child: Container(
        color: Colors.blue,
        width: 100,
        height: 100,
      ),
    );
  }
}

在这个例子中，我们不需要手动监听动画的变化或调用 dispose() 方法，因为 AnimationControllerProp 已经帮我们处理好了。

🕹️🕹️ 高级使用

创建新的 Props

可以通过扩展 StatefulProp 类来创建自定义的 Prop：

class MyCustomProp extends StatefulProp {
  MyCustomProp(StatefulPropsManager manager) : super(manager);

  @override
  void didChangeDependencies() {}

  @override
  void dispose() {}

  @override
  void didUpdateWidget(covariant StatefulWidget oldWidget) {}

  @override
  void activate() {}

  @override
  void deactivate() {}
}

通常情况下，只需在构造函数中初始化一些状态，并在 dispose() 中清理资源即可：

class FooControllerProp extends StatefulProp {
  FooControllerProp(StatefulPropsManager manager, {bool autoBuild = false}) : super(manager) {
    // setup
    controller = FooController();
    if (autoBuild) controller.addListener(manager.scheduleBuild);
  }

  late final FooController controller;

  @override
  void dispose() {
    // tear down
    controller.dispose();
  }
}

重用状态逻辑

Props 可以封装任意数量的逻辑和状态，方便在多个小部件之间共享或隔离进行测试。例如，可以提取登录相关的通用行为到 LoginBehaviorProp：

class LoginBehaviorProp extends StatefulProp {
  LoginBehaviorProp(StatefulPropsManager manager) : super(manager);
  late final _emailText = TextEditingControllerProp(manager);
  late final _passwordText = TextEditingControllerProp(manager);
  late final _showPassword = BoolProp(manager); // rebuilds when changed

  TextEditingController get emailCtrl => _emailText.controller;
  TextEditingController get passwordCtrl => _passwordText.controller;
  bool get showPassword => _showPassword.value;

  void submit() => print('login logic goes here, talk to services models etc.');

  void toggleShowPassword() => _showPassword.value = !showPassword;
}

然后可以在任何 StatefulWidget 中使用这个 Prop：

class MyView extends StatefulWidget {
  @override
  _MyViewState createState() => _MyViewState();
}

class _MyViewState extends State<MyView> with StatefulPropsMixin {
  late final _login = LoginBehaviorProp(this);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(controller: _login.emailCtrl),
        TextFormField(
          controller: _login.passwordCtrl,
          obscureText: !_login.showPassword,
        ),
        ElevatedButton(onPressed: _login.submit, child: Text('Submit')),
      ],
    );
  }
}

示例项目

下面是一个完整的示例项目，展示了如何使用 stateful_props 插件来管理不同的控制器和状态：

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

void main() {
  runApp(App());
}

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  List<Widget> get children => [
        LogicReuseDemo(),
        FuturePropDemo(),
        ValuePropDemo(),
        AnimationsDemo(),
        FocusDemo(),
        PageControllerDemo(),
        ScrollControllerDemo(),
        TextEditingDemo(),
        StreamDemo(),
      ];

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> with StatefulPropsMixin {
  late final _tabs = TabControllerProp(this, length: widget.children.length);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: TabBarView(
                controller: _tabs.controller,
                children: widget.children.map((e) => Center(child: e)).toList(),
              ),
            ),
            TabBar(
              controller: _tabs.controller,
              tabs: List.generate(
                widget.children.length,
                (i) => Text(
                  widget.children[i].toString().replaceFirst('Demo', ''),
                  style: TextStyle(color: Colors.black, fontSize: 12),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

以上是 stateful_props 的基本使用方法和一些高级用法。通过使用该插件，可以大大简化状态管理的工作，提高代码的可读性和健壮性。