Flutter状态监听与通知插件state_beacon的使用

概述

state_beacon 是一个用于 Dart 和 Flutter 的反应式原语（signal）和简单的状态管理解决方案。它基于 Milo Mighdoll 创建的节点着色技术，该技术在 SolidJS 和 reactively 中被广泛使用。

安装

要安装 state_beacon 插件，请在项目的终端中运行以下命令：

dart pub add state_beacon

使用示例

基本使用

下面是一个基本的例子，展示了如何使用 Beacon.writable 来创建一个可写的状态，并在 Flutter 小部件中监听它的变化。

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 改变时重建小部件
    return Text(name.watch(context));
  }
}

异步函数的使用

您可以使用 Beacon.future 来处理异步操作的结果，并在小部件中显示结果。

final counter = Beacon.writable(0);

// 当 counter 改变时重新计算 futureCounter
final futureCounter = Beacon.future(() async {
  final count = counter.value;
  return await Future.delayed(Duration(seconds: count), () => '$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(),
    };
  }
}

Linting (可选)

为了确保代码质量，可以添加 state_beacon_lint 包来启用特定于包的规则。

dart pub add custom_lint state_beacon_lint --dev

然后在 analysis_options.yaml 文件中启用 custom_lint 插件：

analyzer:
    plugins:
        - custom_lint

完整的示例 Demo

下面是一个完整的 Flutter 应用程序示例，演示了如何使用 state_beacon 来管理计数器的状态，并在界面上显示计数器的值。

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

class Controller extends BeaconController {
  late final count = B.writable(0);

  void increment() => count.value++;
  void decrement() => count.value--;
}

final countControllerRef = Ref.scoped((ctx) => Controller());

void main() {
  runApp(LiteRefScope(child: const MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Lite Ref and State Beacon Counter'),
          centerTitle: true,
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: const Center(child: CounterText()),
        floatingActionButton: const Buttons(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final count = countControllerRef.select(context, (c) => c.count);
    final theme = Theme.of(context);
    return Text('$count', style: theme.textTheme.displayLarge);
  }
}

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

  @override
  Widget build(BuildContext context) {
    final controller = countControllerRef.of(context);
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        IconButton.filled(
          onPressed: controller.increment,
          icon: const Icon(Icons.add),
          iconSize: 32,
        ),
        const SizedBox(height: 8),
        IconButton.filled(
          onPressed: controller.decrement,
          icon: const Icon(Icons.remove),
          iconSize: 32,
        ),
      ],
    );
  }
}

这个示例展示了如何使用 state_beacon 来管理状态，并通过 lite_ref 进行依赖注入。应用程序包含一个计数器，用户可以通过点击按钮来增加或减少计数器的值，并在界面上实时显示更新后的值。

希望这些信息能帮助您理解和使用 state_beacon 插件。如果您有任何问题或需要进一步的帮助，请随时提问！