可拖动的滚动条，用于快速导航垂直列表

可拖动滚动条

一个可以拖动的滚动条，用于快速浏览垂直列表。此外，它可以在滚动条旁边显示标签，其中包含有关当前项目的信息，例如图片创建的日期

用法

您可以使用三个内置的滚动拇指中的一个，或者您可以为自己的应用程序创建一个自定义拇指！

您可以通过运行 example 文件夹中的应用程序来使用所有这些示例。

示例

半圆形拇指

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,
      ),
    );
  },
);

GitHub

https://github.com/fluttercommunity/flutter-draggable-scrollbar