文章目录
- 概念介绍
- 创建方法
- RotatedBox
- Transform
- 示例代码
我们在上一章回中介绍了
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相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!
