Flutter多监听器构建插件multi_listenable_builder的使用

Flutter多监听器构建插件multi_listenable_builder的使用

什么是multi_listenable_builder?

multi_listenable_builder 是一个可以保持与一个或多个监听器同步的小部件生成器。在Flutter开发中，我们经常使用ChangeNotifier来进行状态管理，并可能使用ListenableBuilder来确保小部件与模型保持同步。然而，当需要监听多个Listenable时，这可能会变得混乱。

示例

假设你有一个ChangeNotifier模型如下：

class CounterModel extends ChangeNotifier {
  int _count = 0;

  void increment() {
    _count++;
    notifyListeners(); // 通知所有监听者
  }

  int get count => _count;
}

然后在你的小部件的构建方法中使用MultiListenableBuilder：

MultiListenableBuilder(
  // 提供`ChangeNotifier`模型的实例，无论你是从构建上下文中获取还是其他方式
  notifiers: [_counterModel],
  // 当`ChangeNotifier`模型更新时，将执行此构建函数
  builder: (BuildContext context, _) {
    return Text(
      '${_counterModel.count}',
      style: Theme.of(context).textTheme.headlineMedium,
    );
  },
)

完整示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用multi_listenable_builder插件。

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

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

// 定义一个ChangeNotifier模型
class CounterModel extends ChangeNotifier {
  int _count = 0;

  void increment() {
    _count++; // 增加计数
    notifyListeners(); // 通知所有监听者
  }

  int get count => _count; // 获取当前计数值
}

// 应用根组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

// 主页面组件
class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  // 创建模型实例
  final CounterModel _counterModel = CounterModel();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的主页'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按下了按钮这么多次:',
            ),
            MultiListenableBuilder(
              // 提供`ChangeNotifier`模型的实例
              notifiers: [_counterModel],
              // 当`ChangeNotifier`模型更新时，将执行此构建函数
              builder: (BuildContext context, _) {
                return Text(
                  '${_counterModel.count}', // 显示当前计数值
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counterModel.increment, // 按钮点击事件
        tooltip: '增加',
        child: const Icon(Icons.add), // 图标
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用multi_listenable_builder插件的示例代码。这个插件允许你同时监听多个ValueNotifier或ChangeNotifier对象，并在它们变化时重建UI。

首先，确保你已经在pubspec.yaml文件中添加了multi_listenable_builder依赖：

dependencies:
  flutter:
    sdk: flutter
  multi_listenable_builder: ^x.y.z  # 请替换为最新版本号

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

以下是一个完整的示例代码，展示了如何使用multi_listenable_builder来监听多个ValueNotifier对象并更新UI：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MultiListenableBuilderExample(),
    );
  }
}

class MultiListenableBuilderExample extends StatefulWidget {
  @override
  _MultiListenableBuilderExampleState createState() => _MultiListenableBuilderExampleState();
}

class _MultiListenableBuilderExampleState extends State<MultiListenableBuilderExample> {
  final ValueNotifier<String> notifier1 = ValueNotifier('Initial Value 1');
  final ValueNotifier<String> notifier2 = ValueNotifier('Initial Value 2');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MultiListenableBuilder Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                notifier1.value = 'New Value 1';
              },
              child: Text('Change Notifier 1'),
            ),
            ElevatedButton(
              onPressed: () {
                notifier2.value = 'New Value 2';
              },
              child: Text('Change Notifier 2'),
            ),
            SizedBox(height: 20),
            MultiListenableBuilder(
              listenables: [notifier1, notifier2],
              builder: (context, listenables, _) {
                final value1 = listenables[0] as ValueNotifier<String>;
                final value2 = listenables[1] as ValueNotifier<String>;

                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Notifier 1: ${value1.value}'),
                    Text('Notifier 2: ${value2.value}'),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了两个ValueNotifier对象notifier1和notifier2，并在UI中提供了两个按钮来更改它们的值。MultiListenableBuilder被用来同时监听这两个ValueNotifier对象，并在它们变化时更新UI。

MultiListenableBuilder的listenables参数接受一个Listenable对象的列表，builder参数是一个函数，它接收当前的上下文、监听器列表和一个_（表示不需要的依赖变化回调），并返回一个Widget。在builder函数中，我们可以访问每个监听器的当前值，并据此构建UI。

这样，当任何一个ValueNotifier的值变化时，MultiListenableBuilder都会重建其内部的Widget，从而更新UI。

回到顶部