垂直滑塊並排

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，所以拇指位置更改將根據水平而不是垂直拖動進行調整。

以下代碼示例顯示了該問題。滑塊旋轉，而只是在橫軸上手指的動作將更新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添加對垂直滑塊的支持。