QT QML 界面设计教程2——图标(图片)按钮样式

MyIconButton.xml

javascript 复制代码
import QtQuick 2.4
Rectangle {
    id: rec

    property alias img_src: icon.source
    property alias btn_txt: button.text

    property color clr_enter: "#dcdcdc"
    property color clr_exit: "#ffffff"
    property color clr_click: "#aba9b2"
    property color clr_release: "#ffffff"

    //自定义点击信号
    signal clickedLeft()
    signal clickedRight()
    signal release()

    width: 130
    height: 130
    radius: 10

    Image {
        id: icon
        width: 100
        height:100
        source: "qrc:/mycamera.png" //图片资源
        fillMode: Image.PreserveAspectFit
        clip: true
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.margins: 0
    }

    Text {
        id: button
        text: qsTr("button")

        anchors.top: icon.bottom
        anchors.topMargin: 5
        anchors.horizontalCenter: icon.horizontalCenter
        anchors.bottom: icon.bottom
        anchors.bottomMargin: 5

        font.bold: true
        font.pointSize: 14
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true

        //接受左键和右键输入
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
            //左键点击
            if (mouse.button === Qt.LeftButton)
            {
                parent.clickedLeft()
//                console.log(button.text + " Left button click")
            }
            else if(mouse.button === Qt.RightButton)
            {
                parent.clickedRight()
//                console.log(button.text + " Right button click")
            }
        }

        //按下
        onPressed: {
            color = clr_click
        }

        //释放
        onReleased: {
            color = clr_enter
            parent.release()
            console.log("Release")
        }

        //指针进入
        onEntered: {
            color = clr_enter
//            console.log(button.text + " mouse entered")
        }

        //指针退出
        onExited: {
            color = clr_exit
//            console.log(button.text + " mouse exited")
        }
    }
}

调用:

javascript 复制代码
        MyIconButton {
             x: mainWindow.width-40
             y: -8
             width: 20
             height: 20
             radius: 5
             id: btClose
             Image {
                 id: name
                 width: 20
                 height:20
                 source:  "qrc:/image/close.png"
             }
             btn_txt: ""
             onClickedLeft: close()
             //onClickedRight: close()
        }
相关推荐
我是天龙_绍4 分钟前
Easing 曲线 easings.net
前端
知识分享小能手7 分钟前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo9 分钟前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever11 分钟前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙45513 分钟前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
有想法的py工程师14 分钟前
PostgreSQL 测试磁盘性能
数据库·postgresql
Hilaku24 分钟前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
应用市场27 分钟前
Qt插件机制实现动态组件加载详解
开发语言·qt
m0_7280331340 分钟前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端
猪哥帅过吴彦祖43 分钟前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl