Flutter列表滾動定位超強輔助庫使用示例詳解
一、痛點
痛點一：Flutter 官方提供了 ScrollController，調(diào)用下方兩個方法可以滾動到指定偏移處
void jumpTo(double value)
Future<void> animateTo(
double offset, {
required Duration duration,
required Curve curve,
})
但是官方?jīng)]有提供滾動到指定下標位置的功能
痛點二：
為了解決痛點一，業(yè)內(nèi)有很多第三方庫實現(xiàn)了這個功能，其中最知名的莫過于谷歌的 scrollable_positioned_list
而這些庫都有一些相同的問題：
- 侵入性強，必須使用他們提供的
Widget來構(gòu)建列表視圖 - 不支持
GridView
對此，我決定自己編寫一個庫（flutter_scrollview_observer）來實現(xiàn)這個功能，以及解決以上的問題。
二、優(yōu)點
- 侵入性低，不會限制你的列表視圖實現(xiàn)，只要求將列表視圖做為
ViewObserver的child，如果不想用了，直接移除掉ViewObserver即可。 - 基于【不會限制你的列表視圖實現(xiàn)】這一點，
flutter_scrollview_observer支持所有的列表Widget，如:ListView、GridView，甚至CustomSrollView - 防抖動，如果在滾動到指定下標時，列表尾部的可滾動區(qū)域已不足以支撐滾動到相應(yīng)位置，則會自動滾動到最底部，避免回彈的問題
下面正式介紹一下這個庫的使用
三、使用
1、ListView
正常創(chuàng)建和使用 ScrollController 實例
這里你可以使用 ListView 或者 CustomSrollView 的 SliverList
ScrollController scrollController = ScrollController();
ListView _buildListView() {
return ListView.separated(
controller: scrollController,
...
);
}
創(chuàng)建 ListObserverController 實例并將其傳遞給 ListViewObserver
ListObserverController observerController = ListObserverController(controller: scrollController); ListViewObserver( controller: observerController, child: _buildListView(), ... )
注意：創(chuàng)建 ListObserverController 實例時需要傳入列表的 ScrollController 實例。 這一步很重要，因為 flutter_scrollview_observer 內(nèi)部實現(xiàn)原理是基于官方 ScrollController 提供的 jumpTo 和 animateTo 方法
現(xiàn)在即可滾動到指定下標位置了
// 無動畫滾動至下標位置 observerController.jumpTo(index: 100) // 動畫滾動至下標位置 observerController.animateTo( index: 100, duration: const Duration(seconds: 1), curve: Curves.ease, );
2、GridView
內(nèi)容與 ListView 基本一致
正常創(chuàng)建和使用 ScrollController 實例
Widget _buildGridView() {
return GridView.builder(
...
controller: scrollController,
...
);
}
創(chuàng)建 GridObserverController 實例并將其傳遞給 GridViewObserver
GridObserverController observerController = GridObserverController(controller: scrollController); GridViewObserver( controller: observerController, child: _buildGridView(), )
現(xiàn)在即可滾動到指定下標位置了
observerController.jumpTo( index: 40, ); observerController.animateTo( index: 40, duration: const Duration(seconds: 1), curve: Curves.ease, );
3、CustomSrollView
支持 SliverList 和 SliverGrid 混合使用的情況！
如上圖所示，CustomSrollView 的 slivers 中包含有 SliverList 和 SliverGrid
- 點擊右下角第一個按鈕可滾動到
SliverList的第29行 - 點擊第二個按鈕可滾動到
SliverGrid的第10的子部件所在行
正常創(chuàng)建和使用 ScrollController 實例
Widget _buildScrollView() {
return CustomScrollView(
controller: scrollController,
// scrollDirection: Axis.horizontal,
slivers: [
_buildSliverListView(),
_buildSliverGridView(),
],
);
}
正常創(chuàng)建你的 SliverList 和 SliverGrid，并將它們的 BuildContext 記錄起來
Widget _buildSliverListView() {
return SliverList(
delegate: SliverChildBuilderDelegate(
(ctx, index) {
_sliverListCtx ??= ctx;
...
},
...
),
);
}
Widget _buildSliverGridView() {
return SliverGrid(
...
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
_sliverGridCtx ??= context;
...
},
...
),
);
}
創(chuàng)建 SliverObserverController 實例并將其傳遞給 SliverViewObserver
注意：在 sliverListContexts 里返回剛才記錄的兩個 Sliver 的 BuildContext
SliverObserverController observerController = SliverObserverController(controller: scrollController);
SliverViewObserver(
controller: observerController,
child: _buildScrollView(),
sliverListContexts: () {
return [
if (_sliverListCtx != null) _sliverListCtx!,
if (_sliverGridCtx != null) _sliverGridCtx!,
];
},
...
),
現(xiàn)在即可滾動到指定下標位置了
observerController.animateTo( sliverContext: _sliverListCtx, index: 29, duration: const Duration(milliseconds: 300), curve: Curves.easeInOut, ); observerController.animateTo( sliverContext: _sliverGridCtx, index: 10, duration: const Duration(milliseconds: 300), curve: Curves.easeInOut, );
四、說明
1、ViewObserver 的選擇
建議使用相應(yīng)的 ViewObserver：
- 如果是
ListView或者純SliverList，建議使用ListViewObserver - 如果是
GridView或者純SliverGrid，建議使用GridViewObserver - 如果是
SliverList和SliverGrid，則使用SliverViewObserver
這樣在 onObserve 回調(diào)中拿到數(shù)據(jù)模型后不用再對其進行類型判斷與轉(zhuǎn)換。
2、isFixedHeight
子部件為固定高度的情況下，請設(shè)置 isFixedHeight 為 true，以提升性能！
observerController.jumpTo( index: 100, isFixedHeight: true ); observerController.animateTo( index: 100, isFixedHeight: true, duration: const Duration(seconds: 1), curve: Curves.ease, );
3、sliverContext 是否需要傳
jumpTo({
required int index,
BuildContext? sliverContext,
bool isFixedHeight = false,
})
animateTo({
required int index,
required Duration duration,
required Curve curve,
BuildContext? sliverContext,
bool isFixedHeight = false,
})
如上，jumpTo 和 animateTo 方法中都有一個 sliverContext 參數(shù)，這是用來指定哪個 sliver 進行滾動操作的。
如果不傳 sliverContext，則默認會是列表中的第一個 sliver，只有你想讓非第一個 sliver 進行滾動的時候才需要傳該值
五、可現(xiàn)實的功能
1、獲得當(dāng)前視窗中的子部件信息
如上圖控制臺所示，在滾動的過程中可以實時獲取正在顯示的子部件的數(shù)據(jù)。
2、視頻列表自動播放
這種功能很常見，在列表滾動的時候，指定區(qū)域內(nèi)的被命中的視頻便會自動進行播放。
3、模塊定位
一般詳情頁中都會有的功能，在列表視圖滾動的時候，頂部定位導(dǎo)航視圖跟著更新下標，點擊導(dǎo)航視圖某個下標則會定位到對應(yīng)的模塊
六、最后
如果這個庫對你很有幫助，請不吝給個 star 吧
GitHub: flutter_scrollview_observer
以上就是Flutter列表滾動定位超強輔助庫使用示例詳解的詳細內(nèi)容，更多關(guān)于Flutter列表滾動定位輔助庫的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
iOS實現(xiàn)點擊狀態(tài)欄自動回到頂部效果詳解
在IOS開發(fā)過程中，經(jīng)常會有這種需求，需要通過點擊狀態(tài)欄返回到頂部，給用戶更好的體驗效果，下面這篇文章給大家詳細介紹了實現(xiàn)過程，有需要的可以參考借鑒。2016-09-09
下面小編就為大家分享一篇用iOS模擬器安裝App的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家介紹了iOS開發(fā)image背景圖片拉伸問題解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
本篇文章主要介紹了iOS開發(fā)之類似朋友圈的社交界面實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
詳解 swift3.0 可選綁定共用同一塊內(nèi)存空間的實例
這篇文章主要介紹了詳解 swift3.0 可選綁定共用同一塊內(nèi)存空間的實例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要給大家介紹了關(guān)于iOS實現(xiàn)換膚功能的簡單處理框架，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要為大家介紹了Flutter CustomPaint自定義繪畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了IOS 靜態(tài)庫和Framework區(qū)別的相關(guān)資料,這里對動態(tài)庫與靜態(tài)庫做比較，選擇什么時候使用庫文件，需要的朋友可以參考下2016-12-12
iOS 使用UITextField自定義搜索框 實現(xiàn)用戶輸入完之后“實時搜索”功能
這篇文章主要介紹了iOS 使用UITextField自定義搜索框 實現(xiàn)用戶輸入完之后“實時搜索”功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
下面小編就為大家分享一篇IOS 仿Android吐司提示框的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12