Flutter中的ValueNotifier和ValueListenableBuilder

在这篇文章中，我们将深入探讨ValueNotifier及其相应的主题。

ValueNotifier简介

ValueNotifier是继承自ChangeNotifier的一个类。该类可以保存单个值，并每当其持有值更改时会通知正在监听它的Widget。ValueNotifier还是非常有用得，性能高效，因为它只重建使用ValueListenableBuilder监听它的Widget。

ValueNotifier使用

将ValueNotifier视为保留值的数据流。我们为它提供一个值，每个监听器都会收到值变化的通知。

我们可以创建任何类型的int、bool、list或任何自定义数据类型的ValueNotifier。您可以像这样创建一个ValueNotifier对象：

ValueNotifier<int> counter = ValueNotifier<int>(0);

我们可以像这样更新值：

counter.value = counter.value++;

//或者

counter.value++;

此外，我们可以像这样监听ValueNotifier：

counter.addListener((){

    print(counter.value);

});

删除值通知监听器

如果我们手动监听ValueNotifier，当前页面上不使用时，我们可以使用removeListener函数从ValueNotifier中手动删除侦听器。

ValueNotifier<int> valueNotifier = ValueNotifier(0);


void remove() {

  valueNotifier.removeListener(doTaskWhenNotified);

}


void add(){

  valueNotifier.addListener(doTaskWhenNotified);

}


void doTaskWhenNotified() {

  print(valueNotifier.value);

}

释放ValueNotifier

当不再使用时调用dispose方法是一个良好做法，否则可能会导致内存泄漏。ValueNotifier上的dispose方法将释放任何订阅的监听器。

@override

void dispose() {

    counter.dispose();

    super.dispose();

}

什么是ValueListenableBuilder？

Flutter中有许多类型的构建器，如StreamBuilder、AnimatedBuilder、FutureBuilder等，他们的名字表明他们是消费的对象类型。ValueListenableBuilder使用ValueNotifier对象，如果我们想在Widget中的监听某一个值，我们可以使用ValueListenableBuilder，每次我们收到值更新时，都会执行构建器方法。当我们路由到另一个页面时，ValueListenableBuilder会自动在内部删除监听。

const ValueListenableBuilder({

    required this.valueListenable,

    required this.builder,

    this.child,

})

这是ValueListenableBuilder的构造函数。在这里，valueListenable是要收听的ValueNotifier。构建器函数接收3个参数(BuildContext context, dynamic value, Widget child)，该value是从提供的valueNotifier收到的数据。可以使用子参数。如果子构建成本高，并且不依赖于通知符的值，我们将使用它进行优化。

使用Value Notifier的计数器应用程序

使用ValueNotifer和ValueListenableBuilder的计数器应用程序，这里没有使用setState，当值发生改变的时候，我们只重建文本部分。

import 'package:flutter/material.dart';


void main() {

  runApp(const App());

}


class App extends StatelessWidget {

  const App({Key? key}) : super(key: key);


  @override

  Widget build(BuildContext context) {

    return const MaterialApp(

      home: HomePage(),

    );

  }

}


class HomePage extends StatefulWidget {

  const HomePage({Key? key}) : super(key: key);


  @override

  State<HomePage> createState() => _HomePageState();

}


class _HomePageState extends State<HomePage> {

  final _counterNotifier = ValueNotifier<int>(0);


  @override

  Widget build(BuildContext context) {

    print('HOMEPAGE BUILT');

    return Scaffold(

      appBar: AppBar(title: const Text('Counter App')),

      body: Center(

        child: ValueListenableBuilder(

          valueListenable: _counterNotifier,

          builder: (context, value, _) {

            return Text('Count: $value');

          },

        ),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () {

          _counterNotifier.value++;

        },

        child: const Icon(Icons.add),

      ),

    );

  }


  @override

  void dispose() {

    _counterNotifier.dispose();

    super.dispose();

  }

}