Flutter - Slider的使用

要实现下图这样的滑块效果:
在这里插入图片描述
代码如下:

                Container(
                    margin: EdgeInsets.only(top: 15),
                    height: 12,
                    child: SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        activeTrackColor: ColorFF3075EE,
                        inactiveTrackColor: Color1A3075EE,
                        trackHeight: 2,
                        thumbColor: ColorFF3075EE,
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 6),
                        overlayShape: SliderComponentShape.noOverlay,
                      ),
                      child: Slider(
                        value: sliderValue,
                        onChanged: (value) {
                          print(value);
                        },
                        min: sliderMin,
                        max: sliderMax,
                      ),
                    )),

下面介绍下slider的属性

属性含义
value当前值
onChanged值改变,用户设置新值时就调用
onChangeStart用户将要更改值时调用
onChangeEnd用户已经更改值时调用
min最小值
max最大值
activeColor左侧颜色
inactiveColor右侧颜色
divisions步长,如果为null,表示滑块值可以是任意值,是连续的

SliderTheme可以更灵活的设置滑块样式

属性含义
trackHeight滑条高度
thumbColor滑块颜色
activeColor左侧颜色
inactiveColor右侧颜色
thumbShape滑块形状
overlayShape滑块周围的颜色,设置成SliderComponentShape.noOverlay 表示不显示
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页