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