20.3.25 三

事件监听
路由导航

豆瓣在5s小屏上有问题
如何修复?
中间是可伸缩的, 看Row
Row一旦布局好, 还是有一个固定的宽度
五颗星的宽度是固定死的
三种思路来解决

1. 手动更改子Widget的大小
   FittedBox做适配, 包裹Row, 尽可能占据宽度, 可以压缩
2. FittedBox
   更好的解决方案, 不同屏幕, 不同尺寸 Container大小变化
   后期会开一节课讲, 自己定义一个单位RPX, 把屏幕分成多少分
3. 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

需求: ...

1. 创建全局的EventBus对象
   开发中可以搞个全局的文件夹
2. 发出事件
3. 监听事件的类型
   开发中一般会搞个类

一般不销毁, 只要程序运行, 就有可能用到

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, 需要的时候直接使用
创建一个详情页面
默认增加了一个返回按钮

1. 普通的跳转方式
   push、pop
   传递过来一些参数, push, 构造器直接传递参数

详情页返回数据 pop
Future的返回值
点击顶部返回按钮如何也携带数据?

1. 自己来决定返回按钮是什么样子

2. WillPopScope包裹Scaffold
   // 当返回为true时, 可以自动返回(flutter帮助我们执行返回操作)
   // 当返回为false时, 自行写返回代码
   onWillPop: () {
   return
   }

除了普通的跳转方式还有命名路由跳转
开发中普通的跳转方式不常用
存在弊端, 商品类App,
首页 推荐页 分类页
点击都跳转到详情页

命名路由使用

基本跳转

routes:
首页也可以配进去, home可以不写
=> initialRoute: "/"

字符串常量, 很容易写错, => 定义成常量

1. 把所有的常量放在一个文件夹里
   把路由的名称定义常量
   页面里static const String routeName = "/about"
   代码规范

参数传递
多个参数, 放到对象里面

跳转时需要动态参数
钩子函数 onGenerateRoute

onUnknownRoute

跳转到一个统一的错误页面
跳转到不存在的设置页面

代码规范
router文件夹
router.dart
class Router {
static final Map<String, >
}
两个好处,

1. 使用的地方代码间距
2. 方便增加路由映射