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

·  阅读 1137
Flutter 中 Slider、RangeSlider、CupertinoSlider 的使用详解 | Flutter Widgets

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

前言

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

看效果

01.gif

Slider(滑动条)

简单使用

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

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

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

  • 展示效果

02.gif

参数调配

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

看源码

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

  • 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;
    });
  },
)
复制代码
  • 显示效果

03.gif

这里的 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;
    });
  },
)
复制代码
  • 显示效果

04.gif

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

image.png

RangeSlider(区间滑动条)

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

简单使用

RangeValues _rangeValues = const RangeValues(40, 80);
RangeSlider(
  values: _rangeValues,
  max: 100,
  onChanged: (value) {
    setState(() {
      _rangeValues = value;
    });
  },
)
复制代码
  • 效果展示

05.gif

参数调配

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

// 设置最小值、最大值、分割数量,提示标签
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;
    });
  },
)
复制代码
  • 效果展示

06.gif

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

image.png

CupertinoSlider(iOS 滑动条)

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

看源码

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

简单使用

CupertinoSlider(
  value: progress2,
  max: 100,
  onChanged: (value) {
    setState(() {
      progress2 = value;
    });
  },
)
复制代码
  • 展示效果

07.gif

参数调配

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

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

08.gif

源码仓库

基于 Flutter 🔥 最新版本

参考链接

关注专栏

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

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

分类:
Android
标签:
分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改