Flutter中的垂直滑块并排排列

Question

我有这些滑块,默认情况下显然是在彼此之下对齐:

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();
                });
              },
            ),    
          ],
         )
       ),
    );
  }
}

但是,不是用户从左向右拖动值,而是希望将值从下向上拖动(基本上是旋转的).它们应该并排排列.

我怎样才能做到这一点？

谢谢

Answer 1

2019 年的更新答案：只需将 Slider 包裹在 RotatedBox 中现在就像一个魅力，不需要其他库或调整：

RotatedBox(
  quarterTurns: 1,
  child: Slider(
     value: ...,
     onChanged: (newValue) {
       ...
     },
  ),
)

Answer 2

滑块组件不支持将轴从水平切换到垂直.关于滑块的 Google 材料设计指南没有显示垂直滑块的任何示例,因此可能不建议这样做.

虽然您可以使用RotatedBox或Transform类在技术上旋转滑块,但这会影响滑块的位置计算.滑块类使用a HorizontalDragGestureRecognizer,因此拇指位置变化将根据水平而不是垂直拖动进行调整.

以下代码示例显示了该问题.旋转滑块,但只有水平轴上的手指移动才会更新滚动位置:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Vertical sliders',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SliderGrid(),
    );
  }
}

class SliderGrid extends StatefulWidget {
  @override
  _GridState createState() => new _GridState();
}

class _GridState extends State<SliderGrid> {
  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 Transform(
          alignment: FractionalOffset.center,
          // Rotate sliders by 90 degrees
          transform: new Matrix4.identity()..rotateZ(90 * 3.1415927 / 180),
            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();
                  });
                },
              ),
            ],
          ),

        ),
      ),
    );
  }
}

这使您可以选择基于当前滑块代码库创建垂直滑块实现.将slider.dart的内容复制粘贴到项目中的新文件中并导入它.在该文件中,替换HorizontalDragGestureRecognizerwith的所有实例VerticalDragGestureRecognizer.结合上面的旋转代码,它现在应该正确处理手势.

我没有找到任何开放的Flutter问题来创建垂直滑块,看起来现在没有计划创建一个.

更新:创建Flutter问题以添加对垂直滑块的支持.