Flutter输入验证插件acceptable的使用

acceptable 是一个用于 Flutter 的包，它提供了 AcceptableStatefulWidget，可以将 Provider 包中的 Provider 和 StatefulWidget 结合起来。本文将展示如何使用 acceptable 插件来实现一个简单的计数器应用。

特性

• 监视由 Provider 提供的状态对象的变化。
• 当监视的对象发生变化时，可以通过回调将其转换为用于 UI 的状态。

开始使用

由于此包完全依赖于 provider 包，因此你必须首先导入最新版本的 provider。

你需要通过 Provider 或其他相关类向后代提供任意状态对象。

然后，构建一个使用 AcceptableStatefulWidget 的 StatefulWidget，而不是直接使用 StatefulWidget，该 StatefulWidget 使用由这些对象提供的数据来表示任意 UI。

AcceptableStatefulWidget 可以接受该状态对象并检测其变化，并调用 apply 函数将其转换为用于 UI 的状态。

使用示例

假设我们要实现一个计数器应用，其中计数器的值由 CounterState 管理，该 CounterState 扩展了 ValueNotifier。我们可以实现一个 MultipleCounter，该 MultipleCounter 构建一个 Text 组件来显示计数器值的两倍。

class MultipleCounter extends AcceptableStatefulWidget {
  const MultipleCounter({Key? key}) : super(key: key);

  [@override](/user/override)
  _MultipleCounterState createState() => _MultipleCounterState();
}

class _MultipleCounterState extends AcceptableStatefulWidgetState<MultipleCounter> {

  [@override](/user/override)
  void acceptProviders(Accept accept) {
    accept<CounterState, int>(
      watch: (state) => state.value,  // 监视 state.value 的变化
      apply: (value) => _value = value * 2,  // 将 value 值加倍并赋给 _value
      perform: (value) {
        // 在重建完成后执行的操作，例如 showDialog
      }
    );
  }

  late int _value;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text('$_value');  // 显示 _value 的值
  }
}

关键方法

watch

watch 方法返回要监视的对象。在上面的例子中，MultipleCounter 监视 state.value 的变化，其中 state 是 CounterState 的实例。

此方法类似于 provider 包中的 context.select<Value, T>() 方法。

apply

apply 方法表示如何将提供的数据（通过调用 watch 决定）应用于 UI 的状态。

在上面的例子中，value 被加倍并分配给 _value 字段，然后在 build 方法中使用。

因为 apply 在观察的值发生变化时在 build 调用之前被调用，所以你不需要在 build 方法中转换提供的值。

perform

perform 方法在重建完成后被调用。在这里可以调用一些命令式的方法，如 showDialog、Navigator.push 等。

动机

通过使用 AcceptableStatefulWidget，你不必：

• 创建代表特定 UI 的状态对象（通常称为 ViewModel）。

你可以：

• 在 State 类中管理 UI 的状态，这完全遵循 Flutter 的基本理念。
• 集中精力通过 Provider 提供数据，而不必考虑它们在每个 UI 中的具体使用方式。

完整示例代码

以下是完整的示例代码，展示了如何使用 acceptable 插件来实现一个计数器应用。

import 'package:example/append_unit_counter.dart';
import 'package:example/multiple_counter.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class CounterState extends ValueNotifier<int> {
  CounterState(int value) : super(value);

  void add() => value += 1;
  void clear() => value = 0;
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChangeNotifierProvider(
        child: MyHomePage(title: 'Flutter Demo Home Page'),
        create: (context) => CounterState(0),
      ),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            const SizedBox(height: 32),
            Row(
              children: [
                const Expanded(child: MultipleCounter()),
                const Expanded(child: AppendUnitCounter()),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: context.read<CounterState>().add,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}