Flutter中slider进度条的调整方法

最新推荐文章于 2024-02-28 20:52:29 发布

Zh-jie

最新推荐文章于 2024-02-28 20:52:29 发布

阅读量690

点赞数 6

文章标签： flutter

本文链接：https://blog.csdn.net/zzj17637822814/article/details/135213804

版权

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    trackHeight: 4.0, // 调整进度条轨道的高度
    thumbShape: RoundSliderThumbShape(
      enabledThumbRadius: 8.0, // 调整滑块的大小
    ),
    overlayShape: RoundSliderOverlayShape(
      overlayRadius: 16.0, // 调整滑块覆盖层的大小
    ),
    tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 4.0), // 调整刻度标记的大小
    trackShape: RectangularSliderTrackShape(), // 使用矩形轨道形状
    trackMargin: EdgeInsets.all(0), // 设置轨道的内边距为0
    overlayColor: Colors.red.withOpacity(0.2), // 设置滑块覆盖层的颜色和透明度
    activeTrackColor: Colors.red, // 设置活动进度条的颜色
    inactiveTrackColor: Colors.grey, // 设置非活动进度条的颜色
    thumbColor: Colors.red, // 设置滑块的颜色
    tickMarkColor: Colors.red, // 设置刻度标记的颜色
  ),
  child: Slider(
    value: _sliderValue,
    onChanged: (value) {
      setState(() {
        _sliderValue = value;
      });
    },
    label: '${(_sliderValue * 100).toStringAsFixed(0)}%',//进度条上面的小弹窗
    divisions: 10,
  ),
),