20.4.6 一

今天內(nèi)容還是比較多的
項目里還有什么東西沒有做?
菜譜詳情頁面
過濾頁面, 過濾掉一些食物
右滑出的菜單頁面
收藏顯示

菜譜詳情頁面
兩個地方都會使用
局部變量傳遞來傳遞去

圖片
食材
制作步驟
超過了屏幕的高度, 滾動
方案非常多, 滾動的東西不是相同的

Column超過屏幕高度, 報錯超過安全區(qū)域
如何解決?SingleChildScrollView
Column作為子widget
知識點(diǎn)補(bǔ)充

先把代碼劃分清晰, 用Text占位, 之后進(jìn)行填充

橫幅圖片 Widget buildBannerImage() {}
Image包裹一個Container
制作材料 Widget buildMakeMaterial() {}
小標(biāo)題, 內(nèi)容
兩個標(biāo)題長得差不多
兩種處理方式: 單獨(dú)封裝一個Widget/抽成一個公共的方法
Widget buildMakeTitle() {}
上下有一定的間距, 包裹Container
通過Theme去拿, 需要把上下文傳到方法里
設(shè)置垂直方向的padding
希望是粗體 -> copyWith()
分析: 搞一個ListView來做
Column嵌套ListView會出現(xiàn)一個常見的問題

有一個邊框
Container里面放一個ListView
用Card做出來的東西比較好看

重點(diǎn)!!!
跑一下就報錯
Flutter中非常經(jīng)典的一個錯誤 hasSize
錯誤產(chǎn)生的原因
把所有Widget放在一個Column里面, 最大占據(jù)控件, 屏幕的高度
SingleChildScrollView只是讓內(nèi)容可以滾動而已
Column需要有一個固定的高度
放了一個ListView后出問題, ListView很特別, 滾動方向上盡可能大的占據(jù)空間, 自己也不知道占據(jù)多少空間
Container的高度是300
里面放個ListView, 盡可能占據(jù)大空間 => 只能占據(jù)300
Column的特點(diǎn), 需要所有子Widget有個明確的高度,
有了明確的高度才能知道如何擺放, mainAxisAligment
產(chǎn)生了矛盾, ListView希望盡可能多的占據(jù)高度, Column希望ListView給一個固定的高度
Column里面放了一個ListView/ListView中放一個ListView
hasSize: 子Widget不能有一個明確的高度, 父Widget希望子Widget有個明確的高度

給Container一個明確的高度300, 會產(chǎn)生另一個問題
ListView的高度可能會超過300, ListView可以在Container里面滾動, 沒有超過也可以滾動
出現(xiàn)局部滾動的效果
現(xiàn)在不要局部滾動
高度不能寫死, 內(nèi)容多高, 撐多高

如何解決?
讓ListView有一個固定的高度, 不是盡量多的占據(jù)高度
=> 一個屬性shrinkWrap: 范圍內(nèi)進(jìn)行包裹, 默認(rèn)false
單獨(dú)拖動的時候可以進(jìn)行滾動
=> 一個屬性physics: NeverScrollableScrollPhysics(),設(shè)置不能滾動
每一個cell本來就存在的內(nèi)邊距設(shè)置為0

距離邊緣太近, 給Container一個固定的寬度或者
媒體查詢 MediaQuery 左右兩邊各有15

制作步驟 Widget buildMakeSteps() {}
Container里面搞個ListView
和上面制作材料相似的地方
Widget buildMakeContent(BuildContext context, Widget child) {}
間的的重構(gòu)
共享一個外面的Container, 傳入child
比較好看 => 寫成可選參數(shù),

圓形的步驟編號
圓角文字, 類似于圓角圖片
leading: CircleAvatar(
child: Text()
)
背景默認(rèn)情況下用導(dǎo)航欄顏色
也可以單獨(dú)設(shè)置 backgroundColor: Orange
很多好用的Widget
學(xué)會去搜索, 最好用英文用Google搜索StackOverFlow

底部空間去除 EdgeInsets.zero

和制作材料是重復(fù)代碼
搞個Widget繼承ListView, 有些重復(fù)的東西寫死

收藏按鈕
FloatingActionButton
改了主題, 需要重新跑一下
監(jiān)聽點(diǎn)擊
布局需要多練

不適合用Column, 盡可能大, 循環(huán)創(chuàng)建

Flutter的定位
做一個成套的東西, 最開始不想調(diào)用原生
原來的App是用原生開發(fā)的全線轉(zhuǎn)向Flutter成本高, 模塊開發(fā)
混合開發(fā)
Flutter的第三方插件在越來越豐富
開源出去的機(jī)會
Web端如果也發(fā)展的比較好的話, 很看好
混合開發(fā)會講, 橋梁, 原理, 知道為什么要這樣寫
開源的, 讀源碼, 里面有很多東西

收藏的功能
共享收藏過哪些東西
多個地方使用共享
狀態(tài)的共享
有幾種做法

單獨(dú)搞一個Provider, 記錄著所有的收藏, 繼續(xù)收藏繼續(xù)添加
相當(dāng)于在搞一個ViewModel
給每一個食物添加一個屬性, isFavor屬性, 默認(rèn)false
點(diǎn)擊了某個食物, 設(shè)置為true, 刷新界面setState
考慮一個問題, 采用第二個方案, 需要改StatelessWidget為StatefulWidget
選擇第一種方案, 統(tǒng)一的管理, 數(shù)組添加移除

favor_view_model.dart
class JHFavorViewModel extends ChangeNotifier {}
操作方法
void addMeal(JHMealModel meal) {}
void removeMeal(JHMealModel meal) {}
操作后發(fā)出通知 notifyListeners()
搞一個車方法返賬bool
bool isFavor(JHMealModel meal) {
return
}

detail.dart中

添加floatingActionButton: Consumer<JHFavorViewModel>(

    return ;
)

判斷是否是收藏狀態(tài)
final iconData = favorVM.isFavor(meal) ? Icons.favorite : Icons.favorite_border;
final iconColor = favorVM. ? Colors.red : Colors.black;
寫的過程中進(jìn)行重構(gòu)
報錯, 找不到Provider
main.dart中改東西
providers: [
多個Provider
],

布局的一個問題
Column交叉軸上確實是個Center
默認(rèn)占據(jù)的寬度不是整個屏幕的寬度
是最大的子Widget的寬度
有圖片加載完后, 圖片會撐大寬度
不能直接設(shè)置寬度, 給里面的一個Widget設(shè)置一個盡可能大的寬度infinity
遇到問題分析問題

再次點(diǎn)擊收藏按鈕判斷進(jìn)行收藏或者取消操作
if判斷其他地方可能也需要使用
在favor_view_model.dart中
void handleMeal(JHMealModel meal) {}

detail_floating_button.dart
JHDetailFloatingButton
detail.dart就比較簡潔了

菜譜列表頁的收藏
之前是直接寫死的
之前封裝的Widget里面
meal_item.dart
很多東西需要做一個改變
搞一個方法

Widget buildFavorItem() {}
Consumer<JHFavorViewModel>(
    builder: (ctx, favorVM, child) {
        //1. 判斷時候收藏狀態(tài)
        final iconData = favorVM.isFavor(_meal) ? Icons.favorite :
        final iconColor = ...
        final title = favorVM.isFavor(_meal) ? "收藏" : "未收藏";

        return JHOperationItem(Icon(iconData, color: iconColor,), title);
    }
)

可選參數(shù)的名字不能以下劃線開頭
operation_item.dart修改

監(jiān)聽點(diǎn)擊GestureDetector(child:JHOperationItem())
文字的長度發(fā)生改變的世邦, 其他會一起變

給收藏按鈕一個確定的寬度
文本長度改成一樣未收藏已收藏
Row里面Space
一開始給一個固定的寬度
operation_item.dart中給一個固定的寬度, 要寫成.px
很容易點(diǎn)到旁邊, 給包裹一個padding, 讓收藏按鈕的高度增大
開發(fā)中的常見做法, 返回按鈕的點(diǎn)擊區(qū)域

favor.dart
創(chuàng)建favor_content.dart
JHFavorContent
拿到數(shù)據(jù), 展示列表
沒有收藏時空的判斷處理

另一個方案, 模型中搞個isFavor, 可以自己嘗試一下

再講一個知識點(diǎn)
抽屜效果
Flutter里面實現(xiàn)起來非常的簡單
添加到首頁, 導(dǎo)航欄抽屜圖標(biāo)
home.dart
drawer: Drawer()
默認(rèn)情況下有一定的寬度
包裹一個Container, 調(diào)整寬度

如何改首頁導(dǎo)航欄上抽屜的圖標(biāo)?
appBar中
leading: Icon(Icons.setting)
直接改了以后Drawer不彈出來了
遇到問題自己搜索
谷歌flutter drawer icon
不能搞一個Icon => IconButton(icon: Icon(Icons.build), onPressed: () {})
怎么彈出?
Navigator.of(context).openDrawer();
依然不可以
解決思路, 自己學(xué)習(xí)方法
Scaffold上下文拿到的不一樣
如何處理?
leading: Builder(
builder: (ctx) {
return IconButton
}
)

抽屜里面的東西做一下
再做一個封裝
AppBar也做一個封裝
home_app_bar.dart
JHHomeAppBar : super中寫
home_drawer.dart
JHHomeDrawer
child: Drawer(
child: Column
)

Widget buildHeaderView() {}
alignment: Alignment(0, 0.5)
增加一個超大字體主題, 需要重新跑一下, 字體比較細(xì), 需要加粗

進(jìn)餐猎荠、過了
Widget buildListTile(Widget icon, String title) {}
彈出Drawer
點(diǎn)擊傳入函數(shù)
Navigator.of(context).pop()

過濾下節(jié)課來說

Flutter從入門到寫出完整App Day16

Flutter從入門到寫出完整App Day16

20.4.6 一