如何在Ubuntu QML應用中實現一個垂直的Slider，qmlslider

如何在Ubuntu QML應用中實現一個垂直的Slider，qmlslider

我們在使用Ubuntu SDK中的Slider的時候，我們發現，它沒有orientation的屬性儘管在Qt官方網站的slider是有這個屬性的。在預設的情況下，這個Slider是水平的。那麼我們該如實現這個呢？

我們的任何一個QML Item都有一個屬性叫做rotation。我們可以通過這個屬性來得到一個旋轉90度的水平Slider。這樣我們就可以用如下的代碼來實現了：

import QtQuick 2.0import 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度的）。顯示的結果如下：