Flutter通知构建插件notifier_builder的使用

Flutter通知构建插件notifier_builder的使用

一个Flutter库，它提供了比AnimatedBuilder更灵活的方式来构建依赖于任何可监听的通知器或控制器的小部件。

引言

NotifierBuilder 类是一个Flutter小部件，使你可以构建依赖于任何可监听的通知器或控制器的小部件。NotifierBuilder 类通过创建一个 notifier 并在 State 中持有它来工作。这是与 <a href="https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html">AnimatedBuilder</a> 的关键区别。无论小部件重建多少次，控制器都只有一个实例。这意味着你可以在 StatelessWidget 中安全地使用带有 notifier 的控制器。你不需要像 Provider 这样的特殊库来为你持有控制器。

构建函数随后被调用，该函数基于通知器的状态构建小部件树。NotifierBuilder 设计用于与任何可监听的通知器一起工作，包括 ValueNotifier、ChangeNotifier 和 StreamController。

安装

要在你的Flutter项目中使用 NotifierBuilder 类，将以下依赖项添加到你的 pubspec.yaml 文件中：

dependencies:
  notifier_builder: #VERSION

然后，在终端中运行 flutter pub get。

使用

要使用 NotifierBuilder 类，创建一个新实例并传入通知器和构建函数。下面是一个示例：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: NotifierBuilder<ValueNotifier<int>>(
          notifier: () => ValueNotifier<int>(0),
          builder: (context, child, notifier) => Scaffold(
            body: Center(
              child: Text(
                notifier.value.toString(),
                style: const TextStyle(fontSize: 24),
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () => notifier.value++,
              child: const Icon(Icons.add),
            ),
          ),
        ),
      );
}

在这个示例中，我们使用 ValueNotifier 作为通知器创建了一个新的 NotifierBuilder 实例。我们还传递了一个构建函数，该函数构建了一个 Scaffold 小部件，其中包含一个 Text 小部件，用于显示 ValueNotifier 的当前值，以及一个 FloatingActionButton，当按下时会增加 ValueNotifier 的值。

除了处理实例化之外，构建函数还向小部件树公开了通知器。这在你需要从子小部件访问通知器时非常有用。例如，你可以使用通知器来访问子小部件中的当前值。

结论

使用此库代替 AnimatedBuilder。该小部件不会多次实例化你的控制器，并且你可以通过 builder 函数访问控制器。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      );
}

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

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) => NotifierBuilder(
        notifier: () => ValueNotifier<int>(0),
        builder: (context, child, counterNotifier) => Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${counterNotifier.value}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => counterNotifier.value++,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ),
      );
}