Flutter實戰視頻-移動電商-24.Provide狀態管理基礎

24.Provide狀態管理基礎

 

Flutter | 狀態管理特別篇 —— Provide：https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsourcetag=s_pcqq_aiomsg

 

點擊左側的導航右側的導航發生變化，這屬於兩個widget。這兩個widget之間進行通信。用setstate的形式，耦合性太強

 

狀態管理有這麼幾種方案

這裏咱們用Provide，谷歌本身退出的

https://github.com/google/flutter-provide

 

開始寫測試例子

 

咱們在購物車的頁面

這是咱們原來購物車的頁面

在裏面寫咱們的組件，放個center在中間，裏面用column進行上下佈局。放兩個widget

下面來建立咱們的widget

建立numberwidget

stless快速生成，中間就放一個Text

 

 

快速生成button的widget

 

 

故意用了三個widget造成了咱們的的頁面。展現效果：

添加狀態的引用

pubspec.yaml文件內添加引用

有了provide後，作數據庫倉庫

lib文件夾下建立provide的文件夾，而後建立counter.dart

Counter類必須混入with ChangeNotifier

定義增長的方法：increment

而後把value的值++後，調用notifyListeners()方法通知聽衆,vlaue值發生了改變，局部刷新咱們的widget

 

main.dart內

runApp(MyApp());也要進行修改

 

獲取值

首先在購物車頁面添加引用

import 'package:provide/provide.dart'; import '../provide/counter.dart';

 

 

咱們如何監聽它 須要在外層包裹一個provider組件。

Provide<Counter>裏面有構造器builder須要傳三個參數，第一個是上下文，第二個是child，第三個就是咱們的counter對象

這樣就是已經獲取咱們的狀態的值了。

 

修改狀態值

調用咱們在Counter裏面定義的增長的方法

 

在會員中心頁面進行測試

member_page.dart。若是在這個頁面獲取Counter的值，咱們就是真正的實現了全局頁面的狀態管理

首先添加引用，外層用Provide包裹住，而後調用builder方法

咱們在購物車頁面把數字加到13.

 

在到會員中心查看咱們的counter的值，也是13.兩個頁面的值是相同的。這樣就實現了全局的值狀態管理

 

最終代碼：

import 'package:flutter/material.dart'; class Counter with ChangeNotifier{ int value=0; increment(){ value++; notifyListeners(); } }

counter.dart

 

 

 

import 'package:flutter/material.dart'; import 'package:provide/provide.dart'; import '../provide/counter.dart'; class CartPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( children: <Widget>[ Number(), MyButton() ], ), ) ); } } class Number extends StatelessWidget { @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(top:200.0), child: Provide<Counter>( builder: (context,child,counter){ return Text( '${counter.value}', style:Theme.of(context).textTheme.display1 ); }, ), ); } } class MyButton extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: RaisedButton( onPressed: (){ Provide.value<Counter>(context).increment(); }, child: Text('遞增'), ), ); } }

cart_page.dart

 

 

import 'package:flutter/material.dart'; import 'package:provide/provide.dart'; import '../provide/counter.dart'; class MemberPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child:Provide<Counter>( builder: (context,child,counter){ return Text( '${counter.value}', style: Theme.of(context).textTheme.display1, ); }, ), ), ); } }

member_page.dart