Flutter列表通知插件notifying_list的使用

Flutter列表通知插件notifying_list的使用

notifying_list 是一个 Dart 包，提供了可以通知其被修改时的列表实现。

特性

  • 基于回调的可通知列表 (CallbackNotifyingList)
  • 基于流的可通知列表 (StreamNotifyingList)

开始使用

首先，导入 notifying_list 库：

import 'package:notifying_list/notifying_list.dart';

使用方法

以下是一个简单的示例，展示了如何使用 CallbackNotifyingList 和 StreamNotifyingList。

基于回调的可通知列表
// 创建一个基于回调的可通知列表，并定义一个回调函数
final callbackList = CallbackNotifyingList<num>(() => print('Modified!'));

// 添加元素到列表，会触发回调函数
callbackList.add(0); // 输出: Modified!
基于流的可通知列表
// 创建一个基于流的可通知列表
final streamList = StreamNotifyingList();

// 订阅流，当列表被修改时，会打印当前列表
streamList.stream.forEach(
  (currentList) => print('Modified! Current list: $currentList'),
);

// 添加元素到列表，会触发流中的事件
streamList.add(0); // 输出: Modified! Current list: [0]

完整示例代码

// 忽略避免打印的警告
// ignore_for_file: avoid_print

import 'package:notifying_list/notifying_list.dart';

void main() {
  // 创建一个基于回调的可通知列表
  final callbackList = CallbackNotifyingList<num>(() => print('Modified!'));
  
  // 添加元素到列表
  callbackList.add(0); // 输出: Modified!

  // 创建一个基于流的可通知列表
  final streamList = StreamNotifyingList();
  
  // 订阅流，当列表被修改时，会打印当前列表
  streamList.stream.forEach(
    (currentList) => print('Modified! Current list: $currentList'),
  );

  // 添加元素到列表
  streamList.add(0); // 输出: Modified! Current list: [0]
}

更多关于Flutter列表通知插件notifying_list的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter列表通知插件notifying_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


notifying_list 是一个 Flutter 插件，用于在列表数据发生变化时通知 UI 进行更新。它类似于 ValueNotifier 或 ChangeNotifier，但专门用于列表数据。通过使用 notifying_list，你可以轻松地在列表中添加、删除或更新项，并自动通知 UI 进行重建。

安装

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

dependencies:
  flutter:
    sdk: flutter
  notifying_list: ^1.0.0  # 请使用最新的版本号

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

基本用法

  1. 创建 NotifyingList

    import 'package:notifying_list/notifying_list.dart';

final myList = NotifyingList<int>([1, 2, 3]);

  2. 监听列表变化

    你可以使用 addListener 方法来监听列表的变化：

    myList.addListener(() {
  print('List updated: $myList');
});

  3. 更新列表

    你可以像操作普通列表一样操作 NotifyingList，但不同的是，任何修改都会自动通知监听器：

    myList.add(4); // 添加元素
myList.remove(2); // 删除元素
myList[0] = 10; // 更新元素

  4. 在 Flutter 中使用

    在 Flutter 中，你可以使用 ValueListenableBuilder 或 AnimatedBuilder 来监听 NotifyingList 的变化并更新 UI：

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

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

class MyApp extends StatelessWidget {
  final myList = NotifyingList<int>([1, 2, 3]);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Notifying List Example')),
        body: Column(
          children: [
            Expanded(
              child: ValueListenableBuilder(
                valueListenable: myList,
                builder: (context, list, child) {
                  return ListView.builder(
                    itemCount: list.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Item ${list[index]}'),
                      );
                    },
                  );
                },
              ),
            ),
            ElevatedButton(
              onPressed: () {
                myList.add(myList.length + 1);
              },
              child: Text('Add Item'),
            ),
          ],
        ),
      ),
    );
  }
}

高级用法

  1. 批量操作

    你可以使用 batch 方法来执行一系列操作，并在最后一次性通知监听器：

    myList.batch(() {
  myList.add(4);
  myList.remove(2);
  myList[0] = 10;
});

  2. 自定义比较器

    你可以通过传递一个自定义的比较器来优化列表的更新逻辑：

    final myList = NotifyingList<int>([1, 2, 3], equality: (a, b) => a == b);
回到顶部