注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

沙漠里de烟雨

原创分享,禁止转载

 
 
 

日志

 
 

qml下自定义滑块  

2017-05-11 02:51:33|  分类: QT5.x与QML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
xx.pro:
QT += qml quick widgets

main.cpp =>
#include <QApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml =>
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import "."

ApplicationWindow {
    id:appWin
    title: qsTr("slider")
    width: 640
    height: 600
    visible: true

    Rectangle
    {
        id:rect
        anchors.fill: parent

        property real eyeVal:0
        property real stereoVal:0

        Column
        {
            x:50
            y:50
            spacing: 30

            Slider
            {
                id: eyeSlider
                width:300
                height:100
                min: 0
                max: 0.5
                init: 0-eyeSlider.min
                name: "Eye"
                handleUrl:"ipad-eye-2.png"
                onSliderValueChanged:
                {
                    eyeText.text = String(value)
                }
            }
            Slider
            {
                id: stereoSlider
                width:300
                height:100
                min: 1
                max: 10
                init: 1-stereoSlider.min
                name: "3D"
                handleUrl:"ipad-stereo-2.png"
                onSliderValueChanged:
                {
                    stereoText.text = String(value)
                }
            }

            Text
            {
                id: eyeText
                text:String((eyeSlider.init+eyeSlider.min)*1000)
            }
            Text
            {
                id: stereoText
                text:String((stereoSlider.init+stereoSlider.min)*1000)
            }
        }
    }
}

Slider.qml =>
import QtQuick 2.0

Item
{
    id: slider
//    height: 26
//    width: 320

    property real min: 0
    property real max: 1
 //   property real value: min + (max - min) * mousearea.value
    property real init: min+(max-min)/2
    property string name: ""
    property string handleUrl: ""
    property color color: "#F9EDCE"

    Component.onCompleted: setValue(init)

    function setValue(v)
    {
       if (min < max)
       {
          var val = v / (max - min) * (mousearea.drag.maximumX - mousearea.drag.minimumX) + mousearea.drag.minimumX
          handle.x = Math.round(val);
       }
    }

    function getValue(v)
    {
        v = v*1000;
        return Math.floor(v);
    }

    signal sliderValueChanged(int value)

    Rectangle
    {
        id: rect
        width: parent.width
        color: "#AFADA5"
        height: slider.height/2
        radius: 3
        antialiasing: true
        border.color: Qt.darker(color, 1.2)
        anchors.verticalCenter: parent.verticalCenter

        Rectangle
        {
            id:leftRect     //滑块左边的高亮区域;
            height: parent.height
            anchors.left: parent.left
            anchors.right: handle.horizontalCenter
            color: slider.color
            radius: 3
            border.width: 1
            border.color: Qt.darker(color, 1.3)
            opacity: 0.8
        }

        Image
        {
            id: handle  //滑块;
            height:slider.height
            source: handleUrl
            anchors.verticalCenter: parent.verticalCenter
            MouseArea
            {
                id: mousearea
                anchors.fill: parent
                anchors.margins: -4
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: Math.round(-handle.width / 2)
                drag.maximumX: Math.round(rect.width - handle.width/2)
           //     property real value: (handle.x - drag.minimumX) / (drag.maximumX - drag.minimumX)
                onReleased:
                {
                    var value = (handle.x - drag.minimumX) / (drag.maximumX - drag.minimumX);
                    value = min + (max - min) * value;
                    slider.sliderValueChanged(getValue(value));
                }
            }
        }
    }
}
  评论这张
 
阅读(7)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017