dart Flutter中的垂直滑块并排对齐

vpfxa7rd  于 2023-10-13  发布在  Flutter
关注(0)|答案(3)|浏览(127)

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

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

但是,我不希望用户从左到右拖动值,而是希望从下到上拖动值(基本上是旋转的)。它们应该并排排列。
我如何才能做到这一点?
谢谢

9bfwbjaz

9bfwbjaz1#

2019年更新答案:将Slider Package 在RotatedBox中可以工作

编辑:...如果你不使用标签。RotatedBox还旋转值指示器,以便标签文本将绘制为垂直。不幸的是,标签不是一个我们也可以旋转的小部件,但看源代码,这似乎很难改变。

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

3npbholx2#

滑块组件不支持将轴从水平切换为垂直。谷歌的Material Design guidelines on sliders没有显示任何垂直滑块的例子,所以也许这是不推荐的东西。
虽然您可以使用RotatedBox或Transform类在技术上旋转滑块,但这会混淆滑块的位置计算。slider类使用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以添加对垂直滑块的支持。

lmyy7pcs

lmyy7pcs3#

您可以通过此flutter_xlider 3.4.0(https://pub.dev/packages/flutter_xlider)实现垂直滑块

示例代码:

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

输出示例:

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

相关问题