我有这些滑块,默认情况下,它们显然是在彼此下面对齐的:
class _Grid extends State<Grid> {
var val = 5;
@override
build(BuildContext context){
return new Scaffold(
appBar: new AppBar(
title: new Text("Game"),
backgroundColor: Colors.red,
elevation: 1.0,
),
body: new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Slider(
value: val.toDouble(),
min: 1.0,
max: 50.0,
divisions: 50,
label: '$val',
onChanged: (double newValue) {
setState(() {
val = newValue.round();
});
},
),
new Slider(
value: val.toDouble(),
min: 1.0,
max: 50.0,
divisions: 50,
label: '$val',
onChanged: (double newValue) {
setState(() {
val = newValue.round();
});
},
),
],
)
),
);
}
}
但是,我不希望用户从左到右拖动值,而是希望从下到上拖动值(基本上是旋转的)。它们应该并排排列。
我如何才能做到这一点?
谢谢
3条答案
按热度按时间9bfwbjaz1#
2019年更新答案:将Slider Package 在RotatedBox中可以工作
编辑:...如果你不使用标签。RotatedBox还旋转值指示器,以便标签文本将绘制为垂直。不幸的是,标签不是一个我们也可以旋转的小部件,但看源代码,这似乎很难改变。
3npbholx2#
滑块组件不支持将轴从水平切换为垂直。谷歌的Material Design guidelines on sliders没有显示任何垂直滑块的例子,所以也许这是不推荐的东西。
虽然您可以使用RotatedBox或Transform类在技术上旋转滑块,但这会混淆滑块的位置计算。slider类使用
HorizontalDragGestureRecognizer
,所以拇指位置的变化将根据水平而不是垂直拖动进行调整。下面的代码示例说明了该问题。滑块会旋转,但只有水平轴上的手指移动才会更新滚动块位置:
这样,您就可以选择基于当前滑块代码库创建垂直滑块实现。将slider.dart的内容复制粘贴到项目中的新文件中并导入。在该文件中,将
HorizontalDragGestureRecognizer
的所有示例替换为VerticalDragGestureRecognizer
。结合上面的旋转代码,它现在应该可以正确地处理手势了。我还没有找到任何open Flutter issues filed to create a vertical slider,看起来没有计划现在创建一个。
更新:创建了Flutter issue以添加对垂直滑块的支持。
lmyy7pcs3#
您可以通过此flutter_xlider 3.4.0(https://pub.dev/packages/flutter_xlider)实现垂直滑块
示例代码:
输出示例:
希望这对你或其他人有帮助