Flutter可迭代对象通知插件notifiable_iterables的使用

Flutter可迭代对象通知插件notifiable_iterables的使用

Notifiable Iterables CI/CD language: dart sdk: flutter license: BSD

提供了实现了ChangeNotifier类的可迭代对象。

pub.dev: https://pub.dev/packages/notifiable_iterables

GitHub: https://github.com/Cynnexis/notifiable_iterables

API文档: https://cynnexis.github.io/notifiable_iterables/

🔌 开始使用

⚒ 安装

建议通过pub安装此包。

要将此包添加到你的项目中，请打开pubspec.yaml文件，查看此部分。

运行示例

example/目录包含一个使用notifiable_iterables的Android Studio项目。要运行它，请使用Android Studio打开该项目并启动名为example的配置。

描述Android Studio中配置"example"的按钮

如果没有Android Studio，可以在example项目目录中打开终端，并执行以下命令：

# 获取依赖项
pub get

# 检查是否已连接设备
flutter devices

# 运行示例
flutter run

🎯 使用

完整的文档可在这里找到。

要使用此库，你需要在Dart文件中导入它：

import 'package:notifiable_iterables/notifiable_iterables.dart';

然后，你可以使用以下类：

  1. NotifiableList<E>：一个可通知的列表。它具有与List<E>相同的函数。
  2. NotifiableSet<E>：一个可通知的集合。它具有与Set<E>相同的函数。
  3. NotifiableMap<K, V>：一个可通知的地图。它具有与Map<K, V>相同的函数。

这些类可以像它们对应的可迭代对象一样使用。

示例

// 创建一个可通知的列表
NotifiableList<int> list = NotifiableList<int>.of(<int>[0, 1, 2, 3]);
print(list[2].toString()); // 打印 "2"

// 添加监听器
list.addListener(() => print("New list: $list"));

// 更改列表
list[3] = 4; // 通知监听器，控制台将显示更新后的列表

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

1 回复

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


notifiable_iterables 是一个 Flutter 插件，用于使可迭代对象（如 List、Set 等）具有通知监听器的能力。当可迭代对象发生变化时（例如添加、删除或修改元素），它可以通知监听器进行相应的更新。这对于实现响应式 UI 非常有用，尤其是当你需要动态更新 UI 时。

安装

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

dependencies:
  notifiable_iterables: ^1.0.0

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

基本用法

1. 创建一个可通知的列表

你可以使用 NotifiableList 来创建一个可通知的列表。当列表发生变化时，监听器会被通知。

import 'package:notifiable_iterables/notifiable_iterables.dart';

void main() {
  // 创建一个可通知的列表
  var list = NotifiableList<int>();

  // 添加监听器
  list.addListener(() {
    print('List changed: $list');
  });

  // 添加元素
  list.add(1);
  list.add(2);

  // 删除元素
  list.remove(1);
}

输出：

List changed: [1]
List changed: [1, 2]
List changed: [2]

2. 使用 NotifiableSet

类似地，你可以使用 NotifiableSet 来创建一个可通知的集合。

import 'package:notifiable_iterables/notifiable_iterables.dart';

void main() {
  // 创建一个可通知的集合
  var set = NotifiableSet<int>();

  // 添加监听器
  set.addListener(() {
    print('Set changed: $set');
  });

  // 添加元素
  set.add(1);
  set.add(2);

  // 删除元素
  set.remove(1);
}

输出：

Set changed: {1}
Set changed: {1, 2}
Set changed: {2}

3. 在 Flutter 中使用

你可以在 Flutter 的 StatefulWidget 中使用 NotifiableList 或 NotifiableSet 来动态更新 UI。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Notifiable Iterables Example')),
        body: MyHomePage(),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final list = NotifiableList<int>();

  [@override](/user/override)
  void initState() {
    super.initState();
    list.addListener(_onListChanged);
  }

  void _onListChanged() {
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            list.add(list.length + 1);
          },
          child: Text('Add Item'),
        ),
        Expanded(
          child: ListView.builder(
            itemCount: list.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item ${list[index]}'),
              );
            },
          ),
        ),
      ],
    );
  }

  [@override](/user/override)
  void dispose() {
    list.removeListener(_onListChanged);
    super.dispose();
  }
}
回到顶部