QML-Button示例

logstach

于 2024-03-01 10:14:59 发布

阅读量356

点赞数 4

文章标签：前端 c++

本文链接：https://blog.csdn.net/weixin_60819724/article/details/136388595

版权

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    color: "white"
    title: qsTr("My QML")
    visible: true

    //autoExclusive true按钮排它
    Button{
        id:btn1
        width: 50
        height: 50
        checkable: true
        x:0
        autoExclusive: true
    }
    Button{
        id:btn2
        width: 50
        height: 50
        checkable: true
        x:70
        autoExclusive: true
    }
    Button{
        id:btn3
        width: 50
        height: 50
        checkable: true
        x:140
        autoExclusive: true
    }


    Button{
        id:btn4
        width: 50
        height: 50
        y:100
        //点击不松开会连续触发三个信号
        autoRepeat: true
        //第一次触发到之后连续触发三个信号的间隔 单位毫秒
        autoRepeatDelay: 2000
        //连续触发三个信号的间隔
        autoRepeatInterval: 1000
        //点击变色 在深色点击变浅色 在浅色点击变深色
        checkable: true
        //摁下 true 松开或移除鼠标 false
        onDownChanged: {
            console.log("down",down,"pressed",pressed)
        }
        onClicked: {
            console.log("clicked")
        }
        onPressed: {
            console.log("pressed")
        }
        onReleased: {
            console.log("released")
        }
    }


    Button{
        id: btn5
        width: 200
        height: 50
        x: 100
        y: 100

        //icon
//        icon.source: "/test.jpg"
//        icon.color: "red"
        //Image
//        indicator: Image {
//            id: ind
//            source: "/test.jpg"
//        }
        //按钮文本
        text: "pressed"
        //点击不松开会连续触发三个信号
        autoRepeat: true
        //按钮背景
        background: Rectangle{
            anchors.fill: btn5
            //填充
            color: {
                if(btn5.pressed){
                    return "green"
                }
                else{
                    return "blue"
                }
            }
            //边框
            border.width: 5
            border.color: {
                if(btn5.pressed){
                    return "red"
                }
                else{
                    return "black"
                }
            }

        }

    }

}