Flutter未知功能探索插件reactr的使用

Flutter未知功能探索插件reactr的使用

Reactr简介

Reactr 是一个用于Flutter应用程序的状态管理库。它提供了一种简单而高效的方式来使用控制器和绑定来管理应用程序的状态。

安装

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  reactr: ^0.1.0

然后，运行 flutter pub get 来安装该包。

使用

创建控制器

通过扩展 ReactrController 来创建一个控制器：

import 'package:reactr/reactr.dart';

class CounterController extends ReactrController {
  var count = Rc<int>(0); // 初始化计数器为0

  [@override](/user/override)
  void onInit() {
    super.onInit();
    // 初始化代码
  }

  void increment() {
    count.value++; // 增加计数器值
  }

  [@override](/user/override)
  void onClose() {
    super.onClose();
    // 清理资源
  }
}

创建视图

通过扩展 ReactrView 并使用控制器来创建一个视图：

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

class CounterView extends ReactrView<CounterController> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')), // 设置应用栏标题
      body: Center(
        child: React<int>(
          notifier: controller.count.notifier, // 监听计数器的变化
          builder: (context, count) {
            return Text('Count: $count'); // 显示当前计数器值
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment, // 按钮点击时增加计数器值
        child: Icon(Icons.add),
      ),
    );
  }
}

注册控制器

使用 putSingleton 或 putLazySingleton 注册控制器：

void main() {
  Reactr.putSingleton(CounterController()); // 注册控制器
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterView(), // 设置主页面为计数器视图
    );
  }
}

导航

使用 Reactr.to 或 Reactr.toNamed 进行导航：

Reactr.to<CounterController>(
  context: context,
  binding: CounterBinding(),
  builder: () => CounterView(),
);

示例

以下是一个完整的示例，演示如何使用 Reactr 设置一个简单的计数器应用程序进行状态管理：

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

void main() {
  Reactr.putSingleton(CounterController()); // 注册控制器
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterView(), // 设置主页面为计数器视图
    );
  }
}

class CounterController extends ReactrController {
  var count = Rc<int>(0); // 初始化计数器为0

  [@override](/user/override)
  void onInit() {
    super.onInit();
    // 初始化代码
  }

  void increment() {
    count.value++; // 增加计数器值
  }

  [@override](/user/override)
  void onClose() {
    super.onClose();
    // 清理资源
  }
}

class CounterView extends ReactrView<CounterController> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')), // 设置应用栏标题
      body: Center(
        child: React<int>(
          notifier: controller.count.notifier, // 监听计数器的变化
          builder: (context, count) {
            return Text('Count: $count'); // 显示当前计数器值
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment, // 按钮点击时增加计数器值
        child: Icon(Icons.add),
      ),
    );
  }
}