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 的 Material Design guidelines on sliders 没有显示任何垂直滑块的示例，因此可能不推荐这样做。

虽然您可以使用 RotatedBox 或 Transform 类在技术上旋转滑块，但这会打乱滑块的位置计算。滑块类使用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 的内容复制粘贴到项目中的新文件中并导入。在该文件中，将所有HorizontalDragGestureRecognizer 实例替换为VerticalDragGestureRecognizer。结合上面的旋转代码，它现在应该可以正确处理手势了。

我还没有找到任何open Flutter issues filed to create a vertical slider，目前似乎没有创建的计划。

更新：创建 Flutter issue 以添加对垂直滑块的支持。

Answer 3

你可以通过这个[flutter_xlider 3.4.0]实现垂直滑块

示例代码：

FlutterSlider(
  axis: Axis.vertical,
  values: [300],
  max: 500,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
);

样本输出：

希望这对您或其他人有所帮助

Answer 4

您可以通过添加null 作为label 的值来禁用滑块标签：

Slider(         
    value: _currentSliderValue,
    min: 0,
    max: 100,
    divisions: 5,
    label:null,
    onChanged: ...,
);