http://www.lxweimin.com/p/bea8e9c57666
2019.07.17?
E7BB7894-13E0-4857-B9AF-9037F4EE75A6.png
如圖所示，我們要做的就是這個效果。首先我說一下這個頁面的我理解的試圖拆分。我首先把這個效果圖拆分成三部分，左側可滾動的ListView，右側上不的ListView，以及商品詳情的ListView，沒錯就是分成了三個ListView。并且左側的ListView點擊右側的頭部ListView以及商品詳情都會跟著隨之變動。
【好像扯遠了！！！！！！！！！！！下面開始正題??】
首先我們要做的話肯定需要狀態管理。我覺得狀態管理就有點像iOS里面的通知。不知道理解的對不對，反正我覺得類似吧。
說道狀態管理不得不說谷歌的親自開發的兩款狀態管理Widget；第一個是provide，第二個是provider。這兩個的區別就是一個出來的早，現在好像沒整么更新了。第二個是今年(2019)最近才出來的目前的版本是provider: ^3.0.0+1。上一個停留在了provide: ^1.0.2，基本上GG了。但是有時候項目中可能用到了provide。所以現在我想說的是這兩個的基本用法，或者說是兩者使用的對比吧(控制多個界面的狀態，項目中可能多個界面的狀態管理更多)。
0??
創建一個provide吧，其實可以說是一個model
import 'package:flutter/material.dart';
//混入
class Counter with ChangeNotifier{
? int value = 0;
increment(){
? value += 1;
??? //發送通知
??? NotificationListener();
? }
}
沒錯就這樣搞一個簡單的。
一、
頂層依賴管理
void main() {
?//頂層依賴
var counter = Counter();
var providers = Provider();
? providers
?? ?..(Provider<Counter>.value(counter))
?runApp(ProviderNode(child: MyApp(), providers: providers));
}
沒錯就是這樣。如果使用provider的話就不用這樣寫了。我們需要做的是這樣
provider
class MyApp extends StatelessWidget {
var counter = Counter();
?@override
? Widgetbuild(BuildContext context) {
?? ?return MultiProvider(
?????providers: [
//這里是關鍵注冊通知吧
?????? ?ChangeNotifierProvider(builder: (_) => counter),
???? ?],
????? child: Container(
??????? child: MaterialApp(
????????? title: 'Test',
????????? onGenerateRoute: Application.router.generator,
???????? ?//去掉DEBUG字樣
?? ???????debugShowCheckedModeBanner: false,
???????? ?//設置主題
????????? theme: ThemeData(primaryColor: Colors.pink),
????????? home: IndexPage(),
?????? ?),
???? ?),
?? ?);
?}
}
上面兩個就是這兩種的頂層依賴。
使用：
provide在具體方法中的使用
Provide.value(context).increment(掉一下里面的方法。。這里也可以傳參數進去只需要在 Counter 里面的 increment 里面寫兩個接受參數的就好);
provider就這么寫
Provider.of(context,listen:false).increment(這里也可以傳參數);
這樣我們基本完成了把參數保存起來的效果。
再來個實際的例子
#注釋掉的是我們”provide“ 的寫法，這里主要是從我們建立的model里面取Id，因為Id是變化的。var formData = {
???? ?"categoryId": Provider.of<ChildCategory>(context)
?????? ???.categoryId, //Provide.value<ChildCategory>(context).categoryId,
???? ?"categorySubId": categorySubId,
???? ?"page": 1
?? ?};
這樣獲取到值，但是有時候我們需要的是一個data之類的，比較多的值。那我們可以這樣做
provide中：
return Provide<CategoryGoodsListProvide>(builder: (context, child, data) {
data.//也能點出我們設置好值
}
provider中：
final counter = Provider.of<Counter>(context);
?? ?return Container(
????? counter.//點出我們在model里面設置的值了
);
重要提示：在使用?provider的時候我們要注意了一定要設置listen的Bool值就是這樣
await Provider.of<DetailsInfoProvide>(context, listen: false).getGoodsInfo(goodsId);
附上項目github地址BXSH喜歡的朋友給個star吧！
