Flutter数据表格展示插件reactable的使用

Flutter数据表格展示插件reactable的使用

描述

reactable 是一个用于Flutter的响应式状态管理库，它能够在reactable对象的值发生变化时自动更新UI。它易于使用、轻量级、快速且经过充分测试。它主要由两部分组成：

• Reactable：值持有者，该值可以是任何类型。
• Scope：每当此范围内的reactable发生变化时，应该更新的代码片段。

在简单的方式中，每次reactable在构建方法中更新时，scope也会更新。

Reactable

要创建一个reactable，有两种方式：

var counter = 0.asReactable;
// 或者
var counter = Reactable(0);

你可以为列表或映射（目前仅支持这些类型）创建reactable：

final map = <String, int>{}.asReactable;
// 或者
var list = ReactableList([0,1,2]);

这将在添加或删除项目时更新列表/映射。注意：当更新列表/映射中的项目时，reactable不会自动更新，你应该调用refresh()。

Scope

这个小部件将为其中的每个reactable添加监听器（并且会在scope被移除/释放时移除监听器）。这意味着，当reactable发生变化时，这个小部件会自动收到通知。你还可以传递一个条件给这个scope，以仅在结果为真时才进行更新。

例如，下面的代码只在计数值为偶数时更新：

Scope(
    where: () => counter.value % 2 == 0,
    builder: (_) => Text(
        '$counter',
        style: Theme.of(context).textTheme.headline4,
    ),
)

更多功能

• Reactable.read：如果你想读取reactable而不注册一个监听器到scope中。
• Reactable.write：如果你想更改reactable的值而不通知监听器。
• Reactable.canBeAutoDisposed：如果设置为false，则没有任何scope可以在启用Scope.autoDispose时释放此reactable。
• Reactable.listenTo：此方法接受一个reactable列表和一个VoidCallBack，并为所有给定的reactable注册这个VoidCallBack。同时，当reactable不再被使用时，也注册了VoidCallBack以被移除。
• Scope.where：设置一个条件来决定何时应更新此scope。
• Scope.debug：如果你想查看更多关于scope内部发生的信息，可以将其设置为true。或者通过reactableContext.debugReactable为所有scopes设置为true。
• Scope.throwOnError：默认情况下，如果没有reactable在scope内，scope将抛出错误。你可以通过throwOnError参数改变这种行为。或者通过reactableContext.reactableThrowOnError为所有scopes设置为false。
• Scope.autoDispose：如果此值为true，在从屏幕移除小部件后，并且没有其他scopes正在使用此reactable时，scope中的reactable将被释放。默认值为true，可以通过reactableContext.autoDispose为所有scopes设置为false。注意：如果reactable被释放，则不能再使用。

示例Demo

下面是一个完整的示例demo，展示了如何使用reactable和scope：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reactable Demo',
      home: MyHomePage(),
    );
  }
}

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

  final counter = 0.asReactable;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Reactable Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Counter value is:',
            ),
            // 显示计数器值
            Scope(
              builder: (_) => Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
            const Text('Update counter only when the number is even'),
            // 只有当数字是偶数时才更新计数器
            Scope(
              where: () => counter.value % 2 == 0,
              debug: true,
              builder: (_) => Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () => counter.value++,
                    child: const Text('Increment'),
                  ),
                  TextButton(
                    onPressed: () => counter.value--,
                    child: const Text('Decrement'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以上代码创建了一个简单的Flutter应用程序，使用reactable和scope来管理计数器的状态，并根据特定条件更新UI。希望这能帮助您理解如何在Flutter项目中使用reactable插件！