Flutter 中 Slider、RangeSlider、CupertinoSlider 的使用详解 | Flutter Widgets

这是我参与更文挑战的第30天，活动详情查看： 更文挑战

前言

上一篇我们聊了各种进度指示器的使用，在播放器场景下，不光有进度条还应该有滑动条来拖动进度，以及在其他设置场景，比如亮度设置等都需要用到滑动条，今天我们就看看在 Fluttter 当中各种滑动条的使用吧。

看效果

Slider（滑动条）

简单使用

这里使用一个最简单的 Slider 有两个必传参数，value（当前进度） 和 onChange（拖动改变后的进度）

// 当前进度
double progress = 0.5;
// 滑动条 Widget
Slider(
  value: progress,
  onChanged: (value) {
    // 拖动改变进度
    print('onChanged:$value');
    setState(() {
      progress = value;
    });
  },
)

📢注意：改变后的值需要通过刷新才可以更新到 UI 上哦，不然无法拖动

• 展示效果

参数调配

这里我们是默认的一个样式，通常我们品牌化的设计风格都是需要自定义的，接下来就一起看看哪些参数可以调配吧。

看源码

这里我们就暂时关心以下几个参数即可，具体效果展示，稍后都会一一展示出来。

• value （当前进度）必传参数
• min（最小值），value >= min
• max（最大值），value <= max
• onChanged（拖动改变时的回调）必传参数
• onChangedStart（拖动改变开始的回调）
• onChangedEnd（拖动改变结束的回调）很有用哦
• divisions 分割为几个部分
• label 标签
• activeColor 进度颜色
• inactiveColor 背景颜色

设置进度与最大值、最小值

看源码默认进度范围是0到1之间，当然我们也是可以自定义的

double progress2 = 0;
Slider(
  // 设置进度
  value: progress2,
  // 设置最小值
  min: 0,
  // 设置最大值
  max: 100,
  onChanged: (value) {
    print('onChanged:$value');
    setState(() {
      progress2 = value;
    });
  },
)

设置分割和标签

Slider(
  value: progress2,
  min: 0,
  max: 100,
  // 设置分割数量
  divisions: 8,
  // 设置标签
  label: '$progress2',
  onChanged: (value) {
    print('onChanged:$value');
    setState(() {
      progress2 = value;
    });
  },
)

• 显示效果

这里的 label 仅有设置了 divisions 才可以显示出来，也可以通过 SliderTheme 的 showValueIndicator 设置都显示

设置标签一直显示

SliderTheme(
  data: SliderThemeData(
    showValueIndicator: ShowValueIndicator.always,
  ),
  child: Slider(
    value: progress2,
    min: 0,
    max: 100,
    label: '$progress2',
    onChanged: (value) {
      print('onChanged:$value');
      setState(() {
        progress2 = value;
      });
    },
  ),
)

这里我们通过 SliderTheme widget 来嵌套一下，然后设置总是显示，具体还是需要多看看源码

设置颜色

Slider(
  value: progress2,
  min: 0,
  max: 100,
  // 设置颜色
  activeColor: Colors.red,
  inactiveColor: Colors.green,
  label: '$progress2',
  onChanged: (value) {
    print('onChanged:$value');
    setState(() {
      progress2 = value;
    });
  },
)

• 显示效果

更多的样式修改可以通过嵌套 SliderTheme 来设置

RangeSlider（区间滑动条）

在我们需要用户设置一个范围值的时候，就需要用到这个啦

简单使用

RangeValues _rangeValues = const RangeValues(40, 80);
RangeSlider(
  values: _rangeValues,
  max: 100,
  onChanged: (value) {
    setState(() {
      _rangeValues = value;
    });
  },
)

• 效果展示

参数调配

这里的参数和上面单个的几乎一样，所以就不一一展示效果了。

// 设置最小值、最大值、分割数量，提示标签
RangeSlider(
  values: _rangeValues,
  max: 100,
  divisions: 10,
  labels: RangeLabels(
    '开始：${_rangeValues.start}', '结束：${_rangeValues.end}'),
  onChanged: (value) {
    setState(() {
      _rangeValues = value;
    });
  },
),
// 设置颜色
RangeSlider(
  values: _rangeValues,
  max: 100,
  activeColor: Colors.orange,
  inactiveColor: Colors.grey,
  onChanged: (value) {
    setState(() {
      _rangeValues = value;
    });
  },
)

• 效果展示

在 Slider 中源码有很多可以借鉴的内容，可以深入阅读一下，比如 CompositedTransformTarget 和 CompositedTransformFollower ，我们可以参考这个做一个高效的下拉菜单，目前 pub 库中的下拉菜单，性能都非常的低。

CupertinoSlider（iOS 滑动条）

Flutter 是一个跨平台框架，很多 iOS 转过来的同学，肯定还是用 iOS 的原生组件样式比较好，下面就看看 iOS 样式的滑动条吧

看源码

看源码就很简单啦，只有几个参数，且上面都聊的差不多了

简单使用

CupertinoSlider(
  value: progress2,
  max: 100,
  onChanged: (value) {
    setState(() {
      progress2 = value;
    });
  },
)

• 展示效果

参数调配

这里几乎与上面 Slider 一样，在下面👇🏻代码中我也加入了详细的注释，

// 设置约束
SizedBox(
  width: double.infinity,
  child: CupertinoSlider(
    value: progress2,
    max: 100,
    // 设置分割
    divisions: 5,
    // 设置进度颜色
    activeColor: Colors.purple,
    // 设置滑块颜色
    thumbColor: Colors.cyan,
    onChanged: (value) {
      setState(() {
        progress2 = value;
      });
    },
  ),
)

• 展示效果

源码仓库

基于 Flutter 🔥 最新版本

• Flutter Widgets 仓库

参考链接

• Slider (Flutter Widget of the Week)
• Flutter-Slider
• Flutter-RangeSlider
• Flutter-CupertinoSlider
• Flutter-SliderTheme

关注专栏

• 此文章已收录到下面👇 的专栏，可以直接关注
• 更多文章继续阅读｜系列文章持续更新

👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦