如何让Flutter Slider滑块两侧的轨道高度保持一致

Flutter Slider组件的激活侧轨道、非激活侧轨道高度默认使用独立的参数控制，仅配置全局trackHeight属性不会强制两者高度对齐，可通过以下两种方案解决：

方案1：显式配置轨道高度参数 #

在SliderThemeData中同时指定activeTrackHeight和inactiveTrackHeight为相同数值即可，代码示例：

SliderTheme(
  data: SliderThemeData(
    // 两个参数设为相同值，强制激活、非激活轨道高度一致
    activeTrackHeight: 4.0,
    inactiveTrackHeight: 4.0,
    // 保留你的原有配置
    activeTrackColor: Colors.blue,
    inactiveTrackColor: Colors.grey.shade300,
    // 其他SliderTheme配置...
  ),
  child: Slider(
    value: currentSliderValue,
    min: 0,
    max: 100,
    onChanged: (value) {
      // 你的数值更新逻辑
    },
  ),
)

如果你使用Material 3风格的Slider，需额外将secondaryActiveTrackHeight参数设置为相同高度，避免分段轨道场景下高度异常。

方案2：自定义轨道形状（适用复杂自定义需求） #

如果参数配置无法满足需求，可通过重写SliderTrackShape的绘制逻辑，强制所有轨道区域使用统一高度，示例代码：

class UniformHeightSliderTrackShape extends RoundedRectSliderTrackShape {
  @override
  Rect getPreferredRect({
    required RenderBox parentBox,
    Offset offset = Offset.zero,
    required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final trackHeight = sliderTheme.trackHeight ?? 4.0;
    final trackLeft = offset.dx;
    final trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
    final trackWidth = parentBox.size.width;
    // 返回全局统一高度的轨道绘制区域
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }
}

在SliderThemeData中指定自定义的轨道形状即可：

SliderThemeData(
  trackShape: UniformHeightSliderTrackShape(),
  trackHeight: 4.0,
  // 其他配置...
)

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