QML自定义按钮，按钮中包含图片和文字

Hat_man_

已于 2024-04-08 09:20:07 修改

阅读量250

点赞数 3

分类专栏： QML QT 文章标签： qt

于 2024-03-21 17:35:48 首次发布

本文链接：https://blog.csdn.net/Hat_man_/article/details/136915367

版权

QT 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

QML

7 篇文章 0 订阅

订阅专栏

按钮效果如下

直接上代码

import QtQuick 2.0

Rectangle {
    id:iconButton
    width:parent.width
    height:parent.height
    color: "#6CADFF"
    radius:8
    //用于外部调用时，输入图片的地址
    property string imageSource : image.source
    //用于外部调用时，输入按钮名称
    property string descText : btnText.text
    //添加信号
    signal buttonClicked()

    Image{
        id:image
        x:13
        y:13
        width:15
        height:15
        fillMode: Image.PreserveAspectFit
        horizontalAlignment: Image.AlignHCenter
        verticalAlignment: Image.AlignVCenter
        source: imageSource
    }

    Text{
        id:btnText
        text: descText
        x:image.x + image.width + image.x
        height: parent.height
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        color: "white"
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true // 启用悬停事件

        onEntered: {
            iconButton.color = "#7DB8FF"; // 鼠标进入时改变颜色
        }

        onExited: {
            iconButton.color = "#6CADFF"; // 鼠标离开时恢复颜色
        }

        onPressed: {
            iconButton.color = "#6CADFF";
        }

        onReleased: {
            iconButton.color = "#7DB8FF";
        }

        onClicked:{
            iconButton.buttonClicked();
        }
    }
}

外部应用IconButton例子

    IconButton{
        x:bottomItem.width - 3 * 118 - 2 * 10
        y:bottomItem.height - 70
        width: 118
        height: 47
        descText: "保存图片"
        imageSource: "resources/SaveImage.png"
        fontSize:15
        onButtonClicked:{
            console.log("mainWindow.widht = " + mainWindow.width)
        }
    }