Flutter响应式编程插件rx_notifier_generator的使用

Flutter响应式编程插件rx_notifier_generator的使用

rx_notifier_generator 是一个用于生成 RxNotifier Getter 和 Setter 的插件。通过使用注解 @store 和 @rx，可以简化代码并提高开发效率。

可选的代码生成器

如果你希望以更简洁的方式处理 RxNotifier 对象，可以使用代码生成器 build_runner。

步骤 1: 添加依赖

在项目的 pubspec.yaml 文件中添加 rx_notifier_generator 和 build_runner 到 dev_dependencies 中：

dependencies:
  rx_notifier: <current-version>

dev_dependencies:
  rx_notifier_generator: <current-version>
  build_runner: <current-version>

步骤 2: 使用注解

在类上使用 @RxStore 注解，并在属性上使用 @RxValue 注解。

part 'app_store.g.dart'; // 自动生成的文件

@RxStore()
abstract class _AppStore {
  @RxValue()
  int count = 0;

  @RxValue()
  String name = 'Barney';
}

步骤 3: 运行构建工具

运行以下命令以生成代码：

dart pub run build_runner --delete-conflicting-outputs

步骤 4: 使用生成的类

现在可以直接使用生成的类来操作 RxNotifier：

void main() {
  final appStore = AppStore(); // 使用生成的类

  rxObserver(() {
    print(appStore.count); // 监听 count 的变化
  });

  appStore.count++; // 更新 count
}

注意事项

  1. 类的约束
    被标注为 @RxStore 的类必须是抽象的且私有的（以 _ 开头）。代码生成器会创建一个公共实例，该实例透明地封装了 RxNotifier。

  2. 属性约束
    带有 @RxValue 注解的属性必须是可变的（mutable）并且是公开的。

完整示例代码

以下是一个完整的示例，展示如何使用 rx_notifier_generator 插件。

文件结构

example/
├── lib/
│   ├── example.dart
│   └── example.g.dart

示例代码 (lib/example.dart)

import 'package:flutter/foundation.dart';
import 'package:rx_notifier/rx_notifier.dart';

part 'example.g.dart'; // 自动生成的文件

@RxStore()
abstract class _AppStore {
  @RxValue()
  int count = 0;

  @RxValue()
  String? name;
}

// 监听逻辑
void main() {
  final appStore = AppStore(); // 使用生成的类

  // 监听 count 的变化
  rxObserver(() {
    print('Count: ${appStore.count}');
  });

  // 更新 count
  appStore.count++;
}

运行上述代码后，控制台将输出：

Count: 1

更多关于Flutter响应式编程插件rx_notifier_generator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter响应式编程插件rx_notifier_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


rx_notifier_generator 是一个用于 Flutter 的响应式编程插件，它基于 rx_notifier 库，并提供了代码生成功能，以减少样板代码并简化状态管理。rx_notifier 是一个轻量级的响应式状态管理库，结合 rx_notifier_generator，你可以更高效地管理应用的状态。

安装

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  rx_notifier: ^2.0.0

dev_dependencies:
  rx_notifier_generator: ^2.0.0
  build_runner: ^2.1.0

然后运行 flutter pub get 来安装依赖。

基本用法

1. 创建一个状态类

你可以使用 @RxNotifier 注解来标记一个类，并生成相应的响应式代码。例如：

import 'package:rx_notifier/rx_notifier.dart';
import 'package:rx_notifier_generator/rx_notifier_generator.dart';

part 'counter_notifier.g.dart';

@RxNotifier()
class CounterNotifier {
  final _counter = RxNotifier<int>(0);

  int get counter => _counter.value;

  void increment() {
    _counter.value++;
  }

  void decrement() {
    _counter.value--;
  }
}

2. 生成代码

运行以下命令来生成代码：

flutter pub run build_runner build

这将生成 counter_notifier.g.dart 文件，其中包含 CounterNotifier 类的响应式代码。

3. 在 UI 中使用

你可以在 Flutter 的 UI 中使用生成的 CounterNotifier 类。例如：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  final counterNotifier = CounterNotifier();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RxNotifier Example'),
      ),
      body: Center(
        child: RxBuilder(
          notifier: counterNotifier._counter,
          builder: (context, value) {
            return Text(
              'Counter: $value',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: counterNotifier.increment,
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: counterNotifier.decrement,
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}
回到顶部