Flutter值监听扩展插件value_listenable_extensions的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter值监听扩展插件value_listenable_extensions的使用

本包包含一组有用的ValueListenable扩展方法以及新的抽象，用于构建具有ValueListenable接口的类。

扩展方法

connect

类似于addListener，但通过返回取消订阅的回调来处理内联函数，从而减轻调用者使用命名函数（之后将用于removeListener）的负担。

从语义上讲，它与addListener（和listen）不同之处在于它会立即使用ValueListenable的当前value调用回调。

final source = ValueListenable(1);

final cancel = source.connect((v) => print(v));
// 打印 1

source.value = 2;
// 打印 2

cancel();

map

创建一个新的ValueListenable，其值由给定函数映射自源ValueListenable。

调用map的方需要拥有新创建的ValueListenable的所有权，并应在以后dispose它。

final source = ValueNotifier('hello');

final mapped = source.map((v) => v.length);
// mapped.value == 5

source.value = '';
// mapped.value == 0

mapped.dispose();

listen

类似于addListener的一个变种，它返回一个取消订阅的回调，因此对内联函数非常有用。

像addListener一样，它会在每次后续更改时被调用（但不包括初始值）。

final source = ValueListenable(1);

final cancel = source.listen((v) => print(v));
// 打印无内容

source.value = 2;
// 打印 2

cancel();

combineLatest*

combineLatest*函数提供了类似map的功能，可以与多个ValueListenable输入一起使用（2到20个）。

返回的输出ValueListenable将在任何输入更改时更新（并且计算出的新值与之前的值不同，就像通常的ValueNotifier比较一样）。

final a = ValueNotifier(0);
final b = ValueNotifier(0);

final maxValue = combineLatest(a, b, (a, b) => max(a, b));
// maxValue.value == 0

a.value = 5;
// maxValue.value == 5

b.value = 3;
// maxValue.value 仍然是 5，内部重新计算了但未通知外部更改

b.value = 9;
// maxValue.value == 9

maxValue.dispose();

CombinedValueListenable

combineLatest*的类版本很有用，可用于构建由小而独立的部分组成的或依赖于外部输入的状态对象，除了它们的内部状态之外。

从头开始重建输出状态有许多好处：与在先前状态下使用copyWith不同，不会忘记更新依赖字段，并且可以将映射/组合逻辑隔离测试（如果它是自由函数或静态方法（建议这样做以避免无意中依赖其他实例状态））。

class _GreetingState extends CombinedValueListenable<String> {
  _GreetingState() {
    // 在构造函数主体中必须调用一次 `connect*` 方法
    connect2(_firstName, _lastName, map);
  }

  final _firstName = ValueNotifier('');
  final _lastName = ValueNotifier('');

  set firstName(String value) => _firstName.value = value;

  set lastName(String value) => _lastName.value = value;

  static String map(String firstName, String lastName) {
    return [
      'Hello',
      if (firstName != '') firstName,
      if (lastName != '') lastName,
    ].join(' ');
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用value_listenable_extensions插件的一个代码示例。这个插件提供了一种简洁的方式来监听和响应ValueListenable对象的变化，通常用于与Flutter的Provider模式或其他状态管理方案结合使用。

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

dependencies:
  flutter:
    sdk: flutter
  value_listenable_extensions: ^1.0.0  # 请检查最新版本号

然后，运行flutter pub get来获取依赖。

接下来，是一个简单的例子，展示如何使用ValueListenableBuilder来监听一个ValueListenable对象的变化。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:value_listenable_extensions/value_listenable_extensions.dart';

// 定义一个简单的ValueListenable对象
class Counter with ValueNotifier<int> {
  Counter(int value) : super(value);

  void increment() {
    value++;
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter(0)),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ValueListenable Extensions Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('ValueListenable Extensions Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ValueListenableBuilder<int>(
              valueListenable: counter,
              builder: (_, value, __) {
                return Text(
                  'You have pushed the button this many times:',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
              child: Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                counter.increment();
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. Counter 类：这是一个继承自ValueNotifier<int>的类，用于存储和更新计数器值。
  2. MultiProvider：使用MultiProvider和ChangeNotifierProvider来提供Counter实例。
  3. ValueListenableBuilder：使用ValueListenableBuilder来监听Counter对象的值变化。当Counter的值变化时，ValueListenableBuilder会重新构建其子组件（在这个例子中是显示计数器值的Text组件）。
  4. ElevatedButton：一个简单的按钮，用于增加计数器的值。

在这个例子中，ValueListenableBuilder监听Counter对象的值变化，并在值变化时更新显示的文本。这种方式简化了ValueListenable对象的状态管理，使代码更加简洁和易于维护。

回到顶部