Flutter实现Google Photos风格自定义Scrollbar的方法

嘿，我来帮你拆解一下实现Google Photos风格滚动相册的自定义Scrollbar问题～

一、核心思路：用ScrollbarPainter自定义绘制 #

没错，要做出带箭头和日期提示框的Scrollbar，确实需要通过继承ScrollbarPainter来创建自定义的Scrollbar类——默认系统Scrollbar没有这些定制化元素，必须自己动手绘制。具体可以分成这几步：

1. 继承ScrollbarPainter，重写paint方法 #

你需要在paint方法里完成三个核心绘制逻辑：

• 基础滚动滑块（thumb）：先画一个圆角矩形作为基底，对齐Google Photos的简约风格
• 上下箭头图标：在滑块的顶部和底部绘制箭头，提示滚动方向；可以用Canvas.drawPath画矢量箭头，也可以直接绘制本地图标资源
• 日期提示框：根据当前滚动位置对应的相册日期，在滑块旁绘制带圆角的半透明提示框，里面填充日期文本。这里需要结合滚动偏移量计算对应的数据，再把文本定位到合适位置

2. 关联可滚动组件 #

自定义Scrollbar需要和ListView/GridView这类组件绑定，用RawScrollbar包裹你的滚动组件，把自定义的ScrollbarPainter传给它的painter参数即可。

二、拖拽支持：默认自带，无需额外实现Draggable #

好消息是，基于ScrollbarPainter实现的自定义Scrollbar，配合RawScrollbar使用时默认就支持拖拽滑块滚动，不需要自己去实现Draggable。RawScrollbar已经封装了完整的拖拽交互逻辑，会自动把拖拽事件转化为滚动偏移量，传递给对应的可滚动组件。

不过要注意，如果你的滚动组件是自定义实现的（不是系统自带的ListView/GridView），需要确保它正确实现了ScrollableState的相关接口，这样RawScrollbar才能正常关联并触发滚动。

三、关键代码示例 #

给你一个简化版的代码框架，帮你快速上手：

class GooglePhotosScrollbarPainter extends ScrollbarPainter {
  final String currentDate;
  final Color arrowColor;

  GooglePhotosScrollbarPainter({
    required super.controller,
    required super.childContext,
    required this.currentDate,
    required this.arrowColor,
    super.thumbVisibility,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 1. 绘制基础滑块
    final thumbRect = Rect.fromLTWH(
      size.width - 8, // 滑块距离右侧的间距
      _getThumbOffset(), // 根据滚动位置计算滑块垂直偏移
      6, // 滑块宽度
      _getThumbSize(), // 根据滚动范围计算滑块高度
    );
    canvas.drawRRect(
      RRect.fromRectAndRadius(thumbRect, Radius.circular(3)),
      Paint()..color = Colors.grey.shade700,
    );

    // 2. 绘制上下箭头
    // 顶部箭头
    final topArrowPath = Path()
      ..moveTo(size.width - 5, thumbRect.top - 10)
      ..lineTo(size.width - 8, thumbRect.top - 15)
      ..lineTo(size.width - 2, thumbRect.top - 15)
      ..close();
    canvas.drawPath(topArrowPath, Paint()..color = arrowColor);

    // 底部箭头
    final bottomArrowPath = Path()
      ..moveTo(size.width - 5, thumbRect.bottom + 10)
      ..lineTo(size.width - 8, thumbRect.bottom + 15)
      ..lineTo(size.width - 2, thumbRect.bottom + 15)
      ..close();
    canvas.drawPath(bottomArrowPath, Paint()..color = arrowColor);

    // 3. 绘制日期提示框
    final textPainter = TextPainter(
      text: TextSpan(text: currentDate, style: TextStyle(color: Colors.white, fontSize: 12)),
      textDirection: TextDirection.ltr,
    )..layout();
    final bubbleRect = Rect.fromLTWH(
      size.width - 8 - textPainter.width - 12,
      thumbRect.center.dy - textPainter.height / 2,
      textPainter.width + 12,
      textPainter.height + 8,
    );
    // 绘制提示框背景
    canvas.drawRRect(
      RRect.fromRectAndRadius(bubbleRect, Radius.circular(4)),
      Paint()..color = Colors.black54,
    );
    // 绘制日期文本
    textPainter.paint(canvas, Offset(bubbleRect.left + 6, bubbleRect.top + 4));
  }

  // 计算滑块偏移量的辅助方法
  double _getThumbOffset() {
    // 根据滚动控制器的offset计算，实际需结合滚动范围做边界处理
    return controller.offset / controller.position.maxScrollExtent * (size.height - _getThumbSize());
  }

  // 计算滑块高度的辅助方法
  double _getThumbSize() {
    // 根据滚动内容长度和视图高度的比例计算，确保滑块不会过小
    final viewportHeight = (childContext.findRenderObject() as RenderBox).size.height;
    final contentHeight = controller.position.maxScrollExtent + viewportHeight;
    return max(40, viewportHeight * viewportHeight / contentHeight);
  }
}

使用时这样包裹你的滚动组件：

RawScrollbar(
  painter: GooglePhotosScrollbarPainter(
    controller: _scrollController,
    childContext: context,
    currentDate: _getCurrentDate(), // 根据滚动位置获取对应日期的自定义方法
    arrowColor: Colors.grey.shade500,
  ),
  child: ListView.builder(
    controller: _scrollController,
    itemCount: photoList.length,
    itemBuilder: (context, index) => PhotoItem(photo: photoList[index]),
  ),
)

四、额外优化点 #

• 日期提示框显示时机：可以只在用户拖拽滑块或滚动时显示，静止时隐藏，通过监听ScrollController的滚动状态控制
• 箭头交互反馈：拖拽滑块时改变箭头颜色/透明度，提升体验
• 多屏幕适配：确保滑块大小、箭头位置在不同设备上都能正常显示

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