很多业务场景都需要监听页面切换的操作,比如从 A 页面跳转到 B ,再从 B 返回 A 之后,需要重新刷新下数据。在 Android 里通常是 Activity,iOS 里通常是 ViewController 类,这些都对应用户理解的一个页面,但是 Flutter 里并没有像我们通常理解的页面这个概念,所以初学者刚开始会挺别扭。
Flutter 是通过 Navigator
来组织页面的,有点像前端 React/Vue 里的路由。通常在一个 Flutter 应用中,只有一个 Activity/ViewController ,Flutter 呈现的页面的跳转返回,都只是通过 Navigator 将 Widget 抽象成一个一个用户理解的页面而已。所以 Flutter 页面切换监听,还是需要通过对路由的监听来实现。
1. 根组件里定义 RouteObserver
首先需要在根组件 MaterialApp 里定义一个全局的 RouteObserver 对象:
///定义全局的 routeObserver 对象
final RouteObserver<PageRoute> routeObserver = RouteObserver();
void main() {
runApp();
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
navigatorObservers: [routeObserver],
...
);
}
}
2. 在页面中订阅路由事件
接着需要在页面中,通过 RouteObserver 订阅路由事件。我们看下其方法签名:
//订阅
void subscribe(RouteAware routeAware, R route)
//一般有订阅的同时,也会有解绑的函数,防止内存泄漏以及进行资源释放
void unsubscribe(RouteAware routeAware)
RouteAware 是个什么鬼内,我们查看源码可以知道其是一个抽象类:
abstract class RouteAware {
///下一个页面退出返回时触发
void didPopNext() { }
///当前页面进入时触发
void didPush() { }
///当前页面退出时触发
void didPop() { }
///当前页面跳转到下一个页面时触发
void didPushNext() { }
}
可以看到,这里其实就是页面切换的监听回调了,如果我们需要实现文中开头所讲的业务场景,只需要使用 didPushNext()、didPopNext()
即可。还一个参数 R route
是个什么东西呢?RouteObserver 是个泛型类型,定了类型是 Route<dynamic>
,其实就是当前页面所对应的路由对象。
最终,在页面 Widget 的 Stage 类中实现:
/// 一般通过 with 关键来实现,熟悉前端的可能知道 mixin 这个概念,当然你可以通过 implements 关键来实现接口
class _MyPageState extends State<MyPage> with RouteAware {
//一般在这里进行订阅,不要试图在 initState() 函数中订阅,调用 ModalRoute.of(context) 会发生错误
@override
void didChangeDependencies() {
super.didChangeDependencies();
routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
}
@override
void dispose() {
routeObserver.unsubscribe(this);
super.dispose();
}
void didPopNext() { }
///当前页面进入时触发
void didPush() { }
void didPop() { }
void didPushNext() { }
}
下拉刷新
Flutter 中下拉刷新需要用到 RefreshIndicator 组件,一般在 ScrollView 或 ListView 外包一层 RefreshIndicator 组件即可。
1. 常见用法
Future _onRefresh() async {
//......实现刷新逻辑
}
@override
Widget build(BuildContext context) {
return RefreshIndicator(
onRefresh: _onRefresh,
child: SingleChildScrollView(
child: Container(),
));
}
使用很简单,只需要实现 onRefresh 函数即可,这也是一个 Future 函数,当该 Future 执行完毕时,刷新操作也就完成了。是不是很奇怪,当我们用原生代码写下拉刷新时,通常需要定义一个状态来表示刷新状态,到 Flutter 这里居然啥都不用管。当触发下拉刷新时,就会执行 onRefresh 函数,只要该函数没有执行完毕,UI 上就一直显示的是刷新状态,一旦该函数执行完毕,UI 状态也会自动改变成刷新完成。
2. 怎么触发自动刷新
通常我们进入某个页面时,希望一进去就会触发自动下拉刷新,但是找了一圈发现没有什么属性可设置。经过一番研究,发现 RefreshIndicator 也是一个有状态组件,我们可直接获取该组件的状态,通过它的状态来手动触发下拉刷新。这就需要用到每个 Widget 都会有的 Key
属性了,通过 key 可以得到其对应的状态。具体代码如下:
//自定义 RefreshIndicatorState 类型的 Key
final GlobalKey<RefreshIndicatorState> _refreshKey = GlobalKey();
@override
void initState() {
super.initState();
//必须在组件挂载运行的第一帧后执行,否则 _refreshKey 还没有与组件状态关联起来
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
//关键代码,直接触发下拉刷新
_refreshKey.currentState?.show();
});
}
Future _onRefresh() async {
//......实现刷新逻辑
}
@override
Widget build(BuildContext context) {
return RefreshIndicator(
key: _refreshKey, //自定义 key,需要通过 key 获取到对应的 State
onRefresh: _onRefresh,
child: SingleChildScrollView(
child: Container(),
));
}
3. 页面不能滚动时无法触发下拉刷新
如果页面内容很少,在一屏内不能滚动,你会发现无法触发下拉刷新。解决这个问题,需要设置 ScrollView 的 physics 属性。
最终完整解决方案如下:
//自定义 RefreshIndicatorState 类型的 Key
final GlobalKey<RefreshIndicatorState> _refreshKey = GlobalKey();
@override
void initState() {
super.initState();
//必须在组件挂载运行的第一帧后执行,否则 _refreshKey 还没有与组件状态关联起来
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
//关键代码,直接触发下拉刷新
_refreshKey.currentState?.show();
});
}
Future _onRefresh() async {
//......实现刷新逻辑
}
@override
Widget build(BuildContext context) {
return RefreshIndicator(
key: _refreshKey, //自定义 key,需要通过 key 获取到对应的 State
onRefresh: _onRefresh,
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Container(),
));
}
默认情况下,当 ScrollView 包裹的内容太少时,是不会触发滚动事件的,这样也就不会触发下拉刷新。AlwaysScrollableScrollPhysics
则可以在这种情况下,触发滚动事件。
最后
如果想要成为架构师或想突破20~30K薪资范畴,那就不要局限在编码,业务,要会选型、扩展,提升编程思维。此外,良好的职业规划也很重要,学习的习惯很重要,但是最重要的还是要能持之以恒,任何不能坚持落实的计划都是空谈。
如果你没有方向,这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》,帮大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。
全套视频资料:
一、面试合集
二、源码解析合集
三、开源框架合集
欢迎大家一键三连支持,若需要文中资料,直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓