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

【问题标题】：How to evenly change track height for slider in Flutter?如何在 Flutter 中均匀地更改滑块的轨道高度？
【发布时间】：2020-12-11 03:00:42
【问题描述】：

我的代码：

          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) {},
              ),
            ),
          ),

我知道了：

我预料到了：

我怎样才能得到它？

【问题讨论】：

标签： flutter dart slider material-design

【解决方案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);
  }

}

【讨论】：

【解决方案2】：

你可以这样做

trackShape : RoundedRectSliderTrackShape()

.. 但您必须查看小部件内部并进行修改

double additionalActiveTrackHeight = 2,

到

double additionalActiveTrackHeight = 0,

小心，当你更新 Flutter 时，你的修改应该已经消失了，所以你必须再做一次。

【讨论】：

【解决方案3】：

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

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

trackShape: RectangularSliderTrackShape(),

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

【讨论】：

【解决方案4】：

只需将 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) {},
              ),
            ),
          ),

【讨论】：

这与两条轨道的高度不匹配。你能解释一下吗？