Qt第十五章：QML之自定义按钮

女爷i 2024-04-01 08:34 92阅读 0赞

#### **1.什么是按钮？矩形+文字+图片+点击事件** ####

import QtQuick 6.3
    
    Item{
        id:item0
        width:300
        height:300
        //背景图
        Image{
                width:300
                height:300
                source:"./DeepBlue.png"
            }
    
        //自定义一个变量来记录点击次数
        property int count: 0
    
        //矩形
        Rectangle{
            id: rectangle0
            //点击的时候控件缩小一点
            width: mouseArea0.containsPress?95:100
            height: mouseArea0.containsPress?18:20
            anchors.centerIn: parent
            radius:5
            //鼠标悬停改变一下颜色
            color: mouseArea0.containsMouse?"green":"cyan"
    
            //显示文字
            Text{
                id: text0
                text: "点击了【"+item0.count+"】次"
                anchors.centerIn: parent
            }
    
            //点击事件
            MouseArea{
                id: mouseArea0
                anchors.fill: parent
                //鼠标悬浮
                hoverEnabled: true
                onClicked: x => {
                    item0.count++
                }
            }
        }
    }

![2984f7ad715347e8a6540ea16b68938d.png][]

2.组件化

import QtQuick 6.3
    
    
    Rectangle{
        id: root
        //提供一个点击信号给使用者
        signal clicked()
    
        //提供内部的text0对象给使用者
        property alias text0:text0
    
        //点击的时候控件缩小一点
        width: mouseArea0.containsPress?width*0.8:100
        height: mouseArea0.containsPress?height*0.8:20
    
        radius:5
        //鼠标悬停改变一下颜色
        color: mouseArea0.containsMouse?"green":"cyan"
    
        //显示文字
        Text{
            id: text0
            text: "自定义按钮"
            anchors.centerIn: parent
        }
    
        //点击事件
        MouseArea{
            id: mouseArea0
            anchors.fill: parent
            //鼠标悬浮
            hoverEnabled: true
            onClicked: x => {
                root.clicked()
            }
        }
    }

![1a17fb84070e4ee68a2f04df4f717629.png][]

3.使用

import QtQuick 6.3
    //如果在相同文件夹下，则无需导入
    //import "qrc:/qml"
    Item{
        MindButtion{
           onClicked:{
                Qt.quit()
           }
        }
        MindButtion{
            text0.text:"灵魂痛击"
            y:100
        }
    }

![43c63a3e2fcd4b8c82bed4a58eab4daa.png][]

[2984f7ad715347e8a6540ea16b68938d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1bad80edc50542c48d1d9cefa152dae1.png
[1a17fb84070e4ee68a2f04df4f717629.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a5cdd0e4f95f4c4ab5ca7898bfd654cf.png
[43c63a3e2fcd4b8c82bed4a58eab4daa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/395444d5dbaa4a2dba5fe0ea7e5afdf3.png