Flutter列表滾動定位超強輔助庫使用示例詳解
一、痛點
痛點一：Flutter 官方提供了 ScrollController，調用下方兩個方法可以滾動到指定偏移處
void jumpTo(double value)
Future<void> animateTo(
double offset, {
required Duration duration,
required Curve curve,
})
但是官方沒有提供滾動到指定下標位置的功能
痛點二：
為了解決痛點一，業(yè)內有很多第三方庫實現(xiàn)了這個功能，其中最知名的莫過于谷歌的 scrollable_positioned_list
而這些庫都有一些相同的問題：
- 侵入性強，必須使用他們提供的
Widget來構建列表視圖 - 不支持
GridView
對此，我決定自己編寫一個庫（flutter_scrollview_observer）來實現(xiàn)這個功能，以及解決以上的問題。
二、優(yōu)點
- 侵入性低，不會限制你的列表視圖實現(xiàn)，只要求將列表視圖做為
ViewObserver的child，如果不想用了，直接移除掉ViewObserver即可。 - 基于【不會限制你的列表視圖實現(xiàn)】這一點，
flutter_scrollview_observer支持所有的列表Widget，如:ListView、GridView，甚至CustomSrollView - 防抖動，如果在滾動到指定下標時，列表尾部的可滾動區(qū)域已不足以支撐滾動到相應位置，則會自動滾動到最底部，避免回彈的問題
下面正式介紹一下這個庫的使用
三、使用
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 內部實現(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
內容與 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 的選擇
建議使用相應的 ViewObserver：
- 如果是
ListView或者純SliverList，建議使用ListViewObserver - 如果是
GridView或者純SliverGrid，建議使用GridViewObserver - 如果是
SliverList和SliverGrid，則使用SliverViewObserver
這樣在 onObserve 回調中拿到數(shù)據(jù)模型后不用再對其進行類型判斷與轉換。
2、isFixedHeight
子部件為固定高度的情況下，請設置 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、獲得當前視窗中的子部件信息
如上圖控制臺所示，在滾動的過程中可以實時獲取正在顯示的子部件的數(shù)據(jù)。
2、視頻列表自動播放
這種功能很常見，在列表滾動的時候，指定區(qū)域內的被命中的視頻便會自動進行播放。
3、模塊定位
一般詳情頁中都會有的功能，在列表視圖滾動的時候，頂部定位導航視圖跟著更新下標，點擊導航視圖某個下標則會定位到對應的模塊
六、最后
如果這個庫對你很有幫助，請不吝給個 star 吧
GitHub: flutter_scrollview_observer
以上就是Flutter列表滾動定位超強輔助庫使用示例詳解的詳細內容，更多關于Flutter列表滾動定位輔助庫的資料請關注腳本之家其它相關文章！
相關文章
IOS開發(fā)OC代碼中創(chuàng)建Swift編寫的視圖控制器
這篇文章主要介紹了IOS開發(fā)OC代碼中創(chuàng)建Swift編寫的視圖控制器的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要給大家介紹了關于Objective-C中語法糖@{}究竟是什么的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
查詢時間有長有短，為了增強用戶體驗度，目前用的比較多的手段之一是查詢等待時添加一個動態(tài)等待效果，這篇文章主要介紹IOS等待時動畫效果的實現(xiàn)，有需要的朋友可以參考下2015-08-08
本篇文章主要介紹了淺談iOS關于頭文件的導入問題，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
這篇文章主要給大家介紹了關于iOS橫屏彈鍵盤的高度錯誤異常解決的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
本篇文章主要介紹了iOS實現(xiàn)視頻壓縮上傳實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
iOS AVCaptureSession實現(xiàn)視頻錄制功能
這篇文章主要為大家詳細介紹了iOS AVCaptureSession實現(xiàn)視頻錄制功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細介紹了較為完整的iOS新浪微博分享功能開發(fā)的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細介紹了iOS實現(xiàn)消息推送，及針對消息推送原理進行分析，感興趣的小伙伴們可以參考一下2016-08-08
通過UIKit坐標系來全面掌握iOS中的UIScrollView組件
iOS開發(fā)套件中的UIScrollView組件十分強大,不僅是滾動,縮放操作也能夠控制自如,其核心當然是坐標軸上的控制,下面就通過UIKit坐標系來全面掌握iOS中的UIScrollView組件2016-05-05