Flutter艺术图形绘制插件solidart的使用

Flutter艺术图形绘制插件solidart的使用

插件简介

solidart 是一个受 SolidJS 启发的状态管理库，旨在简化Flutter应用中的状态管理。它通过四个核心概念：Signals（信号）、Effects（副作用）、Computed（计算属性）和 Resources（资源），来提供一种简单且高效的状态管理方案。

核心概念

Signals（信号）

Signals是solidart中反应式编程的基础。它们包含可以随时间变化的值，当您更改信号的值时，所有依赖于它的部分都会自动更新。

创建Signal:

final counter = Signal(0);

获取当前值:

print(counter.value); // 或者 print(counter());

设置新值:

counter.value++;
counter.value = 2;
counter.set(2);
counter.updateValue((value) => value * 2);

Effects（副作用）

Effect用于监听Signal的变化并执行相应的操作。每当被监听的Signal发生变化时，Effect就会重新运行。

创建Effect:

final disposeFn = Effect((_) {
  print("The count is now ${counter.value}");
});

Computed（计算属性）

Computed是一种依赖其他Signal的特殊类型Signal。当其依赖的任何Signal发生改变时，Computed也会自动更新。

创建Computed:

final name = Signal('John');
final lastName = Signal('Doe');
final fullName = Computed(() => '${name.value} ${lastName.value}');
print(fullName()); // 输出 "John Doe"

// 更新name
name.set('Jane');
print(fullName()); // 输出 "Jane Doe"

Resources（资源）

Resource专门用于处理异步加载的数据。它可以基于Signal提供的查询条件调用fetcher函数（返回Future）来获取数据。

创建Resource:

final userId = Signal(1);

Future<String> fetchUser() async {
  final response = await http.get(Uri.parse('https://swapi.dev/api/people/${userId.value}/'));
  return response.body;
}

final user = Resource(fetcher: fetchUser, source: userId);

使用ResourceBuilder响应Resource状态:

ResourceBuilder(
  resource: user,
  builder: (_, userState) {
    return userState.on(
      ready: (data) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ListTile(
              title: Text(data),
              subtitle: Text('refreshing: ${userState.isRefreshing}'),
            ),
            userState.isRefreshing
                ? const CircularProgressIndicator()
                : ElevatedButton(
                    onPressed: user.refresh,
                    child: const Text('Refresh'),
                  ),
          ],
        );
      },
      error: (e, _) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(e.toString()),
            userState.isRefreshing
                ? const CircularProgressIndicator()
                : ElevatedButton(
                    onPressed: user.refresh,
                    child: const Text('Refresh'),
                  ),
          ],
        );
      },
      loading: () {
        return const RepaintBoundary(
          child: CircularProgressIndicator(),
        );
      },
    );
  },
)

示例代码

以下是一个简单的示例，展示了如何结合使用Signal、Computed和Effect：

import 'package:solidart/solidart.dart';

void main() {
  // 创建一个计数器Signal
  final count = Signal(0);
  
  // 创建一个计算属性，始终等于count的两倍
  final doubleCount = Computed(() => count() * 2);

  // 创建一个Effect，在每次count变化时打印当前值及其双倍值
  Effect((_) {
    print('The counter is now: ${count()}');
    print('The double counter is now: ${doubleCount()}');
  });

  // 修改count的值
  count.set(1);
  count.set(2);
}

此代码段首先定义了一个初始值为0的计数器count，然后创建了一个计算属性doubleCount，该属性总是等于count的两倍。接着定义了一个Effect，当count或doubleCount发生变化时会触发打印语句。最后，通过两次调用set方法修改了count的值，从而触发了Effect的执行。

结论

solidart为Flutter开发者提供了一套轻量级且易于上手的状态管理工具。通过理解上述四个核心概念，您可以更轻松地构建出响应迅速的应用程序，并且能够更好地组织和管理应用程序内的状态逻辑。如果您希望深入了解，请参考官方文档获取更多信息。