Flutter控制功能插件 control 的使用

control 是一个用于 Flutter 应用的状态管理插件，提供了简洁且强大的状态管理机制。本文将介绍如何安装和使用这个插件，并提供一个完整的示例 demo。

安装

首先，在你的 pubspec.yaml 文件中添加 control 依赖：

dependencies:
  control: <version>

请确保替换 <version> 为最新的版本号，可以从 Pub.dev 获取最新版本信息。

示例代码

下面是一个完整的示例，展示了如何使用 control 插件来实现一个简单的计数器应用。

主函数

import 'dart:async';
import 'package:control/control.dart';
import 'package:flutter/material.dart';
import 'package:l/l.dart';

void main() => runZonedGuarded<Future<void>>(
      () async {
        // 设置控制器观察者
        Controller.observer = const ControllerObserver();
        runApp(const App());
      },
      (error, stackTrace) => l.e('Top level exception: $error', stackTrace),
    );

控制器定义

/// Counter state for [CounterController]
typedef CounterState = ({int count, bool idle});

/// Counter controller
final class CounterController extends StateController<CounterState>
    with SequentialControllerHandler {
  CounterController({CounterState? initialState})
      : super(initialState: initialState ?? (idle: true, count: 0));

  void add(int value) => handle(() async {
        setState((idle: false, count: state.count));
        await Future<void>.delayed(const Duration(milliseconds: 1500));
        setState((idle: true, count: state.count + value));
      });

  void subtract(int value) => handle(() async {
        setState((idle: false, count: state.count));
        await Future<void>.delayed(const Duration(milliseconds: 1500));
        setState((idle: true, count: state.count - value));
      });
}

应用入口

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

  @override
  Widget build(BuildContext context) => MaterialApp(
      title: 'StateController example',
      theme: ThemeData.dark(),
      home: const CounterScreen(),
      builder: (context, child) =>
          // 创建并注入控制器到元素树中。
          ControllerScope<CounterController>(
            CounterController.new,
            child: child,
          ));
}

计数器界面

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

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Counter'),
        ),
        floatingActionButton: const CounterScreen$Buttons(),
        body: const SafeArea(
          child: Center(
            child: CounterScreen$Text(),
          ),
        ),
      );
}

class CounterScreen$Text extends StatelessWidget {
  const CounterScreen$Text({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final style = theme.textTheme.headlineMedium;
    return Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Count: ',
          style: style,
        ),
        SizedBox.square(
          dimension: 64,
          child: Center(
            // 从元素树中接收 CounterController 并在状态变化时重建小部件。
            child: StateConsumer<CounterController, CounterState>(
              buildWhen: (previous, current) =>
                  previous.count != current.count ||
                  previous.idle != current.idle,
              builder: (context, state, _) {
                final text = state.count.toString();
                return AnimatedSwitcher(
                  duration: const Duration(milliseconds: 500),
                  transitionBuilder: (child, animation) => ScaleTransition(
                    scale: animation,
                    child: FadeTransition(
                      opacity: animation,
                      child: child,
                    ),
                  ),
                  child: state.idle
                      ? Text(text, style: style, overflow: TextOverflow.fade)
                      : const CircularProgressIndicator(),
                );
              },
            ),
          ),
        ),
      ],
    );
  }
}

class CounterScreen$Buttons extends StatelessWidget {
  const CounterScreen$Buttons({
    super.key,
  });

  @override
  Widget build(BuildContext context) => ValueListenableBuilder<bool>(
        // 将 [StateController] 转换为 [ValueListenable]
        valueListenable: context
            .controllerOf<CounterController>()
            .select((state) => state.idle),
        builder: (context, idle, _) => IgnorePointer(
          ignoring: !idle,
          child: AnimatedOpacity(
            duration: const Duration(milliseconds: 350),
            opacity: idle ? 1 : .25,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                FloatingActionButton(
                  key: ValueKey('add#${idle ? 'enabled' : 'disabled'}'),
                  onPressed: idle
                      ? () => context.controllerOf<CounterController>().add(1)
                      : null,
                  child: const Icon(Icons.add),
                ),
                const SizedBox(height: 8),
                FloatingActionButton(
                  key: ValueKey('subtract#${idle ? 'enabled' : 'disabled'}'),
                  onPressed: idle
                      ? () =>
                          context.controllerOf<CounterController>().subtract(1)
                      : null,
                  child: const Icon(Icons.remove),
                ),
              ],
            ),
          ),
        ),
      );
}

以上代码展示了一个完整的计数器应用，使用了 control 插件进行状态管理。你可以根据需要修改或扩展这个示例。希望这个示例对你有所帮助！