flutter自定義InheritedProvider實(shí)現(xiàn)狀態(tài)管理詳解

更新時(shí)間：2022年11月14日 16:53:19 作者：李小轟_Rex

這篇文章主要為大家介紹了flutter自定義InheritedProvider實(shí)現(xiàn)狀態(tài)管理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

InheritedWidget簡單數(shù)據(jù)驅(qū)動(dòng)模型

基于InheritedWidget，實(shí)現(xiàn)簡單的數(shù)據(jù)驅(qū)動(dòng)模型，模型結(jié)構(gòu)如下：

1. 數(shù)據(jù)存儲(chǔ)

使用 InheritedWidget，新建 InheritedProvider

import 'package:flutter/material.dart';
class InheritedProvider<T> extends InheritedWidget {
  final T data;
  InheritedProvider({@required this.data, Widget child}) : super(child: child);
  @override
  bool updateShouldNotify(InheritedProvider<T> oldWidget) {
    //在此簡單返回true，則每次更新都會(huì)調(diào)用依賴其的子孫節(jié)點(diǎn)的 didChangeDependencies
    return true;
  }
}

2. 變更通知

使用flutter自帶的 ChangeNotifier 組件，封裝工具類 ChangeNotifierProvider 用于響應(yīng)數(shù)據(jù)變更，觸發(fā)UI更新。

class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget {
  final Widget child;
  final T data; //共享的數(shù)據(jù)模型，要求繼承ChangeNotifier
  const ChangeNotifierProvider({
    Key key,
    this.child,
    this.data,
  }) : super(key: key);
  ///提供方法，子樹獲取共享數(shù)據(jù)
  static T of<T>(BuildContext context) {
    final provider =
        context.dependOnInheritedWidgetOfExactType<InheritedProvider<T>>();
    return provider.data;
  }
  @override
  _ChangeNotifierProviderState createState() =>
      _ChangeNotifierProviderState<T>();
}
class _ChangeNotifierProviderState<T extends ChangeNotifier>
    extends State<ChangeNotifierProvider<T>> {
  ///如果數(shù)據(jù)發(fā)生變化（model類調(diào)用 notifyListeners）,重新構(gòu)建InheritedProvider
  void update() {
    setState(() => {});
  }
  @override
  void didUpdateWidget(ChangeNotifierProvider<T> oldWidget) {
    ///當(dāng)Provider更新時(shí)，如果新舊數(shù)據(jù)不"=="，則解綁舊數(shù)據(jù)監(jiān)聽，同時(shí)添加新數(shù)據(jù)監(jiān)聽
    if (widget.data != oldWidget.data) {
      oldWidget.data.removeListener(update);
      widget.data.addListener(update);
    }
    super.didUpdateWidget(oldWidget);
  }
  @override
  void initState() {
    widget.data.addListener(update);
    super.initState();
  }
  @override
  void dispose() {
    widget.data.removeListener(update);
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return InheritedProvider<T>(
      data: widget.data,
      child: widget.child,
    );
  }
}

原理：使用InheritedWidget作為父節(jié)點(diǎn)，當(dāng)數(shù)據(jù)源更新時(shí)，數(shù)據(jù)模型經(jīng)過ChangeNotifier的關(guān)聯(lián)，觸發(fā) _ChangeNotifierProviderState 的 setState方法，刷新UI。

封裝 NotifyConsumer 直接顯式調(diào)用 ChangeNotifierProvider.of 獲取共享數(shù)據(jù)語義不明確，我們將其做一層簡單的封裝用于子節(jié)點(diǎn)獲取數(shù)據(jù)：

///響應(yīng)數(shù)據(jù)變化的消費(fèi)者
class NotifyConsumer<T> extends StatelessWidget {
  final Widget Function(BuildContext context, T value) builder;
  const NotifyConsumer({Key key, @required this.builder}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return builder(
      context,
      ChangeNotifierProvider.of<T>(context),
    );
  }
}

3. 使用方法

創(chuàng)建一個(gè)共享數(shù)據(jù)模型：

///共享數(shù)據(jù)模型
class CountModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  //提供自增方法
  void increase() {
    _count++;
    // 通知監(jiān)聽器（訂閱者），重新構(gòu)建InheritedProvider， 更新狀態(tài)。
    notifyListeners();
  }
}

ChangeNotifierProvider 的使用方式：

import 'package:flutter/material.dart';
import 'package:test_interited/provider/change_notifier_provider.dart';
import 'package:test_interited/provider/notify_consumer.dart';
import 'package:test_interited/provider/test/count_model.dart';
class TestNotifierWidget extends StatefulWidget {
  const TestNotifierWidget({Key key}) : super(key: key);
  @override
  _TestNotifierWidgetState createState() => _TestNotifierWidgetState();
}
class _TestNotifierWidgetState extends State<TestNotifierWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: ChangeNotifierProvider<CountModel>(
            data: CountModel(),
            child: Builder(builder: (context) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Builder(
                    builder: (context) {
                      //獲取共享數(shù)據(jù)源
                      return NotifyConsumer<CountModel>(
                          builder: (context, value) {
                        return Text(value.count.toString());
                      });
                    },
                  ),
                  Builder(builder: (context) {
                    return RaisedButton(
                      child: Text('自增'),
                      onPressed: () {
                        //獲取共享model，進(jìn)行數(shù)據(jù)自增操作
                        ChangeNotifierProvider.of<CountModel>(context).increase();
                      },
                    );
                  }),
                ],
              );
            })));
  }
}

以上就是flutter自定義InheritedProvider實(shí)現(xiàn)狀態(tài)管理詳解的詳細(xì)內(nèi)容，更多關(guān)于flutter自定義InheritedProvider的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: