Flutter狀態管理provider

在沒有狀態管理之前，我們使用setState去修改同步渲染本頁面的數據，比如在一個Tab頁，我們點擊一個按鈕，讓數字+1，使用setState即可完成。

 

那我們想要再另外一個和本頁面完全不相關的Tab頁也完成同步動作，這個時候就要使用到狀態管理了。

我們首先介紹provider

provider是官方提供的一種狀態管理，使用起來較簡單

1、創建一個繼承於ChangeNotifier的方法類，在這個類去實現一些增刪改查的操作。例如：

import 'package:flutter/material.dart';

class CartProvider with ChangeNotifier{

  List<String> _cartList = [];

  get cartList=>this._cartList;

  get cartCount =>this._cartList.length;

  //增加卡片數據
  addCart(value){
    _cartList.add(value);
    //通知
    notifyListeners();
  }

  //刪除卡片數據  
  removeCart(value){
    _cartList.remove(value);
    //通知
    notifyListeners();
  }

  List<String> getCart(){
    return _cartList;
  }
}

上邊這個例子是對一個_cartList的增刪改查，可以看到，在對list進行添加和修改的時候我們都調用了notifyListeners();

 

2、在dart主類把返回的MaterialApp改爲MultiProvider去註冊剛纔寫的這個方法類

import 'package:flutter/material.dart';
import 'package:jdshop/provider/CartProvider.dart';
import 'package:jdshop/routes/Routes.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      child: MaterialApp(
        initialRoute: "/",
        //不顯示debug圖標
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            primaryColor: Colors.white
        ),
        onGenerateRoute: onGenerateRoute,
      ),
      providers: [
        ChangeNotifierProvider(create: (_)=>CartProvider(),)
      ],
    );
  }
}

3、在需要操作這個數據的頁面中的build方法中添加

var cartProvider = Provider.of<CartProvider>(context);

這句話的意思就是說查找這個狀態管理下邊的CartProvider