20.3.25 三
事件监听
路由导航
豆瓣在5s小屏上有问题
如何修复?
中间是可伸缩的, 看Row
Row一旦布局好, 还是有一个固定的宽度
五颗星的宽度是固定死的
三种思路来解决
- 手动更改子Widget的大小
FittedBox做适配, 包裹Row, 尽可能占据宽度, 可以压缩 - FittedBox
更好的解决方案, 不同屏幕, 不同尺寸 Container大小变化
后期会开一节课讲, 自己定义一个单位RPX, 把屏幕分成多少分 - rpx/rem/vw 100*rpx
事件监听
原始指针事件(Pointer Events):
描述了屏幕上由触摸板、鼠标、指示笔等处罚的指针的位置和移动
手势识别(Gesture Detector): 在原始事件上的一种封装
2.1指针事件
代表的是人机界面交互的原始数据. 一共有四种指针事件
Pointer的原理是什么?
hit test, 确定与屏幕发生接触的位置上有哪些Widget
冒泡
不存在取消或停止
原始指针事件使用Listener来监听
按下去的时候来电话了、闹钟响了 onPointerCancel
监听复杂事件还是需要手势
2.2手势识别 Gesture
官方建议开发中尽可能使用Gesture, 而不是Pointer
长按手势长按多久? 官方文档没有写
补充个小的知识点
黄色的Container里面放一个小的红色的Container
直接写红色会撑满
tight约束
alignment: Alignment.center
监听红色的点击也不想监听黄色的点击, 不想做冒泡
默认点击事件不是每次都会传到黄色, 偶尔会传到外面
如何解决?
官方文档有时也会出错, 翻译的是老的
不要让两个存在嵌套关系
=> Stack
跨组件事件的传递
两个Widget, Widget层级多
回调函数传好几层不合适
=> EventBus, 事件总线
订阅者模式, 通过一个全局的对象来管理
全局事件的传递和监听
第三方event_bus
需求: ...
- 创建全局的EventBus对象
开发中可以搞个全局的文件夹 - 发出事件
- 监听事件的类型
开发中一般会搞个类
一般不销毁, 只要程序运行, 就有可能用到
Flutter路由导航
前端朝着路由发展
路由管理
路由的概念由来已久, 包括网络路由、后端路由, 到现在广为流行的前端路由
核心是一个路由映射表
如: 名字detail映射到DetailPage页面等
有了这个映射表之后, 我们就可以方便的根据名字来完成路由的转发
Flutter中, Route和Navigator
页面包装在路由里面, 包裹成一个Route对象
官方的说法: An abstraction for an entry managed by a Navigator
文件夹改命名
1.2 Route
Route抽象类用的最多的MaterialPageRoute
1.3 Navigator
管理所有的Route的Widget, 通过Stack栈结构来进行管理
不需要手动创建Navigator
MaterialApp默认是有插入Navigator, 需要的时候直接使用
创建一个详情页面
默认增加了一个返回按钮
- 普通的跳转方式
push、pop
传递过来一些参数, push, 构造器直接传递参数
详情页返回数据 pop
Future的返回值
点击顶部返回按钮如何也携带数据?
自己来决定返回按钮是什么样子
WillPopScope包裹Scaffold
// 当返回为true时, 可以自动返回(flutter帮助我们执行返回操作)
// 当返回为false时, 自行写返回代码
onWillPop: () {
return
}
除了普通的跳转方式还有命名路由跳转
开发中普通的跳转方式不常用
存在弊端, 商品类App,
首页 推荐页 分类页
点击都跳转到详情页
命名路由使用
基本跳转
routes:
首页也可以配进去, home可以不写
=> initialRoute: "/"
字符串常量, 很容易写错, => 定义成常量
- 把所有的常量放在一个文件夹里
把路由的名称定义常量
页面里static const String routeName = "/about"
代码规范
参数传递
多个参数, 放到对象里面
跳转时需要动态参数
钩子函数 onGenerateRoute
onUnknownRoute
跳转到一个统一的错误页面
跳转到不存在的设置页面
代码规范
router文件夹
router.dart
class Router {
static final Map<String, >
}
两个好处,
- 使用的地方代码间距
- 方便增加路由映射
