20.3.30 一
initState里面不能使用ModalRoute.of()
- 官方說了不能使用
還沒有準(zhǔn)備好InheritedWidget
還沒有放到映射里面
Timer.run()不會阻塞線程
加入到事件隊(duì)列
代碼的執(zhí)行順序問題
執(zhí)行好了以后才能拿到
三四天的時間來做一個小項(xiàng)目練習(xí)
收藏狀態(tài)管理
路由跳轉(zhuǎn)
左側(cè)彈出菜單
三個目標(biāo)
- 對前面所學(xué)的東西進(jìn)行練習(xí), 屏幕適配
- 麻雀雖小五臟俱全, 對項(xiàng)目目錄結(jié)構(gòu), 組件化思想劃分, 可擴(kuò)展性, 可維護(hù)性
- 其他相關(guān)的東西, 移動端, web測試版本, 圖標(biāo)設(shè)置, 啟動圖設(shè)置, 各種細(xì)節(jié)
先來講解兩個知識點(diǎn)
Flutter主題風(fēng)格
一. Theme主題的使用
Theme氛圍: 全局Theme, 局部Theme
MaterialApp中的
title: "Flutter Demo"
在哪里使用? => 查文檔
安卓中使用的
On iOS this value cannot be used.
一旦設(shè)置了主題, 那么應(yīng)用程序中的某些Widget, 就會直接使用主題的樣式
1.1 亮度, 枚舉類型 dark
brightness
根據(jù)系統(tǒng)是否是暗黑模式, 寫出兩套樣式primarySwatch傳入的不是Color, 而是MaterialColor
(包含了primaryColor和accentColor)
primarySwatch
可以設(shè)置很多東西的顏色. 官方?jīng)]有總結(jié)
自己總結(jié), StackOverFlow中, 官方人員Issue
靠經(jīng)驗(yàn)
開關(guān)跟iOS的樣式不一樣
CupertinoSwitch
iOS中顯示的就是綠色
activeColor
MaterialColor
父類的引用指向一個子類的對象
顏色劃分為不同的等級
重寫了一個操作符
Color operator [](T index) => _swatch[index];
primaryColor: 單獨(dú)設(shè)置導(dǎo)航和TabBar的顏色
accentColor: 單獨(dú)設(shè)置FloatingActionButton/Switch
某些Widget主題, Button的主題
buttonTheme: ButtonThemeData(
height: 25,
minWidth: 10,
buttonColor: Colors.yellow
)Card的主題
cardTheme: CardTheme(
color: Colors.green,
elevation: 10, //統(tǒng)一設(shè)置陰影
)Text的主題
默認(rèn)字體大小
textTheme: TextTheme(
body1: TextStyle(fontSize: 16),
body2: TextStyle(fontSize: 20),
)
Display4
Display3
可以通過Theme.of(context).textTheme
實(shí)際開發(fā)中方便管理
文檔
Cookbook
Widgets Catalog
API查類
頁面跳轉(zhuǎn), 繼承過來了主題設(shè)置
body1 設(shè)置了紅色
好幾個顏色都發(fā)生了變化
不管包裹了幾層, 都生效
局部主題將全局主題覆蓋
一般情況下不創(chuàng)建新的data, 所有的東西先拷貝過來, 設(shè)置了后會覆蓋
data: Theme.of(context).copyWith(
primaryColor: Colors.purple
)
floatingActionButton單獨(dú)包裹一個Theme
也是改不掉
= > 查資料 flutterchina.club
最早的時候官方文檔是有錯誤的
為什么改不掉?
Don't know why this is but accept that it is :)
暗黑模式的適配
Flutter開發(fā)如何適配暗黑模式?
最簡單的適配
theme: ThemeData(
primarySwatch: Colors.yellow,
textTheme: TextTheme(
boyd1: TextStyle(fontSize: 20, color: Colors.red)
)
)
darkTheme: ThemeData(
primarySwatch: Colors.grey,
textTheme: TextTheme(
boyd1: TextStyle(fontSize: 20, color: Colors.blue)
)
)
直接寫兩套
開發(fā)中封裝, 抽取, 搞一個文件夾
JHAppTheme
字體大小抽成常量
static const double smallFontSize = 16;
static const double normalFontSize = 20;
static const double largeFontSize = 24;
屏幕適配
一個適配方案
封裝一個工具類
Flutter中的單位
iphone6 dpr * 2
MyApp的build方法中拿到屏幕寬高
//1. 手機(jī)的無力分辨率
window.physicalSize.width;
//2. 手機(jī)屏幕的大小(邏輯分辨率)
final width = MediaQuery.of(context).size.width;
直接報(bào)錯, 為什么?
context還沒有初始化
JHHomePage中就可以拿到
MaterialApp還沒有初始化完成
of方法里面是怎么拿的
怎么啟動Debug? 點(diǎn)擊小蟲子
就是想在報(bào)錯的地方拿到寬高
如何操作?
//2. 獲取dpr, 直接通過window拿
final dpr = window.devicePixelRatio;
//3. 寬度和高度
final width = physicalWidth / dpr;
final height = physicalHeight / dpr;
//4. 狀態(tài)欄高度
final statusHeight = window.padding.top / dpr;
抽取封裝, shared文件夾
size_fit.dart
static靜態(tài)好處是, 不需要創(chuàng)建實(shí)例
適配方案
前端里面的屏幕適配經(jīng)驗(yàn)
rem:
給根標(biāo)簽(HTML標(biāo)簽)設(shè)置一個字體的大小
但是不同的屏幕要動態(tài)設(shè)置不同的字體大小
其他所有的單位都是用rem單位
html font-size: 20 div font-size: ->vw、wh
將屏幕分成100等份, 一個1vw相當(dāng)于是1%的大小;
其他所有的單位都是用vw或wh單位rpx
rpx是小程序中的適配方案, 它將750px作為設(shè)計(jì)稿, 1rpx = 屏幕寬度/750
其它所有的單位都是用rpx單位
小程序以iphone6作為標(biāo)準(zhǔn) 750
原理?
不管是什么屏幕, 統(tǒng)一分成750份
在iPhone5上：1rpx = 320/750 = 0.4266 ≈ 0.42px
在iPhone6上：1rpx = 375/750 = 0.5px
在iPhone6plus上：1rpx = 414/750 = 0.552px
小程序中所有的單位都要寫成2倍
封裝的通用點(diǎn)
setRpx(400)、setPx(200)
想要封裝的擴(kuò)展性更高, 以6+為設(shè)計(jì)稿
傳一個標(biāo)準(zhǔn)的尺寸
standardSize()
第三方庫: flutter_screenutil
