1.添加Provider依賴

dependencies:provider: ^4.0.4flutter:sdk: flutter

最新版本https://pub.dev/packages/provider

2.創建ProviderModel

class FirstProviderModel extends ChangeNotifier{int _count = 0;int get count => _count;void add() {_count++;print('$_count');notifyListeners();} }

這是一個計數案例，_count屬于私有化只能通過count調用、add是增加數值方法。

3.使用前需要注冊ProviderModel
（1）單頁面使用注冊

///用來配置頁面中的Provider ///僅當前頁面使用 class FirstProviderStateless extends StatelessWidget{@overrideWidget build(BuildContext context) {return MultiProvider(providers: [ChangeNotifierProvider(create: (_)=>FirstProviderModel()),],child: FirstProvider(),);} }

（2）多頁面使用注冊（在main.dart中）

///MultiProvider配置在main里面才可以在頁面之間通用 ///配置在單個頁面當中 數據不會刷新 main() {runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (_)=>FirstProviderModel())],child: MyApp(),)); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(home: FirstProvider(),);} }

兩者區別：
單頁面使用僅僅只是為了局部刷新使用。
多頁面使用注冊是為了多個頁面改變值使用（例如A和B兩個頁面，a頁面負責展示值 b頁面既展示又要去修改這個值，這時在b頁面修改值之后也會通知a頁面的值進行改變）

4.注冊完成之后如何局部刷新
想要達到局部刷新效果需要將要刷新的控件放在Consumer當中代碼展示如下

class FirstProvider extends StatefulWidget{@overrideState<StatefulWidget> createState() {return FirstProviderState();} }class FirstProviderState extends State<FirstProvider>{///刷新次數記錄var _refreshTime = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('FirstProvider')),body: getColumn(),floatingActionButton: FloatingActionButton(onPressed: (){//這句是為了修改model當中的值 當前直接進行修改值。Provider.of<FirstProviderModel>(context,listen: false).add();//這句是為了跳轉下一個頁面 完善兩個頁面共用一個值的需求。//Navigator.push(context, MaterialPageRoute(builder: (context) => SecondProvider()));},child: Icon(Icons.navigate_next),),);}getColumn(){_refreshTime ++;return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,mainAxisSize: MainAxisSize.max,children: [///包裹在Consumer中 才可以局部刷新這塊Consumer<FirstProviderModel>(builder: (context, counter, child) => Text('同步second頁面值:${counter.count}',),),///為了證明這里沒刷新 刷新的話數值增加Container(alignment: Alignment.topCenter,child: Text('記錄當前頁面刷新次數:${_refreshTime}'),)],);}

如上代碼可以看出就需要局部刷新控件是放在Consumer當中，_refreshTime是為了標記在局部刷新時沒有刷新其他控件。
counter相當于是最開始創建的ProviderModel。

floatingActionButton跳轉的是可點擊增加計數的頁面SecondProvider

class SecondProvider extends StatefulWidget{@overrideState<StatefulWidget> createState() {return SecondProviderState();} }class SecondProviderState extends State<SecondProvider>{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('SecondProvider')),body: Center(child: Text('同步First頁面值：${Provider.of<FirstProviderModel>(context).count}'),),floatingActionButton: FloatingActionButton(onPressed: (){Provider.of<FirstProviderModel>(context,listen: false).add();},child: Icon(Icons.add),),);}}

通過Provider.of<FirstProviderModel>(context,listen: false).add();對model當中的數值進行修改。

完成代碼
main.dart頁面

///MultiProvider配置在main里面才可以在頁面之間通用 ///配置在單個頁面當中 數據不會刷新 main() {runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (_)=>FirstProviderModel())],child: MyApp(),)); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(home: FirstProvider(),);} }

FirstProvider

///用來配置頁面中的Provider ///僅當前頁面使用 class FirstProviderStateless extends StatelessWidget{@overrideWidget build(BuildContext context) {return MultiProvider(providers: [ChangeNotifierProvider(create: (_)=>FirstProviderModel()),],child: FirstProvider(),);} }class FirstProvider extends StatefulWidget{@overrideState<StatefulWidget> createState() {return FirstProviderState();} }class FirstProviderState extends State<FirstProvider>{///刷新次數記錄var _refreshTime = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('FirstProvider')),body: getColumn(),floatingActionButton: FloatingActionButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => SecondProvider()));},child: Icon(Icons.navigate_next),),);}getColumn(){_refreshTime ++;return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,mainAxisSize: MainAxisSize.max,children: [///包裹在Consumer中 才可以局部刷新這塊Consumer<FirstProviderModel>(builder: (context, counter, child) => Text('同步second頁面值:${counter.count}',),),///為了證明這里沒刷新 刷新的話數值增加Container(alignment: Alignment.topCenter,child: Text('記錄當前頁面刷新次數:${_refreshTime}'),)],);}}

SecondProvider

///用來配置頁面中的Provider ///僅當前頁面使用 class SecondStateless extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MultiProvider(providers: [ChangeNotifierProvider(create: (_) => FirstProviderModel()),],child: SecondProvider(),);}} class SecondProvider extends StatefulWidget{@overrideState<StatefulWidget> createState() {return SecondProviderState();} }class SecondProviderState extends State<SecondProvider>{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('SecondProvider')),body: Center(child: Text('同步First頁面值：${Provider.of<FirstProviderModel>(context).count}'),),floatingActionButton: FloatingActionButton(onPressed: (){Provider.of<FirstProviderModel>(context,listen: false).add();},child: Icon(Icons.add),),);}}

以上就是本文全部內容，如有錯誤還請大家多多指正。

總結

以上是生活随笔為你收集整理的Flutter Provider局部刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。