20.3.25 三
事件監(jiān)聽
路由導航
豆瓣在5s小屏上有問題
如何修復?
中間是可伸縮的, 看Row
Row一旦布局好, 還是有一個固定的寬度
五顆星的寬度是固定死的
三種思路來解決
- 手動更改子Widget的大小
FittedBox做適配, 包裹Row, 盡可能占據(jù)寬度, 可以壓縮 - FittedBox
更好的解決方案, 不同屏幕, 不同尺寸 Container大小變化
后期會開一節(jié)課講, 自己定義一個單位RPX, 把屏幕分成多少分 - rpx/rem/vw 100*rpx
事件監(jiān)聽
原始指針事件(Pointer Events):
描述了屏幕上由觸摸板颤介、鼠標赞赖、指示筆等處罰的指針的位置和移動
手勢識別(Gesture Detector): 在原始事件上的一種封裝
2.1指針事件
代表的是人機界面交互的原始數(shù)據(jù). 一共有四種指針事件
Pointer的原理是什么?
hit test, 確定與屏幕發(fā)生接觸的位置上有哪些Widget
冒泡
不存在取消或停止
原始指針事件使用Listener來監(jiān)聽
按下去的時候來電話了前域、鬧鐘響了 onPointerCancel
監(jiān)聽復雜事件還是需要手勢
2.2手勢識別 Gesture
官方建議開發(fā)中盡可能使用Gesture, 而不是Pointer
長按手勢長按多久? 官方文檔沒有寫
補充個小的知識點
黃色的Container里面放一個小的紅色的Container
直接寫紅色會撐滿
tight約束
alignment: Alignment.center
監(jiān)聽紅色的點擊也不想監(jiān)聽黃色的點擊, 不想做冒泡
默認點擊事件不是每次都會傳到黃色, 偶爾會傳到外面
如何解決?
官方文檔有時也會出錯, 翻譯的是老的
不要讓兩個存在嵌套關系
=> Stack
跨組件事件的傳遞
兩個Widget, Widget層級多
回調(diào)函數(shù)傳好幾層不合適
=> EventBus, 事件總線
訂閱者模式, 通過一個全局的對象來管理
全局事件的傳遞和監(jiān)聽
第三方event_bus
需求: ...
- 創(chuàng)建全局的EventBus對象
開發(fā)中可以搞個全局的文件夾 - 發(fā)出事件
- 監(jiān)聽事件的類型
開發(fā)中一般會搞個類
一般不銷毀, 只要程序運行, 就有可能用到
Flutter路由導航
前端朝著路由發(fā)展
路由管理
路由的概念由來已久, 包括網(wǎng)絡路由匿垄、后端路由, 到現(xiàn)在廣為流行的前端路由
核心是一個路由映射表
如: 名字detail映射到DetailPage頁面等
有了這個映射表之后, 我們就可以方便的根據(jù)名字來完成路由的轉發(fā)
Flutter中, Route和Navigator
頁面包裝在路由里面, 包裹成一個Route對象
官方的說法: An abstraction for an entry managed by a Navigator
文件夾改命名
1.2 Route
Route抽象類用的最多的MaterialPageRoute
1.3 Navigator
管理所有的Route的Widget, 通過Stack棧結構來進行管理
不需要手動創(chuàng)建Navigator
MaterialApp默認是有插入Navigator, 需要的時候直接使用
創(chuàng)建一個詳情頁面
默認增加了一個返回按鈕
- 普通的跳轉方式
push、pop
傳遞過來一些參數(shù), push, 構造器直接傳遞參數(shù)
詳情頁返回數(shù)據(jù) pop
Future的返回值
點擊頂部返回按鈕如何也攜帶數(shù)據(jù)?
自己來決定返回按鈕是什么樣子
WillPopScope包裹Scaffold
// 當返回為true時, 可以自動返回(flutter幫助我們執(zhí)行返回操作)
// 當返回為false時, 自行寫返回代碼
onWillPop: () {
return
}
除了普通的跳轉方式還有命名路由跳轉
開發(fā)中普通的跳轉方式不常用
存在弊端, 商品類App,
首頁 推薦頁 分類頁
點擊都跳轉到詳情頁
命名路由使用
基本跳轉
routes:
首頁也可以配進去, home可以不寫
=> initialRoute: "/"
字符串常量, 很容易寫錯, => 定義成常量
- 把所有的常量放在一個文件夾里
把路由的名稱定義常量
頁面里static const String routeName = "/about"
代碼規(guī)范
參數(shù)傳遞
多個參數(shù), 放到對象里面
跳轉時需要動態(tài)參數(shù)
鉤子函數(shù) onGenerateRoute
onUnknownRoute
跳轉到一個統(tǒng)一的錯誤頁面
跳轉到不存在的設置頁面
代碼規(guī)范
router文件夾
router.dart
class Router {
static final Map<String, >
}
兩個好處,
- 使用的地方代碼間距
- 方便增加路由映射
