Flutter状态标识管理插件state_beacon_core的使用

概述

state_beacon_core 是一个用于Dart和Flutter的状态管理解决方案，基于信号（signal）实现。它利用了Milo Mighdoll创建的节点着色技术，并在SolidJS和reactively等框架中广泛应用。

安装

通过以下命令安装 state_beacon 插件：

dart pub add state_beacon

使用方法

基本用法

可写信标 (Writable Beacon)

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

final name = Beacon.writable("Bob");

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

  @override
  Widget build(BuildContext context) {
    // 当name变化时重建Widget
    return Text(name.watch(context));
  }
}

使用异步函数

final counter = Beacon.writable(0);

// 当counter变化时重新计算futureCounter
final futureCounter = Beacon.future(() async {
  final count = counter.value;
  return await fetchData(count);
});

Future<String> fetchData(int count) async {
  await Future.delayed(Duration(seconds: count));
  return '$count second has passed.';
}

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

  @override
  Widget build(BuildContext context) {
    return switch (futureCounter.watch(context)) {
      AsyncData<String>(value: final v) => Text(v),
      AsyncError(error: final e) => Text('$e'),
      _ => const CircularProgressIndicator(),
    };
  }
}

示例代码

下面是一个完整的示例，展示了如何使用 state_beacon_core 来管理状态和响应状态变化：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final name = Beacon.writable('Bob');
  final age = Beacon.writable(20);
  final college = Beacon.writable('MIT');

  @override
  void initState() {
    super.initState();

    Beacon.effect(() {
      var msg = '${name.value} is ${age.value} years old';

      if (age.value > 21) {
        msg += ' and can go to ${college.value}';
      }
      print(msg);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('State Beacon Core Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onChanged: (value) {
                name.value = value;
              },
              decoration: InputDecoration(labelText: 'Name'),
            ),
            TextField(
              onChanged: (value) {
                age.value = int.parse(value);
              },
              decoration: InputDecoration(labelText: 'Age'),
            ),
            TextField(
              onChanged: (value) {
                college.value = value;
              },
              decoration: InputDecoration(labelText: 'College'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们定义了三个可写信标：name、age 和 college，并在 _MyHomePageState 的 initState 方法中添加了一个效应 (effect)，当这些信标的值发生变化时，会触发打印输出相应的消息。

其他功能

异步信标 (Future Beacon)

final futureCounter = Beacon.future(() async {
  final count = counter.value;
  await Future.delayed(Duration(seconds: count));
  return '$count second has passed.';
});

流信标 (Stream Beacon)

var myStream = Stream.periodic(Duration(seconds: 1), (i) => i);
var myBeacon = Beacon.stream(() => myStream);

myBeacon.subscribe((value) {
  print(value); // Outputs AsyncLoading(),AsyncData(0),AsyncData(1),AsyncData(2),...
});

缓冲信标 (Buffered Beacon)

var countBeacon = Beacon.bufferedCount<int>(3);

countBeacon.subscribe((values) {
  print(values);
});

countBeacon.add(1);
countBeacon.add(2);
countBeacon.add(3); // Triggers update and prints [1, 2, 3]

调试与日志记录

可以通过设置全局的 BeaconObserver 实例来监听所有信标的创建、更新和销毁事件：

BeaconObserver.instance = LoggingObserver(); // 或者 BeaconObserver.useLogging()

var a = Beacon.writable(10, name: 'a');
var b = Beacon.writable(20, name: 'b');
var c = Beacon.derived(() => a() * b(), name: 'c');

Beacon.effect(
  () {
    print('c: ${c.value}');
  },
  name: 'printEffect',
);