Flutter中实现水平可拖动滚动条或列表两端滑动按钮的方法

一、改造draggable_scrollbar实现水平滚动条 #

原包的核心逻辑是针对垂直滚动设计的，改成水平只需要把所有垂直方向相关的计算替换为水平方向即可：

1. 调整滚动方向参数：使用DraggableScrollbar时，将内部ListView/GridView的scrollDirection设为Axis.horizontal，同时修改DraggableScrollbar源码里的滚动方向判断逻辑，支持水平方向。
2. 替换坐标与尺寸计算：
   • 把拖动回调里的offset.dy改成offset.dx；
   • 滚动位置计算时，保持用position.extentBefore（水平场景下代表已滚动的宽度占比）；
   • 滚动视图的尺寸取position.viewportDimension（水平场景下对应宽度），thumb的布局属性从top换成left。
3. 关键代码修改示例：
   在拖动回调里替换计算逻辑：

   // 原垂直拖动逻辑
   // final double scrollOffset = position.minScrollExtent + (position.maxScrollExtent - position.minScrollExtent) * (details.localPosition.dy / _trackSize);
   // 修改为水平逻辑
   final double scrollOffset = position.minScrollExtent + (position.maxScrollExtent - position.minScrollExtent) * (details.localPosition.dx / _trackSize);
   await controller.animateTo(scrollOffset, duration: Duration(milliseconds: 100), curve: Curves.linear);
   

   调整thumb的布局：

   // 原垂直thumb位置
   // Positioned(top: _thumbOffset, right: 2.0, child: _buildThumb())
   // 修改为水平
   Positioned(left: _thumbOffset, bottom: 2.0, child: _buildThumb())
   

二、给列表添加两端滑动控制按钮 #

如果不想修改源码，直接给水平列表加左右按钮控制滚动更快捷：

1. 初始化滚动控制器：

   final ScrollController _scrollController = ScrollController();
   

2. 组合布局结构：用Stack把水平ListView和左右按钮放在一起，按钮固定在列表两端：

   Stack(
     alignment: Alignment.center,
     children: [
       ListView.builder(
         controller: _scrollController,
         scrollDirection: Axis.horizontal,
         itemCount: 20,
         itemBuilder: (context, index) => Container(
           width: 150,
           height: 100,
           margin: EdgeInsets.symmetric(horizontal: 8),
           color: Colors.blue[100 * (index % 9)],
           child: Center(child: Text('Item $index')),
         ),
       ),
       // 左滑动按钮
       Positioned(
         left: 10,
         child: ElevatedButton(
           onPressed: _scrollController.hasClients && _scrollController.offset > 0
               ? () {
                   _scrollController.animateTo(
                     _scrollController.offset - 300,
                     duration: Duration(milliseconds: 300),
                     curve: Curves.easeInOut,
                   );
                 }
               : null,
           child: Icon(Icons.arrow_back_ios),
         ),
       ),
       // 右滑动按钮
       Positioned(
         right: 10,
         child: ElevatedButton(
           onPressed: _scrollController.hasClients && _scrollController.offset < _scrollController.position.maxScrollExtent
               ? () {
                   _scrollController.animateTo(
                     _scrollController.offset + 300,
                     duration: Duration(milliseconds: 300),
                     curve: Curves.easeInOut,
                   );
                 }
               : null,
           child: Icon(Icons.arrow_forward_ios),
         ),
       ),
     ],
   )
   

3. 优化体验：通过判断滚动位置，在列表到达两端时禁用对应按钮，避免无效操作。

内容的提问来源于stack exchange，提问作者Aquarius_Girl