如何在颤动中更改滑块的填充或高度？答案

【问题标题】：how to change padding or height in slider in flutter?如何在颤动中更改滑块的填充或高度？
【发布时间】：2022-01-09 21:04:25
【问题描述】：

我想改变滑块的高度或内边距，我不知道属性是什么。但我可以删除两边的边距和圆形边框，但我不知道如何删除填充 link

SliderTheme(
  data: SliderThemeData(
    disabledActiveTrackColor: Colors.blue,
    disabledInactiveTrackColor: Colors.black12,
    trackHeight: 3,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 0.0),
    trackShape: RoundSliderTrackShape(),
  ),
  child: Slider(
    value: 10,
    onChanged: null,
    min: 0,
    max: 100,
  ),
),

我使用RoundSliderTrackShape类去除两边的边距和圆角的边框

【问题讨论】：

标签： flutter

【解决方案1】：

此代码 sn-p 将帮助您删除滑块的高度和填充。

Container(
            height: 10,
            child: SliderTheme(
              data: SliderThemeData(
                  trackHeight: 3,
                  thumbShape: SliderComponentShape.noThumb,
                trackShape: SliderCustomTrackShape()
              ),
              child: Slider(
                  value: 90,
                  min: 0,
                  max: 100,
                  divisions: 100,
                  activeColor: primaryColorFFF000,
                  inactiveColor: Colors.grey.withOpacity(.4),
                  label: '50',
                  onChanged: (double newValue) {

                  },
                  semanticFormatterCallback: (double newValue) {
                    return '${newValue.round()}';
                  }),
            ),
          )

移除滑块的内边距SliderCustomTrackShape

class SliderCustomTrackShape
    extends RoundedRectSliderTrackShape {
  Rect getPreferredRect({
    required RenderBox parentBox,
    Offset offset = Offset.zero,
    required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double? trackHeight = sliderTheme.trackHeight;
    final double trackLeft = offset.dx;
    final double trackTop =
        offset.dy + (parentBox.size.height - trackHeight!) / 2;
    final double trackWidth = parentBox.size.width;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }
}

预览

【讨论】：

【解决方案2】：

我不完全确定您在问什么，但如果您想知道如何更改滑块的高度，您可以使用 trackHeight 属性：

SliderTheme(
      data: SliderThemeData(
        disabledActiveTrackColor: Colors.blue,
        disabledInactiveTrackColor: Colors.black12,
        trackHeight: 15, //<------Change this number here to change the height----
        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 0.0),
        trackShape: RoundSliderTrackShape(),
      ),
      child: Slider(
        value: 10,
        onChanged: null,
        min: 0,
        max: 100,
      ),
    );

【讨论】：

是的，我知道，然后是填充 link

【解决方案3】：

用容器包裹滑块并给出宽度和高度。

 Container(
                height: 20,
                color: Colors.red,
                width: 300,
                child: Slider(
                    value: 10,
                    activeColor:Colors.green,
                    min: 0,
                    max: 30,
                    inactiveColor:Colors.grey[400],
                 
                ),
              ),

【讨论】：