如何均匀地更改 Flutter 中滑块的轨道高度？

Question

我的代码：

          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: SliderTheme(
              data: SliderTheme.of(context).copyWith(
                inactiveTrackColor: Color(0xff8d8e98),
                activeTrackColor: Colors.white,
                thumbColor: Color(0xffeb1555),
                overlayColor: Color(0x29eb1555),
                thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15),
                overlayShape: RoundSliderOverlayShape(overlayRadius: 30),
                trackHeight: 2,                                             
              ),
              child: Slider(
                value: 183,
                min: 10,
                max: 270,
                onChanged: (double value) {},
              ),
            ),
          ),

我懂了：

我期待这个：

我怎么才能得到它？

Answer 1

如果您必须专门使用 ，RoundedRectSliderTrackShape()因为您需要圆角边缘，则只需创建CustomTrackShape()并将 的值覆盖additionalActiveTrackHeight为 0。

class CustomTrackShape extends RoundedRectSliderTrackShape {
 
  @override
  void paint(PaintingContext context, Offset offset,
      {required RenderBox parentBox,
      required SliderThemeData sliderTheme,
      required Animation<double> enableAnimation,
      required TextDirection textDirection,
      required Offset thumbCenter,
      bool isDiscrete = false,
      bool isEnabled = false,
      double additionalActiveTrackHeight = 2}) {

    super.paint(context, offset,
        parentBox: parentBox,
        sliderTheme: sliderTheme,
        enableAnimation: enableAnimation,
        textDirection: textDirection,
        thumbCenter: thumbCenter,
        isDiscrete: isDiscrete,
        isEnabled: isEnabled,
        additionalActiveTrackHeight: 0);
  }

}

Answer 2

这有点晚了，但是，因为我刚刚自己解决了这个问题，我认为它对其他人有用：

您应该在 SliderTheme 数据中包含以下内容：

trackShape: RectangularSliderTrackShape(),

就是这样，您将获得具有相同高度的活动和非活动轨道！