Flutter状态构建插件flutter_state_builder的使用

特性

flutter_state_builder 是一个方便的小部件，用于在不使用 StatefulWidget 的情况下重建子小部件。

• [builder] => 返回需要刷新的子小部件。
• [routeName] => 父小部件的标识符字符串值。
• [holder] => StateBuilder 小部件的一个特定字符串 ID。如果你在一个父小部件中有多个构建器，并且只想刷新其中一个，设置该构建器的 holder ID。

这个小部件总是与 StateHandler 实例成对出现。StateBuilder 类似于一个小部件包装器，而 StateHandler 将控制何时需要重建子小部件。这意味着你必须声明一个与 StateBuilder 具有相同 [routeName] 的 StateHandler。

开始使用

运行以下命令：

使用 Dart:

$ dart pub add flutter_state_builder

使用 Flutter:

$ flutter pub add flutter_state_builder

这将在你的包的 pubspec.yaml 文件中添加类似如下的行（并隐式运行 dart pub get）：

dependencies:
    flutter_state_builder: ^1.0.0

或者，你的编辑器可能支持 dart pub get 或 flutter pub get。请查阅你的编辑器文档以了解更多信息。

使用方法

StateHandler _handler = StateHandler('your_screen_widget_route_name');
StateBuilder(
    routeName: 'your_screen_widget_route_name',
    builder: () => child_widget,
    holder: 'a_builder_id',
)

• [StateHandler] 控制 StateBuilder 的状态。当你需要重建构建器时，调用此函数：

_handler.refresh();

额外信息

邮箱: leonacky@gmail.com

完整示例

以下是一个完整的示例，演示了如何使用 flutter_state_builder 插件来管理状态。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;
  final StateHandler _handler = StateHandler('home_page');

  void incrementCounter() {
    setState(() {
      counter++;
    });
    _handler.refresh(); // 刷新状态
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter State Builder Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            StateBuilder(
              routeName: 'home_page',
              builder: () => Text(
                '$counter',
                style: Theme.of(context).textTheme.headline4,
              ),
              holder: 'counter_builder',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}