微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在Flutter中平均更改滑块的轨道高度?

如何解决如何在Flutter中平均更改滑块的轨道高度?

我的代码

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

我知道了:

bad

我期望这样:

OK

我如何得到它?

解决方法

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

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

trackShape: RectangularSliderTrackShape(),

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

,

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

}
,

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

你可以用

trackShape : RoundedRectSliderTrackShape()

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

double additionalActiveTrackHeight = 2,

double additionalActiveTrackHeight = 0,

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。