Flutter通知管理插件notifiable的使用

Notifiable 是一个简单的可通知小部件，它允许更新特定的小部件而无需更新整个小部件树。

Notifiable 使用

final _model = TitleAndSubtitle();
final _titleChangeNotifier = Notifier();

Notifiable(
  notifier: _titleChangeNotifier,
  builder: (context) => Text(
    _model.title,
    style: const TextStyle(fontSize: 20),
  ),
),
TextButton(
  child: Container(
    width: double.infinity,
    height: 30,
    color: Colors.blue,
    child: const Center(
      child: Text(
        "TAP TO CHANGE THE TITLE",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
  onPressed: () {
    _model.title = "This is the new title";
    _titleChangeNotifier.notify();
  },
)

class TitleAndSubtitle {
  var title = "Title";
  var subtitle = "Subtitle";
}

在这个例子中，我们创建了一个 Notifiable 小部件来监听 _titleChangeNotifier。当点击按钮时，_model.title 的值被更改，并通过 _titleChangeNotifier.notify() 方法通知所有依赖它的 Notifiable 小部件重新构建。

Item Notifiable 使用

final _titleChangeNotifier = ItemNotifier<String>(defaultValue: "Default title");
final _subTitleChangeNotifier = ItemNotifier<String?>(defaultValue: null);

ItemNotifiable<String>(
  notifier: _titleChangeNotifier,
  builder: (context, title) => Text(
    title,
    style: const TextStyle(fontSize: 20),
  ),
),
TextButton(
  child: Container(
    width: double.infinity,
    height: 30,
    color: Colors.blue,
    child: const Center(
      child: Text(
        "TAP TO CHANGE THE TITLE",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
  onPressed: () {
    _titleChangeNotifier.notify("This is the new title");
  },
),
const SizedBox(height: 60),
ItemNotifiable<String?>(
  notifier: _subTitleChangeNotifier,
  builder: (context, subTitle) => Text(
    subTitle ?? "The subtitle is null",
    style: const TextStyle(fontSize: 20),
  ),
),
TextButton(
  child: Container(
    width: double.infinity,
    height: 30,
    color: Colors.green,
    child: const Center(
      child: Text(
        "TAP TO CHANGE THE SUBTITLE",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
  onPressed: () {
    _subTitleChangeNotifier.notify("This is the new subtitle");
  },
),

在这个例子中，我们使用了 ItemNotifier 和 ItemNotifiable 来管理特定类型的数据。点击按钮时，_titleChangeNotifier 和 _subTitleChangeNotifier 会分别通知相关的 ItemNotifiable 小部件更新其内容。

完整示例 Demo

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Notifiable Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ItemNotifiableExample(),
    );
  }
}

class ItemNotifiableExample extends StatelessWidget {
  final _model = TitleAndSubtitle();
  final _titleChangeNotifier = Notifier();
  final _subtitleChangeNotifier = Notifier();

  ItemNotifiableExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const SizedBox(height: 60),
          Notifiable(
            notifier: _titleChangeNotifier,
            builder: (context) => Text(
              _model.title,
              style: const TextStyle(fontSize: 20),
            ),
          ),
          TextButton(
            child: Container(
              width: double.infinity,
              height: 30,
              color: Colors.blue,
              child: const Center(
                child: Text(
                  "TAP TO CHANGE THE TITLE",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            onPressed: () {
              _model.title = "This is the new title";
              _titleChangeNotifier.notify();
            },
          ),
          const SizedBox(height: 60),
          Notifiable(
            notifier: _subtitleChangeNotifier,
            builder: (context) => Text(
              _model.subtitle,
              style: const TextStyle(fontSize: 20),
            ),
          ),
          TextButton(
            child: Container(
              width: double.infinity,
              height: 30,
              color: Colors.green,
              child: const Center(
                child: Text(
                  "TAP TO CHANGE THE SUBTITLE",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            onPressed: () {
              _model.subtitle = "This is the new subtitle";
              _subtitleChangeNotifier.notify();
            },
          )
        ],
      ),
    );
  }
}

class TitleAndSubtitle {
  var title = "Title";
  var subtitle = "Subtitle";
}