E7BB7894-13E0-4857-B9AF-9037F4EE75A6.png
如圖所示，我們要做的就是這個效果盗痒。首先我說一下這個頁面的我理解的試圖拆分蚂蕴。我首先把這個效果圖拆分成三部分，左側可滾動的
ListView俯邓，右側上不的ListView骡楼，以及商品詳情的ListView，沒錯就是分成了三個ListView稽鞭。并且左側的ListView點擊右側的頭部ListView以及商品詳情都會跟著隨之變動鸟整。【好像扯遠了！ｋ獭＠禾酢５芡贰！Ｉ婕搿８昂蕖！０樗āＢ琢！下面開始正題??】
首先我們要做的話肯定需要狀態(tài)管理钳垮。我覺得狀態(tài)管理就有點像iOS里面的通知惑淳。不知道理解的對不對，反正我覺得類似吧扔枫。
說道狀態(tài)管理不得不說谷歌的親自開發(fā)的兩款狀態(tài)管理
Widget汛聚；第一個是provide，第二個是provider短荐。這兩個的區(qū)別就是一個出來的早倚舀，現(xiàn)在好像沒整么更新了。第二個是今年(2019)最近才出來的目前的版本是provider: ^3.0.0+1忍宋。上一個停留在了provide: ^1.0.2痕貌，基本上GG了。但是有時候項目中可能用到了provide糠排。所以現(xiàn)在我想說的是這兩個的基本用法舵稠，或者說是兩者使用的對比吧(控制多個界面的狀態(tài)，項目中可能多個界面的狀態(tài)管理更多)入宦。
0??
創(chuàng)建一個provide吧哺徊，其實可以說是一個model
import 'package:flutter/material.dart';
//混入
class Counter with ChangeNotifier{
int value = 0;
increment(){
value += 1;
//發(fā)送通知
NotificationListener();
}
}
沒錯就這樣搞一個簡單的。
一乾闰、
頂層依賴管理
provide
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
Widget build(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<Counter>(context) .increment(掉一下里面的方法轿钠。。這里也可以傳參數(shù)進去只需要在 Counter 里面的 increment 里面寫兩個接受參數(shù)的就好);
provider就這么寫
Provider.of<Counter>(context, listen: false).increment(這里也可以傳參數(shù));
這樣我們基本完成了把參數(shù)保存起來的效果病苗。
再來個實際的例子
#注釋掉的是我們”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吧泽裳！
