如何在Ubuntu QML应用中实现一个垂直的Slider

我们在使用Ubuntu SDK中的Slider的时候，我们发现，它没有orientation的属性尽管在Qt官方网站的slider是有这个属性的。在默认的情况下，这个Slider是水平的。那么我们该如实现这个呢？

我们的任何一个QML Item都有一个属性叫做rotation。我们可以通过这个属性来得到一个旋转90度的水平Slider。这样我们就可以用如下的代码来实现了：

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "slider.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(50)
    height: units.gu(75)

    Page {
        title: i18n.tr("Slider")

        Slider {
            x:parent.width/2 - width/2
            y:parent.height/2 - height/2
            function formatValue(v) { return v.toFixed(2) }
            minimumValue: -3.14
            maximumValue: 3.14
//            rotation: 90
            value: 0.0
            live: true
        }

        Slider {
            x:parent.width/2 - width/2
            y:parent.height/2 - height/2
            function formatValue(v) { return v.toFixed(2) }
            minimumValue: -3.14
            maximumValue: 3.14
//            rotation: 90
//            orientation: Qt.Horizontal
            value: 0.0
            live: true
        }
    }
}

这里创建了连个Slider，一个是是水平的（默认情况下的），另外一个是垂直的（旋转90度的）。显示的结果如下：