http://www.reibang.com/p/bea8e9c57666
2019.07.17?
E7BB7894-13E0-4857-B9AF-9037F4EE75A6.png
如圖所示解幽，我們要做的就是這個(gè)效果牵舵。首先我說(shuō)一下這個(gè)頁(yè)面的我理解的試圖拆分击奶。我首先把這個(gè)效果圖拆分成三部分，左側(cè)可滾動(dòng)的ListView，右側(cè)上不的ListView准脂，以及商品詳情的ListView饿悬，沒錯(cuò)就是分成了三個(gè)ListView。并且左側(cè)的ListView點(diǎn)擊右側(cè)的頭部ListView以及商品詳情都會(huì)跟著隨之變動(dòng)叽唱。
【好像扯遠(yuǎn)了Ｇ弧！９淄ぁ；⒄！！Ｏ庹Ｋ宰！Ｆ喔摇Ｂ狄薄！下面開始正題??】
首先我們要做的話肯定需要狀態(tài)管理贡未。我覺得狀態(tài)管理就有點(diǎn)像iOS里面的通知种樱。不知道理解的對(duì)不對(duì)蒙袍，反正我覺得類似吧。
說(shuō)道狀態(tài)管理不得不說(shuō)谷歌的親自開發(fā)的兩款狀態(tài)管理Widget嫩挤；第一個(gè)是provide害幅，第二個(gè)是provider。這兩個(gè)的區(qū)別就是一個(gè)出來(lái)的早岂昭，現(xiàn)在好像沒整么更新了以现。第二個(gè)是今年(2019)最近才出來(lái)的目前的版本是provider: ^3.0.0+1。上一個(gè)停留在了provide: ^1.0.2约啊，基本上GG了邑遏。但是有時(shí)候項(xiàng)目中可能用到了provide。所以現(xiàn)在我想說(shuō)的是這兩個(gè)的基本用法恰矩，或者說(shuō)是兩者使用的對(duì)比吧(控制多個(gè)界面的狀態(tài)记盒，項(xiàng)目中可能多個(gè)界面的狀態(tài)管理更多)。
0??
創(chuàng)建一個(gè)provide吧外傅，其實(shí)可以說(shuō)是一個(gè)model
import 'package:flutter/material.dart';
//混入
class Counter with ChangeNotifier{
? int value = 0;
increment(){
? value += 1;
??? //發(fā)送通知
??? NotificationListener();
? }
}
沒錯(cuò)就這樣搞一個(gè)簡(jiǎn)單的纪吮。
一、
頂層依賴管理
void main() {
?//頂層依賴
var counter = Counter();
var providers = Provider();
? providers
?? ?..(Provider<Counter>.value(counter))
?runApp(ProviderNode(child: MyApp(), providers: providers));
}
沒錯(cuò)就是這樣萎胰。如果使用provider的話就不用這樣寫了碾盟。我們需要做的是這樣
provider
class MyApp extends StatelessWidget {
var counter = Counter();
?@override
? Widgetbuild(BuildContext context) {
?? ?return MultiProvider(
?????providers: [
//這里是關(guān)鍵注冊(cè)通知吧
?????? ?ChangeNotifierProvider(builder: (_) => counter),
???? ?],
????? child: Container(
??????? child: MaterialApp(
????????? title: 'Test',
????????? onGenerateRoute: Application.router.generator,
???????? ?//去掉DEBUG字樣
?? ???????debugShowCheckedModeBanner: false,
???????? ?//設(shè)置主題
????????? theme: ThemeData(primaryColor: Colors.pink),
????????? home: IndexPage(),
?????? ?),
???? ?),
?? ?);
?}
}
上面兩個(gè)就是這兩種的頂層依賴。
使用：
provide在具體方法中的使用
Provide.value(context).increment(掉一下里面的方法技竟。冰肴。這里也可以傳參數(shù)進(jìn)去只需要在 Counter 里面的 increment 里面寫兩個(gè)接受參數(shù)的就好);
provider就這么寫
Provider.of(context,listen:false).increment(這里也可以傳參數(shù));
這樣我們基本完成了把參數(shù)保存起來(lái)的效果。
再來(lái)個(gè)實(shí)際的例子
#注釋掉的是我們”provide“ 的寫法榔组，這里主要是從我們建立的model里面取Id熙尉，因?yàn)镮d是變化的。var formData = {
???? ?"categoryId": Provider.of<ChildCategory>(context)
?????? ???.categoryId, //Provide.value<ChildCategory>(context).categoryId,
???? ?"categorySubId": categorySubId,
???? ?"page": 1
?? ?};
這樣獲取到值瓷患，但是有時(shí)候我們需要的是一個(gè)data之類的骡尽，比較多的值。那我們可以這樣做
provide中：
return Provide<CategoryGoodsListProvide>(builder: (context, child, data) {
data.//也能點(diǎn)出我們?cè)O(shè)置好值
}
provider中：
final counter = Provider.of<Counter>(context);
?? ?return Container(
????? counter.//點(diǎn)出我們?cè)趍odel里面設(shè)置的值了
);
重要提示：在使用?provider的時(shí)候我們要注意了一定要設(shè)置listen的Bool值就是這樣
await Provider.of<DetailsInfoProvide>(context, listen: false).getGoodsInfo(goodsId);
附上項(xiàng)目github地址BXSH喜歡的朋友給個(gè)star吧擅编！
