Flutter教學(xué)目錄持續(xù)更新中
Github源代碼持續(xù)更新中
1.NotificationListener介紹
widget通知監(jiān)聽
2.NotificationListener屬性
- child：widget
- onNotification：NotificationListenerCallback<Notification>秀菱，返回值true表示消費(fèi)掉當(dāng)前通知不再向上一級NotificationListener傳遞通知，false則會再向上一級NotificationListener傳遞通知；這里需要注意的是通知是由下而上去傳遞的瘾敢，所以才會稱作冒泡通知
3.ScrollNotification
ScrollNotification是一個抽象類咙鞍，它的子類還有：
- ScrollStartNotification：滑動開始通知
- ScrollUpdateNotification：滑動中通知箫柳，滑動過程中會一直回調(diào)
- ScrollEndNotification：滑動結(jié)束通知
- OverscrollNotification：滑動位置未改變通知镀脂，這個一般只有在滑動到列表邊界才會回調(diào)苍碟，且需要設(shè)置不可越界酒觅，即physics為ClampingScrollPhysics，這里要注意安卓默認(rèn)是這樣微峰，但是ios平臺默認(rèn)是彈性邊界
- UserScrollNotification：用戶滑動通知舷丹，這個跟ScrollUpdateNotification的區(qū)別是他指揮有滑動開始后以及滑動結(jié)束后回調(diào)
4.Notification.ScrollMetrics屬性
- pixels：當(dāng)前絕對位置
- atEdge：是否在頂部或底部
- axis：垂直或水平滾動
- axisDirection：滾動方向描述是down還是up，這個受列表reverse影響蜓肆，正序就是down倒序就是up颜凯，并不代表列表是上滑還是下滑
- extentAfter：視口底部距離列表底部有多大
- extentBefore：視口頂部距離列表頂部有多大
- extentInside：視口范圍內(nèi)的列表長度
- maxScrollExtent：最大滾動距離，列表長度-視口長度
- minScrollExtent：最小滾動距離
- viewportDimension：沿滾動方向視口的長度
- outOfRange：是否越過邊界
4.使用
_myChild() {
return ListView.builder(
itemBuilder: (context, index) => ListTile(title: Text('item $index')),
itemCount: 30,
reverse: true,
// physics: BouncingScrollPhysics(),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('NotificationListener'),
),
body: NotificationListener<ScrollNotification>(
onNotification: (notification) {
ScrollMetrics metrics = notification.metrics;
print('ScrollNotification####################');
print('pixels = ${metrics.pixels}');
print('atEdge = ${metrics.atEdge}');
print('axis = ${metrics.axis}');
print('axisDirection = ${metrics.axisDirection}');
print('extentAfter = ${metrics.extentAfter}');
print('extentBefore = ${metrics.extentBefore}');
print('extentInside = ${metrics.extentInside}');
print('maxScrollExtent = ${metrics.maxScrollExtent}');
print('minScrollExtent = ${metrics.minScrollExtent}');
print('viewportDimension = ${metrics.viewportDimension}');
print('outOfRange = ${metrics.outOfRange}');
print('ScrollNotification####################');
return false;
},
child: NotificationListener<ScrollUpdateNotification>(
onNotification: (notification) {
print('ScrollUpdateNotification####################');
return false;
},
child: NotificationListener<OverscrollNotification>(
onNotification: (notification) {
print('OverscrollNotification####################');
return false;
},
child: NotificationListener<ScrollStartNotification>(
onNotification: (notification) {
print('ScrollStartNotification####################');
return false;
},
child: NotificationListener<ScrollEndNotification>(
onNotification: (notification) {
print('ScrollEndNotification####################');
return false;
},
child: _myChild(),
),
),
),
),
),
);
}
image.png
5.系統(tǒng)提供的其他Notification
Notification是所有通知監(jiān)聽的頂級父類仗扬，它的子類有：
- LayoutChangedNotification：這是一個空實(shí)現(xiàn)子類装获，他的子類有ScrollNotification，SizeChangedLayoutNotification
- SizeChangedLayoutNotification：這是一個空實(shí)現(xiàn)子類厉颤，一般不會用到
- DraggableScrollableNotification：DraggableScrollableSheet的拖拽通知穴豫，這個后面再介紹
- OverscrollIndicatorNotification：這是滑動指示器的通知監(jiān)聽，例如Scrollbar逼友，需要注意的是這個只有在滑動到頭部或者尾部才會回調(diào)精肃，而且滑動布局也需要是不可越界的，即physics為ClampingScrollPhysics
這里的代碼就在上期Flutter（82）：Scroll組件之Scrollbar上修改一下：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Scrollbar'),
),
body: NotificationListener<OverscrollIndicatorNotification>(
onNotification: (notification) {
//滑動指示器是否在頭部 true在前端帜乞，false在末端
print('${notification.leading}');
return true;
},
child: Scrollbar(
radius: Radius.circular(10),
thickness: 10,
child: ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text('item $index'),
);
},
itemCount: 30,
),
),
),
);
}
- KeepAliveNotification：這個留意過列表復(fù)用的源碼的話司抱，例如ListView，就會知道addAutomaticKeepAlives就是使用這個來保存狀態(tài)的
6.自定義Notification
這里我們做個簡單的演示
body: NotificationListener<_CustomNotification>(
onNotification: (notification) {
print('1 ${notification.msg}');
return true;
},
child: NotificationListener<_CustomNotification>(
onNotification: (notification) {
print('2 ${notification.msg}');
return true;
},
child: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
_CustomNotification('點(diǎn)擊了Button').dispatch(context);
},
child: Text('RaisedButton'),
);
}),
),
),
class _CustomNotification extends Notification {
_CustomNotification(this.msg);
final String msg;
}
image.png
這里在2級NotificationListener處消費(fèi)掉當(dāng)前的通知了黎烈，所以不再向1級NotificationListener傳遞通知了习柠，如果將2級NotificationListener處設(shè)置為false，則會傳遞
image.png
下一節(jié)：DraggableScrollableSheet照棋、DraggableScrollableNotification
