第六十回： 如何创建垂直版Slider

我们在上一章回中介绍了 Slider Widget相关的内容，本章回中将介绍如何创建垂直版Slider.闲话休提，让我们一起Talk Flutter吧。

概念介绍

正常的Slider组件是沿着水平方向滑动，或者叫沿着x轴方向滑动，有时候需要让Slider沿垂直方向滑动，或者叫沿着y轴方向滑动。比如通过在垂直方向上滑动来调节音量的大小。本章回中将介绍如何创建垂直版的Slider组件。

创建方法

创建垂直版Slider的思路：先创建一个水平版的Slider,然后将它旋转90度或者270度。这样就是得到了一个垂直版的Slider.旋转的方法有两种，详细如下：

RotatedBox

通过RotateBox组件来旋转Slider,该组件是容器类组件，把等待旋转的Slider组件赋值给它的child属性，然后给该组件的quarterTurns属性赋值，通常使用1到4就可以，1表示顺时针旋转90度，2表示顺时针旋转180度，其它值依此类推。

Transform

通过Transform组件来旋转Slider,该组件是容器类组件，旋转组件时使用transform的rotate()方法，把等待旋转的Slider组件赋值给该方法的child属性，然后给该方法的angle属性赋值，注意需要使用弧度值，常用的做法是使用pi/2,pi这样的值来赋值,这里使用的pi是math类的成员，因此需要在文件中导入math包。

我们给出了两种旋转方法，如何选择呢？看看它们之间的区别就知道该如何选择了：

• Transform在绘制时旋转，效率高，但是组件自身的布局(比如长度和宽度)没有发生转。
• RotatedBox会把组件的布局也进行旋转。虽然效率低一些，但是旋转的操作比较完整。

示例代码

Widget _slider() {
  return Slider(
    //指定滑动值的范围，如果不指定，默认值的范围在0.0 - 1.0之间
    min: 0.0,
    max: 10.0,
    //步进值
    divisions: 10,
    //设定当前值
    value: _slideValue,
    //用来显示当前的滑动值,文字位于滑块上方
    label: "Value is: ${_slideValue.toInt()}",
    onChanged: (value) {
      setState(() {
        _slideValue = value;
        print("value = $value");
      });
    },
    activeColor: Colors.purpleAccent,
    inactiveColor: Colors.green,
  );

RotatedBox(
  child: _slider(),
  //赋值1-4就可以实现旋转效果
  quarterTurns: 1,
),
Transform.rotate(
  //通过指定的弧度进行旋转
  angle: pi / 2,
  child: _slider(),
),

在上面的代码中，我们把Slider组件封装成了一个方法，然后将其赋值给RotatedBox和Transform的child属性，接着修改RotatedBox和Transform的旋转角度。这样就得到了一个垂直版本的Slider,可以沿着y轴方向滑动该slider.我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，关于如何创建垂直版Slide相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!