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

滑块组件不支持将轴从水平切换到垂直。谷歌的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 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(() {});
  },
);

样本输出：

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

Answer 4

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

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

Flutter中的垂直滑块并排排列

4 个答案: