Flutter | 你真的会用 Slider 组件吗?

Flutter | 你真的会用 Slider 组件吗?

Android小彩虹2021-08-24 16:22:14240A+A-

Slider 用在哪里?

当你接触到一个 flutter 组件时,首先要考虑的是它的应用场景,而不是看到什么就学什么,flutter 的组件目前已经快接近 400 个了,想要全部了解他们是不可能的,常用的做法是根据你的实际需求去寻找对应的组件使用,慢慢用你就会熟悉越来越多的组件,完全没必要去花时间去一个个过一遍,总之这样的学习方式是不对的。

Slider 是 flutter 中的滑块组件,常用的场景有音乐播放进度条、系统音量调节、屏幕亮度调节等。凡是和进度有关的场景,读者都可以尝试用一下这个组件。如下面的效果,都是可以用 Slider 来实现的。

音乐播放器

音量调节

Slider 基本使用

Slider 的组成大致有:轨道、滑块、刻度、标签。如下图

Slider 基本组成

下面代码是 Slider 组件最简单的使用方法,直接声明了一个 Slider,呈现出来的效果如上图。注意 label 标签属性只有声明了 divisions 属性才会生效,否则不显示。

      body: Slider(
        value: _value,
        min: 0, // 滑动范围最小值
        max: 100, // 滑动范围最大值
        // 用了 divisions 滑动范围就是离散的,把 100 分成 10 个等长范围,
        // 每次滑动的最小单元是下一个离散点,我喜欢叫做刻度,便于理解,比如这里是 10 个刻度
        divisions: 10,
        label: "$_value", // 标签
        activeColor: Colors.blue, // 激活部分的轨道颜色
        inactiveColor: Colors.grey, // 未激活轨道部分的颜色
        onChanged: (value){ // 滑动滑块时的回调函数
          setState(() {
            _value = value;
          });
        },
      )

使用 SliderTheme,滑块主题

Slider 的使用难道就这么简单吗,答案显然不是。上面直接声明一个 Silder 并使用,只能算是生成了 Slider 的 4 个基本组成部分(轨道、滑块、标签、刻度)。如何对这些基本结构定制化呢?比如我想让轨道的大小、颜色、形状按照 UI 出图来决定,那么 SlideTheme 就上场了,在实际开发中,基本都是用 SlideTheme 来包装 Slider 使用。

简单点说,就是使用 SliderTheme 可以自定义 Slider 各个组件的颜色和形状,提供了更好的扩展性。

下面代码是 SliderTheme 的基本使用方法。

      body: SliderTheme(
        data: SliderTheme.of(context).copyWith(
          trackHeight: 10, // 轨道高度
          trackShape: RectangularSliderTrackShape(), // 轨道形状,可以自定义
          activeTrackColor: Colors.blueGrey, // 激活的轨道颜色
          inactiveTrackColor: Colors.black26,  // 未激活的轨道颜色
          thumbShape: RoundSliderThumbShape( //  滑块形状,可以自定义
              enabledThumbRadius: 30  // 滑块大小
          ),
          thumbColor: Colors.white, // 滑块颜色
          overlayShape: RoundSliderOverlayShape(  // 滑块外圈形状,可以自定义
            overlayRadius: 50, // 滑块外圈大小
          ),
          overlayColor: Colors.black54, // 滑块外圈颜色
          valueIndicatorShape: PaddleSliderValueIndicatorShape(), // 标签形状,可以自定义
          activeTickMarkColor: Colors.red,  // 激活的刻度颜色
        ),
        child: Slider(
          value: _value,
          min: 0,
          max: 100,
          divisions: 10,
          label: '$_value',
          onChanged: (v){
            setState(() {
              _value = v;
            });
          },
        ),
      ),

呈现出来的效果是这样的。

SliderTheme

介绍 Slider 的使用方法绝对不是本文的目的。细心的读者可能会发现,在上图中,Slider 的轨道(track)宽度并没有占满水平方向,左右还留有空间。读者在直观上可能会认为是轨道自带了外边距(margin)或内边距(padding),其实都不是!左右留有的空间是 Slider 的大小,Slider 占据了整个屏幕的水平宽度。留出的左右空白大小,刚好是滑块外圈直径的大小!滑块滑到最左或最右,能保证滑块仍然在 Slider 内部,仅此而已,如下图。

SliderTheme

如何让轨道宽度和 Slider 一样?

读者用过某音,某狗的音乐播放器,某牙、某站的视频播放器,会发现一个共性:他们的滑块是不会超过轨道的。既然有了上面的问题,那么如何解决呢?以正常的角度来看问题,本质是轨道的宽度不够导致的,那么我们让轨道的宽度和 Slider 保持一致,问题就迎刃而解了。

Slider 各个组件(轨道、滑块、标签、刻度)的形状都是可以自定义的,Slider 轨道形状默认是圆角,即(RoundedRectSliderTrackShape),通过继承 RoundedRectSliderTrackShape 重写 getPreferredRect 方法,我们就能很容易的对轨道的宽度、高度做出调整。

class FullWidthTrackShape extends RoundedRectSliderTrackShape {
  Rect getPreferredRect({
    @required RenderBox parentBox,
    Offset offset = Offset.zero,
    @required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double trackHeight = sliderTheme.trackHeight;
    final double trackLeft = offset.dx;
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
    // 让轨道宽度等于 Slider 宽度
    final double trackWidth = parentBox.size.width;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }
}

上面代码 FullWidthTrackShape 继承了 RoundedRectSliderTrackShape 并重写了 getPreferredRect 方法,让轨道的宽度和 Slider一样。代码写好了,那就试试将下面原先的代码

trackShape: RectangularSliderTrackShape(), // 轨道形状,可以自定义

改为我们刚刚自定义的 FullWidthTrackShape

trackShape: FullWidthTrackShape(), // 轨道形状,可以自定义

来看看效果怎么样,如下图,轨道的宽度和 Slider 一样了,是不是很开心。

SliderTheme

Slider,如何沿垂直方向滑动?

告别了上面一个小难题,我现在要讲讲如何让 Slider 沿垂直方向滑动。在你看过所有关于 Slider 组件使用的教程中,基本都是一个组件从左滑到右,滑到全文结束。本文希望从不一样的角度来讲解该如何让 Slider 沿垂直方向滑动。

方法其实很简单,利用 RotatedBox 旋转组件就行了,这个组件很简单,被它包裹的组件可以沿中心轴顺时针旋转,最小旋转角度是90°,即 1/4 圈。来看看下面的代码,顺时针旋转了 3/4 圈,Slider 就可以从下到上沿垂直方向滑动了。读者到这应该可以得到一个启发,在 flutter 中,各种组件的合理组合使用,可以实现意想不到的效果。

      body: RotatedBox(
        quarterTurns: 3, // 顺时针旋转 3/4 圈
        child: SliderTheme(
          data: SliderTheme.of(context).copyWith(
            trackHeight: 10, // 轨道高度
            trackShape: FullWidthTrackShape(), // 轨道形状,可以自定义
            activeTrackColor: Colors.blueGrey, // 激活的轨道颜色
            inactiveTrackColor: Colors.black26,  // 未激活的轨道颜色
            thumbShape: RoundSliderThumbShape( //  滑块形状,可以自定义
                enabledThumbRadius: 30  // 滑块大小
            ),
            thumbColor: Colors.white, // 滑块颜色
            overlayShape: RoundSliderOverlayShape(  // 滑块外圈形状,可以自定义
              overlayRadius: 50, // 滑块外圈大小
            ),
            overlayColor: Colors.black54, // 滑块外圈颜色
            valueIndicatorShape: PaddleSliderValueIndicatorShape(), // 标签形状,可以自定义
            activeTickMarkColor: Colors.red,  // 激活的刻度颜色
          ),
          child: Slider(
            value: _value,
            min: 0,
            max: 100,
            divisions: 10,
            label: '$_value',
            onChanged: (v){
              setState(() {
                _value = v;
              });
            },
          ),
        ),
      )

垂直滑动

写在最后

其实网上有大把介绍组件使用的书籍和教程,甚至有很多开源的组件项目来学习,读者可以从这些书籍中获取它们基本的使用方法。但是这些基础知识在项目中就真的够用了吗?答案肯定是不够用,在项目开发过程中,你会遇到各种各样的问题,这都要需要你从现有的工具来找出问题的解决方法,所以很多时候并不是代码能力上的差异,更多时候是想问题的角度和思维方式。

如果你对我感兴趣,请移步到 blogss.cn , 或关注公众号:程序员小北,进一步了解。

  • 如果本文帮助到了你,欢迎点赞和关注
  • 由于作者水平有限,文中如果有错误,欢迎在评论区指正
  • 本文首发于掘金,未经许可禁止转载

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们