Flutter? 狀態(tài)管理分為兩類
1.無狀態(tài):StatelessWidget? 意味著他們屬性不可變
2.有狀態(tài):? StatefulWidget? ? ?持有的狀態(tài)可能在Widget生命周期中發(fā)生改變
當(dāng)我們項目簡單的時候可能并不需要狀態(tài)管理柱查,但是隨著功能的增加间唉,應(yīng)用程序?qū)⒂袔资畟€甚至幾百個應(yīng)用狀態(tài)衫仑,當(dāng)我們想在多個頁面(組件/Widget)之間共享狀態(tài)(數(shù)據(jù))垃它,或者一個頁面(組件/Widget)中的多個子組件之間共享狀態(tài)(數(shù)據(jù))笆凌,應(yīng)用狀態(tài)就會變的很難維護嘴纺,F(xiàn)lutter 實際一開始就為我們提供了一種狀態(tài)管理方式冗荸,那就是StatefulWidget覆致,但是很快發(fā)現(xiàn)他就是造成了上述問題的根源,因此使用Provider 進行管理狀態(tài)钉迷。
作用:
頂層的widget,用來存儲數(shù)據(jù)至非,并不操作數(shù)據(jù),存儲的數(shù)據(jù)對象 必須extends ChangeNotifier糠聪;
最終效果:
當(dāng)在SecondPage中點擊增加值后荒椭,返回到FirstPage中的值也會跟隨變化
Provider是flutter 中的狀態(tài)管理 開源庫,使用方法
1.在pubspec.yaml(配置文件)文件中添加Provider的依賴
2.創(chuàng)建數(shù)據(jù)模型
import 'package:flutter/cupertino.dart';
class Counter with ChangeNotifier {
///存儲數(shù)據(jù)
? int_count =0;
? ///提供外部能夠訪問的數(shù)據(jù)
? intget count =>_count;
? ///提供更改數(shù)據(jù)的方法
? void increment() {
_count++;
? ? ///通知所有聽眾進行刷新
? ? notifyListeners();
? }
}
3.創(chuàng)建頂層共享數(shù)據(jù)舰蟆,這里使用MultiProvider可以創(chuàng)建多個頂層共享數(shù)據(jù)趣惠,應(yīng)為實際項目中可能有多個數(shù)據(jù)模型
在main.dart 入口函數(shù)中創(chuàng)建
@override
Widget build(BuildContext context) {
///使用MultiProvider可以創(chuàng)建多個頂層共享數(shù)據(jù)
? return MultiProvider(
? ?providers: [ChangeNotifierProvider(create: (_) =>Counter())],
? ? child:MaterialApp(
? ? ? title:'Flutter之旅',
? ? ? home:isSplash ?LoginPage() :SplashPage(),
? ? ),
? );
}
四、在子頁面中獲取狀態(tài)身害,我們分別編寫了兩個類FirstPage 和?SecondPage
獲取頂層數(shù)據(jù)的方法就是:Provider.of<Counter>(context).count
調(diào)用數(shù)據(jù)模型中的 increment 刷新數(shù)據(jù):Provider.of<Counter>(context,listen:false).increment();
創(chuàng)建第一個頁面FirstPage
package:flutter/material.dart';
import 'package:flutter_app1/common/utils/NavigatorUtil.dart';
import 'package:flutter_app1/module/login/myprovider/Counter.dart';
import 'package:flutter_app1/module/login/myprovider/second_page.dart';
import 'package:provider/provider.dart';
class FirstPage extends StatelessWidget {
const FirstPage({Key key}) :super(key: key);
? @override
? Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text("第一個頁面"),
? ? ? ),
? ? ? body:Column(
children: [
///獲取計數(shù)器中的Count值
? ? ? ? ? Text("${Provider.of(context).count}"),
? ? ? ? ? GestureDetector(
onTap: () {
NavigatorUtil.pushRightOrLeft(context, SecondPage());
? ? ? ? ? ? },
? ? ? ? ? ? child:Container(
width: MediaQuery.of(context).size.width,
? ? ? ? ? ? ? height:40,
? ? ? ? ? ? ? decoration:BoxDecoration(color: Colors.black26),
? ? ? ? ? ? ? child:Center(
child:Text("點擊下一頁", style:TextStyle(color: Colors.white)),
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? )
],
? ? ? ),
? ? );
? }
}
創(chuàng)建第二個界面?SecondPage
import 'package:flutter/material.dart';
import 'package:flutter_app1/module/login/myprovider/Counter.dart';
import 'package:provider/provider.dart';
class SecondPage extends StatelessWidget {
const SecondPage({Key key}) :super(key: key);
? @override
? Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text("第二個頁面"),
? ? ? ),
? ? ? body:Center(
///獲取計數(shù)器中的Count值
? ? ? ? child:Text("${Provider.of(context).count}"),
? ? ? ),
? ? ? ? floatingActionButton:FloatingActionButton(
onPressed: (){
///調(diào)用數(shù)據(jù)模型中的 increment 刷新數(shù)據(jù)
? ? ? ? ? ? Provider.of(context,listen:false).increment();
? ? ? ? ? },
? ? ? ? ? child:Icon(Icons.add),
? ? ? ? ),
? ? );
? }
}