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

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++
            }
        }
    }
}

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()
        }
    }
}

  

3.使用

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文子阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值