Android Seekbar 自定义UI：实现thumb与progress bar之间的间隙效果

以下分别给出安卓原生和Flutter端的常用实现方案，都可以实现你要的滑块与进度条之间留空隙的效果： #

方案1：安卓原生用系统SeekBar+自定义Drawable实现（成本最低） #

不需要重写绘制逻辑，仅调整配置即可实现：

• 先给SeekBar的progressDrawable设置三层结构的layer-list
• 已完成进度对应的item添加右padding，padding值就是你要的间隙宽度
• 关闭SeekBar自带的thumbOffset偏移，避免干扰间隙效果

示例进度条Drawable代码：

<!-- seekbar_progress.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层灰色背景轨道 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="4dp"/>
            <solid android:color="#E0E0E0"/>
            <size android:height="4dp"/>
        </shape>
    </item>
    <!-- 上层已完成进度，添加右padding留间隙 -->
    <item android:id="@android:id/progress"
        android:paddingRight="8dp"> <!-- 8dp就是间隙的宽度，可以自行调整 -->
        <clip>
            <shape>
                <corners android:radius="4dp"/>
                <solid android:color="#2196F3"/>
                <size android:height="4dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

布局文件引用：

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/seekbar_progress"
    android:thumb="@drawable/你自己的滑块drawable"
    android:thumbOffset="0dp"
    android:max="100"
    android:progress="30"/>

如果需要适配RTL从右到左布局，把paddingRight改成paddingEnd即可。 #

方案2：自定义View绘制（灵活度最高） #

如果需要搭配复杂动效、间隙动态调整的场景，可以自己重写绘制逻辑：

• 测量阶段提前定义好轨道高度、滑块尺寸、间隙宽度参数
• 绘制时先画背景轨道，再画已完成进度，进度终点 = 滑块当前x坐标 - 间隙宽度，不要直接画到滑块中心
• 最后在当前进度对应的x坐标绘制滑块即可
• 触摸滑动逻辑和普通自定义SeekBar完全一致，仅需要调整进度绘制的终点位置

Flutter端实现方案 #

如果是用Flutter的Slider组件，自定义轨道形状即可实现：

// 自定义带间隙的轨道形状
class GapSliderTrackShape extends RoundedRectSliderTrackShape {
  final double gap; // 间隙宽度
  GapSliderTrackShape({required this.gap});

  @override
  void paint(PaintingContext context, Offset offset,
      {required RenderBox parentBox,
      required SliderThemeData sliderTheme,
      required Animation<double> enableAnimation,
      required Offset thumbCenter,
      Offset? secondaryOffset,
      bool isEnabled = false,
      bool isDiscrete = false,
      required TextDirection textDirection}) {
    // 调整已完成进度的终点位置，减去间隙值
    final adjustedCenter = thumbCenter.translate(-gap, 0);
    super.paint(context, offset, 
        parentBox: parentBox,
        sliderTheme: sliderTheme,
        enableAnimation: enableAnimation,
        thumbCenter: adjustedCenter,
        secondaryOffset: secondaryOffset,
        isEnabled: isEnabled,
        isDiscrete: isDiscrete,
        textDirection: textDirection);
  }
}

使用时套在SliderTheme中即可：

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    trackShape: GapSliderTrackShape(gap: 8),
  ),
  child: Slider(
    value: _currentValue,
    onChanged: (value) => setState(() => _currentValue = value),
  ),
)

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