Flutter命令式编程插件imperative_flutter的使用

Flutter命令式编程插件imperative_flutter的使用

通过使用命令式编程的概念来管理小部件的状态。

安装

在pubspec.yaml文件中安装imperative_flutter包：

dependencies:
  imperative_flutter: ^1.0.0

然后在你的代码中导入该包：

import 'package:imperative_flutter/imperative_flutter.dart';

使用

ImperativeProvider 负责存储状态并处理 ImperativeBuilder 的引用。它可以在全局范围内使用（当 MaterialApp 是其子组件时）或局部范围内使用（当 Scaffold 是其子组件时）。

示例代码

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ImperativeProvider(
      child: MaterialApp(
        title: 'Flutter Demo Home Page',
        home: MyHomePage(),
      ),
    );
  }
}

ImperativeBuilder 负责在状态更改时重新构建自身，并且每个 ImperativeProvider 作用域中的 id 必须唯一。

// 在 StatelessWidget 中

ImperativeBuilder<int>(
    id: 'count',
    initialData: 0,
    /* 构建器方法将在每次状态更改时被调用，
       并且仅更新作用域内的小部件 */
    builder: (context, state) {
        return Container(
            height: 48,
            width: 48,
            color: Colors.pink,
            child: Center(
                child: Text(
                    '$state',
                    style: TextStyle(color: Colors.white),
                  ),
            ),
        );
    },
),

// ...

class Whatever extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取 ImperativeProvider 的实例
    final provider = ImperativeProvider.of(context);

    return ElevatedButton.icon(
            onPressed: () {
                // 更新具有相同 id 的 ImperativeBuilder 的状态并重建
                provider.updateState<int>('count', (current) => current + 1);
            },
            icon: Icon(Icons.add),
            label: Text('加一'),
    ),
  }
}

完整示例

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:imperative_flutter/imperative_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ImperativeProvider(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const id = 'count';

  late final provider = ImperativeProvider.of(context);

  void _incrementCounter() {
    provider.updateState<int>(id, (current) => current * 2);
  }

  [@override](/user/override)
  void initState() {
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      provider.listenerState<int>(id, (current) {
        if (kDebugMode) {
          print(current);
        }
      });
    });

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经点击了按钮次数：',
            ),
            ImperativeBuilder<int>(
              id: id,
              initialData: 2,
              builder: (context, state) {
                return Text(
                  '$state',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}