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

滑块组件不支持将轴从水平轴切换为垂直轴。 Google 的 Material Design guidelines on sliders 没有显示任何垂直滑块的示例，因此可能不推荐这样做。

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

以下代码示例显示了问题。滑块已旋转，但只有水平轴上的手指移动才会更新 scrollthumb 位置：

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 2

2019 年的更新答案：现在只需将 Slider 包装在 RotatedBox 中就可以了，不需要其他库或调整：

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

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

示例输出：

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

Flutter 中的垂直滑块并排对齐

Vertical sliders in Flutter aligned side by side

dart

flutter