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

2024-06-22 10:12

本文主要是介绍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——图标(图片)标签样式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1083994

相关文章

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言:详细步骤:一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本,要是

通过Docker Compose部署MySQL的详细教程

《通过DockerCompose部署MySQL的详细教程》DockerCompose作为Docker官方的容器编排工具,为MySQL数据库部署带来了显著优势,下面小编就来为大家详细介绍一... 目录一、docker Compose 部署 mysql 的优势二、环境准备与基础配置2.1 项目目录结构2.2 基

Linux安装MySQL的教程

《Linux安装MySQL的教程》:本文主要介绍Linux安装MySQL的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux安装mysql1.Mysql官网2.我的存放路径3.解压mysql文件到当前目录4.重命名一下5.创建mysql用户组和用户并修

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security?同类框架对比Spring Security典型应用场景传统

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

Qt 中 isHidden 和 isVisible 的区别与使用小结

《Qt中isHidden和isVisible的区别与使用小结》Qt中的isHidden()和isVisible()方法都用于查询组件显示或隐藏状态,然而,它们有很大的区别,了解它们对于正确操... 目录1. 基础概念2. 区别清见3. 实际案例4. 注意事项5. 总结1. 基础概念Qt 中的 isHidd

Centos环境下Tomcat虚拟主机配置详细教程

《Centos环境下Tomcat虚拟主机配置详细教程》这篇文章主要讲的是在CentOS系统上,如何一步步配置Tomcat的虚拟主机,内容很简单,从目录准备到配置文件修改,再到重启和测试,手把手带你搞定... 目录1. 准备虚拟主机的目录和内容创建目录添加测试文件2. 修改 Tomcat 的 server.X

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

Python中的输入输出与注释教程

《Python中的输入输出与注释教程》:本文主要介绍Python中的输入输出与注释教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、print 输出功能1. 基础用法2. 多参数输出3. 格式化输出4. 换行控制二、input 输入功能1. 基础用法2. 类