Flutter高效数据通知插件advanced_value_notifier的使用

Flutter高效数据通知插件advanced_value_notifier的使用

特性

  • 根据某些条件构建特定的UI部分（使用buildWhen）
  • 根据某些条件监听特定值（使用listenWhen）
  • 在通知器中转换值
  • 通过使用先前可用的值和当前值优化UI中的数据显示。

使用方法

AdvancedValueListenableListener

AdvancedValueListenableListener 用于监听值变化，并在满足特定条件时调用回调函数。

AdvancedValueListenableListener<int>(
  valueListenable: valueNotifier,
  listener: (value) {
    print("Advanced Value listener $value");
  },
  listenWhen: (int value) {
    if (value.isEven) {
      return true;
    }
    return false;
  },
  child: const Text("Advanced Value Listenable"),
),

AdvancedValueListenableBuilder

AdvancedValueListenableBuilder 用于根据特定条件重新构建UI。

AdvancedValueListenableBuilder(
  valueListenable: valueNotifier,
  buildWhen: (int value) {
    if (value.isEven) {
      return true;
    }
    return false;
  },
  builder: (BuildContext context, int value, Widget? child) {
    return Text("$value");
  },
),

HistoryValueListenableListener

HistoryValueListenableListener 用于监听历史值变化并显示通知。

HistoryValueListenableListener<int>(
  historyValueListenable: counter,
  historyValueListener: (int? prevValue, int value) {
    ScaffoldMessenger.of(context).showMaterialBanner(MaterialBanner(
        content: Text("Simple Prev $prevValue Curr $value"),
        actions: [
          GestureDetector(
            child: const Text("Cancel"),
            onTap: () {
              ScaffoldMessenger.of(context).clearMaterialBanners();
            },
          )
        ]));
  },
  child: const Text(
    'Simple Listener',
  ),
)

HistoryValueListenableBuilder

HistoryValueListenableBuilder 用于根据历史值和当前值构建UI。

HistoryValueListenableBuilder<int>(
  historyValueListenable: counter,
  historyValueBuilder: (BuildContext context, int? prevValue,
      int value, Widget? child) {
    return Text(
      "Prev $prevValue Curr $value",
    );
  },
)

TransformerHistoryValueListenableBuilder

TransformerHistoryValueListenableBuilder 用于基于转换后的值构建UI。

TransformerHistoryValueListenableBuilder<int, int>(
  transformerHistoryValueListenable: transformerHistoryValueNotifier,
  transformerHistoryValueBuilder: (BuildContext context,
      int? prevValue,
      int? prevTransformedValue,
      int value,
      int transformedValue,
      Widget? child) {
    return Text(
      "Prev $prevValue PrevTransformed $prevTransformedValue Curr $value Transformed $transformedValue",
    );
  },
)

TransformerHistoryValueListenableListener

TransformerHistoryValueListenableListener 用于监听历史值变化并显示通知。

TransformerHistoryValueListenableListener<int, int>(
  transformerHistoryValueListenable: transformerHistoryValueNotifier,
  transformerHistoryValueListener: (
    int? prevValue,
    int? prevTransformedValue,
    int value,
    int transformedValue,
  ) {
    ScaffoldMessenger.of(context).clearSnackBars();
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text(
      "Prev $prevValue PrevTransformed $prevTransformedValue "
      "Curr $value Transformed $transformedValue",
    )));
  },
  child: const Text(
    "Transformer Listener",
  ),
)

完整示例代码

以下是一个完整的示例代码，展示了如何使用 advanced_value_notifier 插件来处理数据通知和UI更新。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(title: 'History Value Notifier'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key, required this.title});

  final String title;

  final HistoryValueNotifier<int> counter = HistoryValueNotifier(0);
  final TransformerHistoryValueNotifier<int, int>
      transformerHistoryValueNotifier =
      TransformerHistoryValueNotifier<int, int>(
    value: 0,
    transformer: (value) {
      return value % 2;
    },
  );
  final ValueNotifier<int> valueNotifier = ValueNotifier<int>(0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            AdvancedValueListenableListener<int>(
              valueListenable: valueNotifier,
              listener: (value) {
                print("Advanced Value listener $value");
              },
              listenWhen: (int value) {
                if (value.isEven) {
                  return true;
                }
                return false;
              },
              child: const Text("Advanced Value Listenable"),
            ),
            AdvancedValueListenableBuilder(
              valueListenable: valueNotifier,
              buildWhen: (int value) {
                if (value.isEven) {
                  return true;
                }
                return false;
              },
              builder: (BuildContext context, int value, Widget? child) {
                return Text("$value");
              },
            ),
            HistoryValueListenableListener<int>(
              historyValueListenable: counter,
              historyValueListener: (int? prevValue, int value) {
                ScaffoldMessenger.of(context).clearMaterialBanners();
                ScaffoldMessenger.of(context).showMaterialBanner(MaterialBanner(
                    content: Text("Simple Prev $prevValue Curr $value"),
                    actions: [
                      GestureDetector(
                        child: const Text("Cancel"),
                        onTap: () {
                          ScaffoldMessenger.of(context).clearMaterialBanners();
                        },
                      )
                    ]));
              },
              child: const Text(
                'Simple Listener',
              ),
            ),
            HistoryValueListenableBuilder<int>(
              historyValueListenable: counter,
              historyValueBuilder: (BuildContext context, int? prevValue,
                  int value, Widget? child) {
                return Text(
                  "Prev $prevValue Curr $value",
                );
              },
            ),
            TransformerHistoryValueListenableBuilder<int, int>(
              transformerHistoryValueListenable:
                  transformerHistoryValueNotifier,
              transformerHistoryValueBuilder: (BuildContext context,
                  int? prevValue,
                  int? prevTransformedValue,
                  int value,
                  int transformedValue,
                  Widget? child) {
                return Text(
                  "Prev $prevValue PrevTransformed $prevTransformedValue Curr $value Transformed $transformedValue",
                );
              },
            ),
            TransformerHistoryValueListenableListener<int, int>(
              transformerHistoryValueListenable:
                  transformerHistoryValueNotifier,
              transformerHistoryValueListener: (
                int? prevValue,
                int? prevTransformedValue,
                int value,
                int transformedValue,
              ) {
                ScaffoldMessenger.of(context).clearSnackBars();
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                    content: Text(
                  "Prev $prevValue PrevTransformed $prevTransformedValue "
                  "Curr $value Transformed $transformedValue",
                )));
              },
              child: const Text(
                "Transformer Listener",
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
          transformerHistoryValueNotifier.value++;
          valueNotifier.value++;
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

1 回复

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


advanced_value_notifier 是一个用于 Flutter 的状态管理插件，它扩展了 Flutter 自带的 ValueNotifier，提供了更高效和灵活的数据通知机制。通过使用 advanced_value_notifier，你可以更容易地管理和监听应用中的状态变化。

主要特点

  1. 高效的数据通知：AdvancedValueNotifier 只在值真正发生变化时才会通知监听器，避免不必要的重建。
  2. 链式调用：支持链式调用，方便进行多个操作。
  3. 扩展功能：提供了一些额外的功能，如 map、where 等，方便对数据进行操作。

安装

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

dependencies:
  advanced_value_notifier: ^1.0.0

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

基本用法

1. 创建一个 AdvancedValueNotifier

import 'package:advanced_value_notifier/advanced_value_notifier.dart';

final counterNotifier = AdvancedValueNotifier<int>(0);

2. 监听值的变化

你可以使用 addListener 来监听值的变化：

counterNotifier.addListener(() {
  print('Counter changed: ${counterNotifier.value}');
});

3. 更新值

你可以通过 value 属性来更新值：

counterNotifier.value = 1;

4. 在 Flutter 中应用

在 Flutter 中，你可以使用 ValueListenableBuilder 来监听 AdvancedValueNotifier 并自动重建 UI：

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: ValueListenableBuilder<int>(
          valueListenable: counterNotifier,
          builder: (context, value, child) {
            return Text('Counter: $value');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterNotifier.value++;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

高级用法

1. 使用 map 和 where

AdvancedValueNotifier 提供了 map 和 where 方法，方便对值进行转换和过滤：

final squaredNotifier = counterNotifier.map((value) => value * value);

final evenNotifier = counterNotifier.where((value) => value % 2 == 0);

你可以像使用普通的 AdvancedValueNotifier 一样使用这些转换后的 Notifier。

2. 链式调用

AdvancedValueNotifier 支持链式调用，方便进行多个操作：

counterNotifier
  ..increment()
  ..value = 10
  ..decrement();
回到顶部