Flutter多监听器管理插件multi_listenable的使用

Flutter多监听器管理插件multi_listenable的使用

multi_listenable 是一个用于同步小部件内容与多个 Listenable 的小部件。它允许你在多个可监听对象发生变化时更新UI。

使用

  1. 添加依赖：在项目中添加 multi_listenable 作为依赖项。你可以通过运行以下命令来添加：

    flutter pub add multi_listenable

  2. 导入库：在需要使用的文件中导入 multi_listenable 库。

    import 'package:multi_listenable/multi_listenable.dart';

  3. 使用 MultiListenableBuilder：在你的小部件树中使用 MultiListenableBuilder。

    MultiListenableBuilder(
  listenables: [/* 你想要监听的可监听对象列表 */],
  builder: (context) => Container(),
)

参数

  • listenable：一个包含 [Listenable] 的可迭代对象。当这些可监听对象中的任何一个通知更改时，构建函数会被调用。

  • builder：每当传递给 [listenable] 的 [Listener] 通知更改时，都会调用此函数。

示例代码

下面是一个完整的示例代码，展示了如何使用 MultiListenableBuilder 来同步颜色滑块的值，并实时更新背景颜色。

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

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

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

  // 定义四个可监听对象，分别表示透明度、红色、绿色和蓝色通道
  final alpha = ValueNotifier(255.0);
  final red = ValueNotifier(255.0);
  final green = ValueNotifier(0.0);
  final blue = ValueNotifier(0.0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MultiListenableBuilder',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("MultiListenableBuilder demo"),
        ),
        body: Padding(
            padding: EdgeInsets.all(32),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded(
                  child: MultiListenableBuilder(
                    listenables: [alpha, red, green, blue],
                    builder: (context) => Container(
                      color: Color.fromARGB(
                        alpha.value.round(),
                        red.value.round(),
                        green.value.round(),
                        blue.value.round(),
                      ),
                    ),
                  ),
                ),
                _ColorSlider("A", alpha),
                _ColorSlider("R", red),
                _ColorSlider("G", green),
                _ColorSlider("B", blue),
              ],
            )),
      ),
    );
  }
}

// 自定义颜色滑块小部件
class _ColorSlider extends StatelessWidget {
  _ColorSlider(this.name, this.color);

  final String name;
  final ValueNotifier<double> color;

  [@override](/user/override)
  Widget build(BuildContext context) => Row(
        children: [
          SizedBox(width: 10, child: Text(name)),
          Expanded(
            child: ValueListenableBuilder(
              valueListenable: color,
              builder: (context, value, child) => Slider(
                value: color.value,
                min: 0,
                max: 255,
                onChanged: (value) => color.value = value,
              ),
            ),
          ),
        ],
      );
}

更多关于Flutter多监听器管理插件multi_listenable的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多监听器管理插件multi_listenable的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


multi_listenable 是一个 Flutter 插件，用于管理多个 Listenable 对象（如 ChangeNotifier、ValueNotifier 等）的监听。它可以帮助你简化多个监听器的管理，避免手动添加和移除监听器的复杂性。

安装

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

dependencies:
  flutter:
    sdk: flutter
  multi_listenable: ^1.0.0  # 请根据最新版本号进行替换

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

使用 MultiListenable

MultiListenable 允许你将多个 Listenable 对象组合在一起，并监听它们的变化。当任何一个 Listenable 发生变化时，都会触发回调。

基本用法

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

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ValueNotifier<int> counter1 = ValueNotifier(0);
  final ValueNotifier<int> counter2 = ValueNotifier(0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MultiListenable Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MultiListenable(
              listenables: [counter1, counter2],
              builder: (context) {
                return Text('Counter 1: ${counter1.value}, Counter 2: ${counter2.value}');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                counter1.value++;
              },
              child: Text('Increment Counter 1'),
            ),
            ElevatedButton(
              onPressed: () {
                counter2.value++;
              },
              child: Text('Increment Counter 2'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部