QT QML 界面设计教程8——图标（图片）标签样式

notfindjob

于 2024-06-22 08:45:00 发布

阅读量186

点赞数 2

文章标签： qt 前端 javascript

本文链接：https://blog.csdn.net/notfindjob/article/details/139800548

版权

MyIconLabel.qml

import QtQuick 2.14
//Item可以替换为Rectangle以设置背景色
Item{
    id: control

    property alias source: _icon.source
    property alias imageWidth: _icon.width
    property alias imageHeight:_icon.height
    property alias text: _text.text
    property alias color: _text.color
    property alias font: _text.font
    property alias spacing: _row.spacing

    property alias controlImage: _icon
    property alias controlText: _text
    property alias controlRow: _row

    implicitWidth: ((_icon.source&&_text.implicitWidth)?_row.spacing:0)+_icon.implicitWidth+_text.implicitWidth
                   +_row.leftPadding+_row.rightPadding
    implicitHeight: 30
    Row {
        id: _row
        //图标和文本居中并排的话可以anchors.centerIn: parent
        height: parent.height
        width: parent.width
        spacing: 6
        padding: 0
        leftPadding: 6
        rightPadding: 6

        Image {
            id: _icon

            anchors{
                verticalCenter: parent.verticalCenter
            }

        }
        Text{
            id: _text
            width: control.width-_icon.width-_row.leftPadding-_row.rightPadding
            anchors{
                verticalCenter: parent.verticalCenter
            }
            color: "black"
            renderType: Text.NativeRendering
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            //wrapMode: Text.NoWrap
            elide: Text.ElideRight
            font{
                family: "SimSun"
                pixelSize: 40
            }
        }
    }
}

调用：

Template1.ToolButton {
    id: control

    property color textColor: (control.down || control.checked || control.highlighted || control.hovered) ? "cyan" : "white"
    property color buttonColor: (control.down || control.checked) ? "lightgreen": "transparent"
    //color: control.visualFocus ? control.palette.highlight : control.palette.buttonText

    implicitWidth:60;
    implicitHeight:50;
    //width: 60
    //height: 50
    padding: 0
    leftPadding: 2
    rightPadding: 12
    spacing: 6

    //自定义的MyIconLabel

    contentItem: MyIconLabel {
        text: control.text
        font: control.font
        color: control.textColor
        spacing: control.spacing
        source: control.icon.source //图片资源路径
        imageWidth: 45
        imageHeight: 45
    }

    background: Rectangle {
        implicitHeight: 50
        implicitWidth: 60
        color: control.buttonColor
    }

}

MyToolButton{ text: ""; icon.source: "qrc:/image/report/report.png" ; ToolTip.visible: hovered;ToolTip.text: qsTr("删除")}