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

How to evenly change track height for slider in Flutter?

提问人:Ουιλιαμ Αρκευα 提问时间:8/22/2020 更新时间:7/22/2021 访问量:4526

问:

我的代码:

          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

我怎样才能得到它?

Flutter Dart 滑 材料设计

评论


答:

4赞 Ravi Garg 8/22/2020 #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) {},
              ),
            ),
          ),

评论

0赞 Zihan 10/10/2021
这与两条轨道的高度不匹配。你能解释一下吗?
21赞 Jorgercg 1/19/2021 #2

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

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

trackShape: RectangularSliderTrackShape(),

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

-1赞 Jerbs 3/6/2021 #3

你可以用

trackShape : RoundedRectSliderTrackShape()

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

double additionalActiveTrackHeight = 2,

double additionalActiveTrackHeight = 0,

请注意,当你更新 Flutter 时,你的修改应该消失了,所以你必须再做一次。

评论

0赞 nagendra nag 3/31/2022
你知道我们如何更新 Flutter 默认代码吗?
0赞 Jerbs 3/31/2022
@TheMisplacedMechEngineer检查上面的答案,他给出的答案比我好
0赞 nagendra nag 3/31/2022
是的!。我试过了,但出现错误。
0赞 Jerbs 3/31/2022
试试看import 'package:intl/intl.dart' hide TextDirection;
0赞 nagendra nag 3/31/2022
遇到同样的问题
14赞 TheMisplacedMechEngineer 7/22/2021 #4

如果必须使用圆角边缘,则只需创建一个并覆盖 to 0 的值。RoundedRectSliderTrackShape()CustomTrackShape()additionalActiveTrackHeight

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);
  }

}

评论

0赞 nagendra nag 3/31/2022
当我使用此代码时,我遇到错误。Error: The argument type 'TextDirection/*1*/' can't be assigned to the parameter type 'TextDirection/*2*/'. - 'TextDirection/*1*/' is from 'package:intl/src/intl/text_direction.dart' ('../../.pub-cache/hosted/pub.dartlang.org/intl-0.17.0/lib/src/intl/text_direction.dart'). - 'TextDirection/*2*/' is from 'dart:ui'. textDirection: textDirection,
0赞 nagendra nag 3/31/2022
现在工作正常。以前我写过同一个文件。当我将代码更改为新文件时,此问题已解决。