QML Image and Text(图像和文字)

news2024/9/30 9:30:22

Image(图片)

图像类型显示图像。

格式:

Image {
    source: "资源地址"
}

source:指定资源的地址

自动检测文件拓展名:source中的URL 指示不存在的本地文件或资源,则 Image 元素会尝试自动检测文件扩展名。如果可以通过将任何受支持的图像文件扩展名附加到source URL 来找到现有文件,则将加载该文件。

currentFrame当前帧
frameCount帧数
paintedHeight彩绘高度
paintedWidth涂漆宽度
asynchronous异步,指定本地文件系统上的映像应在单独的线程中异步加载。默认值为 false,导致用户界面线程在加载图像时阻塞。在维护响应式用户界面比使图像立即可见更可取的情况下,将异步设置为 true 非常有用。请注意,此属性仅对从本地文件系统读取的图像有效
autoTransform 

自动变换,此属性保存图像是否应自动应用图像转换元数据

默认为false

cache指定是否应缓存图像。默认值为 true,当有大型图片是,最好设置为false,以确保它们不会以牺牲小型“UI 元素”图像为代价进行缓存。
fillMode填充模式

fillMode(填充模式)

Image.Stretch图像拉伸(默认)缩放图像以适合
Image.PreserveAspectFit保留方面拟合图像均匀缩放以适合而不裁剪
Image.PreserveAspectCrop保存方面裁剪图像均匀缩放以填充,必要时裁剪
Image.Tile图像平铺图像水平和垂直复制
Image.TileVertically 图像垂直平铺图像水平拉伸并垂直平铺
Image.TileHorizontally 图像平铺平铺 图像垂直拉伸和水平平铺
Image.Pad 图像未转换

默认情况下,图像居中对齐。

图片的使用:

首先要添加资源文件::

Rectangle{
        x:100
        y:100
        width: 200
        height:200
        Image{
            id:m1
            width:100;
            height: 100
            source: "/image/4ebac292b2a996a767ccf7977c42b241.jpg"
        }
    }

 

Text(文本内容)

表示方法有两种:

  1. 纯文本
  2. 富文本
Text {
        id: text1
        x:100
        y:100
        text: "hellow world" //纯文本
    }
    Text {
        id: text2
        x:200
        y:200
        text: "<b>hellow</b> <i>world</i>" //富文本
    }

 Text的一些属性:

padding填充(button、left、right、top)+Padding
horizontalAlignment水平对齐
verticalAlignment垂直对齐
advance(Qt 5.10)尺寸:size
antialiasing抗拒齿(默认为true)
baseUrl设置URL
clip

是否裁剪,如果文本不适合边框,它将突然被切碎

如果要在有限的空间中显示可能较长的文本,则可能需要改用。elide

color颜色
contentHeight内容高度
contentwidth内容宽度
elide

将此属性设置为使文本的某些部分适合文本项的宽度

此属性不能与富文本一起使用

font.bold粗体(true)
font.kerning斜体
font.family字体类型
font.letterSpacing设置字体间距
font.pixelSize设置字体大小
font.pointSize设置点的大小
font.preferShaping(Qt 5.10)首选整形,用于复杂的字体,默认开启,不复杂的话最好关闭
font.strikeout删除线
font.underline下划线
font.styleName样式名称
font.wordSpacing字体间距
font.weight设置粗细
hoveredLink悬停链接,此属性包含当用户将鼠标悬停在文本中嵌入的链接时的链接字符串。链接必须采用富文本或 HTML 格式,并且 hoveredLink 字符串提供对特定链接的访问。
lineCount行数
lineHeiight行高
linkColor链接颜色
style样式
styleColor样式颜色
truncated截断,如果文本由于最大行计数或省略号而被截断,则返回 true。

富文本不支持此属性。

font.capitalization :enumeration (设置字体大小写)

Font.MixCase不应用大写更改的普通文本呈现选项
Font.AllUpper 将更改要以所有大写类型呈现的文本
Font.AllLowercase将更改要以所有小写类型呈现的文本
Font.SmallCaps这将更改要以小型大写字母类型呈现的文本
Font.Capitalize这将更改要呈现的文本,每个单词的第一个字符作为大写字符

font.hintingPreference::enumeration(设置文本上的首选提示)

Font.PreferDefaultHinting平台默认
Font.PreferNoHinting如果可能,呈现文本而不提示字形的轮廓。文本布局将在印刷上准确,使用与打印时相同的指标
Font.PreferVerticalHinting 呈现文本时不带水平提示,但沿垂直方向将字形与像素网格对齐
Font.PreferFullHinting在水平和垂直方向上呈现带有提示的文本

font.weight::enumeration(设置字体粗细)

Font.Thin
Font.Light
Font.ExtraLight超光
Font.Normal-the default默认
Font.Medium中等
Font.DemiBold半粗体
Font.Bold粗体
Font.ExtraBold额外粗体
Font.Black黑色

fontSizeMode:enumeration(字体大小模型)

Text.FixedSize默认
Text.HorizontalFit使用最大尺寸,最大尺寸为指定的大小,适合不带换行的项目宽度。
Text.VerticalFit使用最大尺寸,最大尺寸为适合项目高度的指定尺寸
Text.Fit使用最大尺寸,最大尺寸为指定的大小,适合项目的宽度和高度

textFotmat:enumeration 文本格式

Text.AutoText默认
Text.PlainText所有样式标记都被视为纯文本
Text.StyledText优化了 HTML 3.2 中的基本富文本
Text.RichTextHTML 4的子集
Text.MarkdownTextCommonMark

 加上表和任务列表的 GitHub 扩展(自 5.14 起)

信号:

lineLaidOut()对于在布局过程中以纯文本或样式文本模式布局的每一行文本,都会发出此信号。它不会以富文本模式发出。
linkActivated()链接激活时发出
linkHovered()鼠标悬停在链接时发出

例子:

Text {
        id: text1
        x:100
        y:100
        text: "hellow world"
        font.bold: true//粗体
        font.pixelSize: 20//内容大小
        font.underline: true//下划线
        horizontalAlignment: Text.AlignLeftText
        font.wordSpacing: 2//文字间距
        font.capitalization: Font.AllLowercase//以小写的格式显示
        font.weight: Font.ExtraLight;//设置字体大小
    }

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/373370.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MVI 架构更佳实践:支持 LiveData 属性监听

前言MVI架构为了解决MVVM在逻辑复杂时需要写多个LiveData(可变不可变)的问题,使用ViewState对State集中管理&#xff0c;只需要订阅一个 ViewState 便可获取页面的所有状态通过集中管理ViewState&#xff0c;只需对外暴露一个LiveData&#xff0c;解决了MVVM模式下LiveData膨胀…

Linux_vim编辑器入门级详细教程

前言&#xff08;1&#xff09;vim编辑器其实本质上就是对文本进行编辑&#xff0c;比如在.c文件中改写程序&#xff0c;在.txt文件写笔记什么的。一般来说&#xff0c;我们可以在windows上对文本进行编译&#xff0c;然后上传给Linux。但是有时候我们可能只是对文本进行简单的…

MySQL运维

目录 1、日志 1、错误日志 2、二进制日志 3、查询日志 4、慢查询日志 2、主从复制 搭建 1、主库配置 2、从库配置 3、分库分表 1、简介 ​编辑 1、垂直拆分 2、水平拆分 3、实现技术 2、MyCat 3、MyCat使用和配置 配置 4、MyCat分片 1、垂直拆分 2、水平拆分…

线材-电子线载流能力

今天来讲的是关于电子线的一个小知识&#xff0c;可能只做板子的工程师遇到此方面的问题会比较少&#xff0c;做整机的工程师则必然会遇到此方面问题&#xff0c;那就是线材问题。 下面主要说下电子线的过电流能力。&#xff08;文末有工具下载&#xff09;电子线&#xff08;h…

vue3+rust个人博客建站日记2-确定需求

反思 有人说过我们正在临近代码的终结点。很快&#xff0c;代码就会自动产生出来&#xff0c;不需要再人工编写。程序员完全没用了&#xff0c;因为商务人士可以从规约直接生成程序。 扯淡&#xff01;我们永远抛不掉代码&#xff0c;因为代码呈现了需求的细节。在某些层面上&a…

CTFer成长之路之Python中的安全问题

Python中的安全问题CTF 1.Python里的SSRF 题目提示 尝试访问到容器内部的 8000 端口和 url path /api/internal/secret 即可获取 flag 访问url&#xff1a; http://f5704bb3-5869-4ecb-9bdc-58b022589224.node3.buuoj.cn/ 回显如下&#xff1a; 通过提示构造payload&…

Pytorch复习笔记--Conv2d和Linear的参数量和显存占用量比较

目录 1--nn.Conv2d()参数量的计算 2--nn.Linear()参数量计算 3--显存占用量比较 1--nn.Conv2d()参数量的计算 conv1 nn.Conv2d(in_channels3, out_channels64, kernel_size1) 计算公式&#xff1a; Param in_c * out_c * k * k out_c; in_c 表示输入通道维度&#xff1b…

微信小程序-1:比较两数的大小

程序来源》微信小程序开发教程&#xff08;第二章&#xff09; 主编&#xff1a;黄寿孟、易芳、陶延涛 ISBN&#xff1a; 9787566720788 程序运行结果&#xff1a; <!--index.wxml--> <view class"container"> <text>第一个数字&#xff1a;&…

从认知智能的角度认识ChatGPT的不足

OpenAI的ChatGPT带来了一些令人欣喜的成果&#xff0c;但是从认知智能的角度来看&#xff0c;也有很多不足。今天我就来为大家说一说。首先我会为大家简单介绍人工智能&#xff0c;认知智能&#xff0c;然后再分析ChatGPT的能力和不足&#xff0c;最后分享目前优秀的学术论文以…

网络应用之静态Web服务器

静态Web服务器-返回固定页面数据学习目标能够写出组装固定页面数据的响应报文1. 开发自己的静态Web服务器实现步骤:编写一个TCP服务端程序获取浏览器发送的http请求报文数据读取固定页面数据&#xff0c;把页面数据组装成HTTP响应报文数据发送给浏览器。HTTP响应报文数据发送完…

[11]云计算|简答题|案例分析|云交付|云部署|负载均衡器|时间戳

升级学校云系统我们学校要根据目前学生互联网在线学习、教师教学资源电子化、教学评价过程化精细化的需求&#xff0c;计划升级为云教学系统。请同学们根据学校发展实际考虑云交付模型包含哪些&#xff1f;云部署采用什么模型最合适&#xff1f;请具体说明。9月3日买电脑还是租…

python之并发编程

一、并发编程之多进程 1.multiprocessing模块介绍 python中的多线程无法利用多核优势&#xff0c;如果想要充分地使用多核CPU的资源&#xff08;os.cpu_count()查看&#xff09;&#xff0c;在python中大部分情况需要使用多进程。Python提供了multiprocessing。 multiprocess…

SEO优化:干货技巧分享,包新站1-15天100%收录首页

不管是老域名还是新域名&#xff0c;不管是多久没有收录首页的站&#xff0c;此法周期7-30天&#xff0c;包首页收录&#xff01;本人不喜欢空吹牛逼不实践的理论&#xff0c;公布具体操作&#xff1a;假如你想收录的域名是a.com&#xff0c;那么准备如下材料1.购买5-10个最便宜…

【Tomcat】Tomcat安装及环境配置

文章目录什么是Tomcat为什么我们需要用到Tomcattomcat下载及安装1、进入官网www.apache.org&#xff0c;找到Projects中的project List2、下载之后&#xff0c;解压3、找到tomcat目录下的startup.bat文件&#xff0c;双击之后最后结果出现多少多少秒&#xff0c;表示安装成功4、…

【Python工具篇】Anaconda中安装python2和python3以及在pycharm中使用

背景&#xff1a;已经安装好anaconda、python3、pycharm&#xff0c;因为项目使用的是python2语法&#xff0c;所以需要在anaconda中安装python2&#xff0c;并在pycharm中使用&#xff0c;下面给出步骤。 1. 打开cmd或者是Anaconda Prompt。 下面是anaconda prompt. 2. 查…

hadoop03-MapReduce【尚硅谷】

大数据学习笔记 MapReduce 一、MapReduce概述 MapReduce是一个分布式运算程序的编程框架&#xff0c;是基于Hadoop的数据分析计算的核心框架。 MapReduce处理过程为两个阶段&#xff1a;Map和Reduce。 Map负责把一个任务分解成多个任务&#xff1b;Reduce负责把分解后多任务处…

必应ai注册方法

1.进行配置下载Microsoft Edge Canary&#xff0c;链接下载 Microsoft Edge Insider Channels&#xff0c;打开Microsoft Edge Canary&#xff0c;在Header Editor - Microsoft Edge Addons中安装Header Editor插件&#xff0c;点击Header Editor图标&#xff0c;选择右下角的&…

网页唤起 APP中Activity的实现原理

疑问的开端大家有没有想过一个问题&#xff1a;在浏览器里打开某个网页&#xff0c;网页上有一个按钮点击可以唤起App。这样的效果是怎么实现的呢&#xff1f;浏览器是一个app&#xff1b;为什么一个app可以调起其他app的页面&#xff1f;说到跨app的页面调用&#xff0c;大家是…

python之面向对象编程

1、面向对象介绍&#xff1a; 世界万物&#xff0c;皆可分类 世界万物&#xff0c;皆为对象 只要是对象&#xff0c;就肯定属于某种类 只要是对象&#xff0c;就肯定有属性 2、 面向对象的几个特性&#xff1a; class类&#xff1a; 一个类即对一类拥有相同属性的对象的…

STM32笔记

目录 1.1. 预备阶段 1.2. 单片机介绍 2. 初识STM32 2.1. STM32 1.1. 预备阶段 1.2. 单片机介绍 1.2.1. 单片机是什么 单片微型计算机(Single Chip Microcomputer)简称为单片机&#xff08;Microcontrollers&#xff09;&#xff0c;也称为微控制单元(Microcontroller Uni…