如何使用Flutter实现带0/15/50/500自定义刻度的距离选择水平Slider

你需要实现的是非均匀离散刻度的滑块组件，对应0、15、50、500四个固定可选值，有两种成熟的实现方案可选：

方案1：基于官方Slider组件改造（开发成本最低） #

核心逻辑是把官方Slider的线性值和你的目标刻度做映射，仅自定义轨道的刻度绘制逻辑，不需要重写交互：

• 先定义固定刻度数组：final List<double> distanceScales = [0, 15, 50, 500];，Slider内部使用0~3的下标作为实际值，展示时映射为对应刻度的距离数值
• 配置Slider的divisions: 3，强制滑块只能停在4个固定点位，避免连续滑动
• 自定义SliderTheme的trackShape属性，继承RoundedRectSliderTrackShape重写paint方法，在4个刻度对应的位置绘制自定义刻度线和数值标签
• 滑块选择值的展示直接取下标对应的刻度值即可，示例核心代码：

double _selectedIndex = 0;

@override
Widget build(BuildContext context) {
  return SliderTheme(
    data: SliderThemeData(
      trackShape: CustomTrackShape(distanceScales: distanceScales),
      // 可自行配置thumbShape、activeTrackColor等样式参数
    ),
    child: Slider(
      value: _selectedIndex,
      min: 0,
      max: 3,
      divisions: 3,
      label: '${distanceScales[_selectedIndex.toInt()]}m',
      onChanged: (val) {
        setState(() {
          _selectedIndex = val;
        });
      },
    ),
  );
}

该方案复用了官方Slider的所有交互逻辑（拖动、点击跳转、语义化支持等），只需要实现自定义刻度绘制，适合大多数需求场景

方案2：全自定义Slider组件（灵活度最高） #

如果官方Slider的样式限制无法满足设计要求，可以用CustomPaint完全自主实现整个组件：

• 先计算4个刻度对应的屏幕X轴坐标，用CustomPaint绘制轨道、刻度线、数值标签、滑块
• 监听GestureDetector的水平拖动、点击事件，计算触摸位置对应的最近刻度下标，更新滑块位置
• 可额外添加滑块滑动的过渡动画，优化交互体验
  该方案可以100%还原设计稿的所有细节，缺点是需要自行处理所有交互逻辑，开发成本更高

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