Flutter迷你视图展示插件rocket_mini_view的使用

RocketMiniView 是由 rocket_listenable 包提供的一个组件，它监听 RocketListenable 对象的变化并在变化发生时重新构建。它通常与 RocketValue 对象一起使用，以在 Flutter 中构建响应式用户界面。

使用方法

要使用 RocketMiniView，你需要将其导入到你的 Dart 文件中：

import 'package:flutter/material.dart';
import 'package:rocket_listenable/rocket_listenable.dart';
import 'package:your_app/constants.dart';

import 'rocket_mini_view.dart';

final RocketValue value = [].mini;
...
RocketMiniView(
  value: value,
  builder: () {
    return Text(value.length.toString());
  },
)

RocketMiniView 组件有两个必需的参数：

• value: 需要监听的 RocketListenable 对象。
• builder: 一个返回需要重新构建的 widget 树的函数。

builder 函数应该返回需要在 RocketListenable 对象发生变化时重新构建的 widget 树。

API 参考

RocketMiniView 构造器

RocketMiniView({
  Key? key,
  required this.value,
  required this.builder,
})

参数说明：

• key: 一个可选的 Key 对象，用于 widget。
• value: 需要监听的 RocketListenable 对象。
• builder: 一个返回 widget 树的函数。

MiniViewRocketState 类

MiniViewRocketState 是 RocketMiniView widget 的状态对象。

initState 方法

void initState()

当 widget 第一次插入到 widget 树时调用。

didUpdateWidget 方法

void didUpdateWidget(RocketMiniView oldWidget)

当 widget 用新参数更新时调用。

dispose 方法

void dispose()

当 widget 从 widget 树中移除时调用。

_rebuildWidget 方法

void _rebuildWidget()

当 RocketListenable 对象发生变化时调用。

build 方法

Widget build(BuildContext context)

使用 builder 函数构建 widget 树。

完整示例

以下是一个完整的示例代码，展示了如何使用 RocketMiniView。

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

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

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

  // 这个 widget 是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: RocketMiniViewExample(),
    );
  }
}

class RocketMiniViewExample extends StatelessWidget {
  final RocketValue _value = 0.mini;
  final RocketValue _mergedValue = 100.mini;

  RocketMiniViewExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rocket MiniView Example'),
      ),
      body: Center(
        child: RocketMiniView(
          value: RocketValue.merge([_value, _mergedValue]),
          builder: () {
            return Text(
              'value : ${_value.v} - merged value : ${_mergedValue.v}',
              style: const TextStyle(fontSize: 20),
            );
          },
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          FloatingActionButton(
            onPressed: () {
              _value.v = _value.v + 1;
            },
            child: const Icon(Icons.add),
          ),
          FloatingActionButton(
            onPressed: () {
              _mergedValue.v = _mergedValue.v + 1;
            },
            child: const Icon(Icons.merge),
          ),
        ],
      ),
    );
  }
}