如何在 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

只需将 trackHeight 更新为 1。这样会更好。

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: 1,                                             
              ),
              child: Slider(
                value: 183,
                min: 10,
                max: 270,
                onChanged: (double value) {},
              ),
            ),
          ),

Answer 2

这有点晚了，但是，正如我自己解决的那样，我认为它可能对其他人有用：

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

trackShape: RectangularSliderTrackShape(),

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

Answer 3

你可以用

trackShape : RoundedRectSliderTrackShape()

..但你必须查看小部件内部并修改

double additionalActiveTrackHeight = 2,

至

double additionalActiveTrackHeight = 0,

注意，当你更新 Flutter 时，你的修改应该没有了，所以你必须重新做。

Answer 4

如果您必须使用 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);
  }

}

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

How to evenly change track height for slider in Flutter?

slider

dart

material-design

flutter