如何在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度的)。显示的结果如下:


技术分享


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。