flutter pub add draggable_scrollbar基于插件公开信息、社区数据与项目使用情况整理的选型参考。
draggable_scrollbar 包通过提供一个可拖动的滚动条以及一个可选的标签来增强 Flutter 中垂直列表的导航体验，该标签会显示当前可见项目的相关信息。用户可以通过拖动滚动条滑块快速滚动长列表，从而提升可用性和可访问性。标签会动态更新以反映当前位置，提供视觉反馈。该包专为与 ListView 及其他可滚动控件无缝集成而设计，支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
A scrollbar that can be dragged for quickly navigation through a vertical list. Additionaly it can show label next to scrollthumb with information about current item, for example date of picture created
You can use one of the three built-in scroll thumbs, or you can create a custom thumb for your own app!
You can play with all of these examples by running the app found in the example folder.
DraggableScrollbar.semicircle(
controller: myScrollController,
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
),
controller: myScrollController,
padding: EdgeInsets.zero,
itemCount: 1000,
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.all(2.0),
color: Colors.grey[300],
);
},
),
);
DraggableScrollbar.arrows(
labelTextBuilder: (double offset) => Text("${offset ~/ 100}"),
controller: myScrollController,
child: ListView.builder(
controller: myScrollController,
itemCount: 1000,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.purple[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),
);
DraggableScrollbar.rrect(
controller: myScrollController,
child: ListView.builder(
controller: myScrollController,
itemCount: 1000,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.green[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),
);
DraggableScrollbar(
controller: myScrollController,
child: ListView.builder(
controller: myScrollController,
itemCount: 1000,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.cyan[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),
heightScrollThumb: 48.0,
backgroundColor: Colors.blue,
scrollThumbBuilder: (
Color backgroundColor,
Animation<double> thumbAnimation,
Animation<double> labelAnimation,
double height, {
Text labelText,
}) {
return FadeTransition(
opacity: thumbAnimation,
child: Container(
height: height,
width: 20.0,
color: backgroundColor,
),
);
},
);