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

本文主要是介绍QT QML 界面设计教程8——图标（图片）标签样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

MyIconLabel.qml

import QtQuick 2.14
//Item可以替换为Rectangle以设置背景色
Item{id: controlproperty alias source: _icon.sourceproperty alias imageWidth: _icon.widthproperty alias imageHeight:_icon.heightproperty alias text: _text.textproperty alias color: _text.colorproperty alias font: _text.fontproperty alias spacing: _row.spacingproperty alias controlImage: _iconproperty alias controlText: _textproperty alias controlRow: _rowimplicitWidth: ((_icon.source&&_text.implicitWidth)?_row.spacing:0)+_icon.implicitWidth+_text.implicitWidth+_row.leftPadding+_row.rightPaddingimplicitHeight: 30Row {id: _row//图标和文本居中并排的话可以anchors.centerIn: parentheight: parent.heightwidth: parent.widthspacing: 6padding: 0leftPadding: 6rightPadding: 6Image {id: _iconanchors{verticalCenter: parent.verticalCenter}}Text{id: _textwidth: control.width-_icon.width-_row.leftPadding-_row.rightPaddinganchors{verticalCenter: parent.verticalCenter}color: "black"renderType: Text.NativeRenderingverticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter//wrapMode: Text.NoWrapelide: Text.ElideRightfont{family: "SimSun"pixelSize: 40}}}
}

调用：

Template1.ToolButton {id: controlproperty 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.buttonTextimplicitWidth:60;implicitHeight:50;//width: 60//height: 50padding: 0leftPadding: 2rightPadding: 12spacing: 6//自定义的MyIconLabelcontentItem: MyIconLabel {text: control.textfont: control.fontcolor: control.textColorspacing: control.spacingsource: control.icon.source //图片资源路径imageWidth: 45imageHeight: 45}background: Rectangle {implicitHeight: 50implicitWidth: 60color: control.buttonColor}}MyToolButton{ text: ""; icon.source: "qrc:/image/report/report.png" ; ToolTip.visible: hovered;ToolTip.text: qsTr("删除")}

这篇关于QT QML 界面设计教程8——图标（图片）标签样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---