QML类型：Image、Text_qml800像素多大

Image

图像类型显示图像。可显示所有Qt支持的图像格式。

属性成员

1、currentFrame : int

frameCount : int

• currentFrame 是当前可见的帧。默认值为 0。
• frameCount 是图像中的帧数。大多数图像只有一帧。

如果图像包含多个帧，可以将其设置为 0 和 frameCount - 1 之间的数字以显示不同的帧。

2、horizontalAlignment : enumeration

verticalAlignment : enumeration

设置图像的水平和垂直对齐方式。默认情况下，图像居中对齐。

horizontalAlignment 的有效值：

• Image.AlignLeft
• Image.AlignRight
• Image.AlignHCenter

verticalAlignment 的有效值：

• Image.AlignTop
• Image.AlignBottom
• Image.AlignVCenter

3、paintedHeight : real

paintedWidth : real

只读属性。这些属性保存实际绘制的图像的大小。

在大多数情况下，与宽度、高度相同，但在使用 Image.PreserveAspectFit 或 Image.PreserveAspectCrop 时，则可以不等于 Image 项的宽度、高度。

4、asynchronous : bool

指定本地文件系统上的图像是否在单独的线程中异步加载。设为true这会导致用户界面线程在加载图像时阻塞。默认值为 false。

此属性仅对从本地文件系统读取的图像有效。通过网络资源（例如 HTTP）加载的图像总是异步加载的。

5、autoTransform : bool

此属性保存图像是否应自动应用图像转换元数据。默认为 false。

6、cache : bool

指定是否应缓存图像。默认值是true。在处理大图像时，将缓存设置为 false 很有用。

7、fillMode : enumeration

填充模式。

• Image.Stretch：默认值。缩放图像以适合项目
• Image.PreserveAspectFit：图像均匀缩放以适应而不裁剪
• Image.PreserveAspectCrop：图像均匀缩放以填充，必要时进行裁剪
• Image.Tile：水平和垂直复制图像
• Image.TileVertically：图像水平拉伸并垂直平铺
• Image.TileHorizontally：图像被垂直拉伸并水平平铺
• Image.Pad：图像未转换

默认情况下 clip 为 false，这意味着即使将 fillMode 设置为 Image.PreserveAspectCrop，该项目也可能在其边界矩形之外进行绘制。

Row
{
Image
{
width: 200; height: 200;source: "qrc:/img/eee.jpg"
fillMode:Image.Stretch
}
Image
{
width: 200; height: 200;source: "qrc:/img/eee.jpg"
fillMode:Image.PreserveAspectFit
}
Image
{
width: 200; height: 200;source: "qrc:/img/eee.jpg"
fillMode:Image.PreserveAspectCrop
}
Image
{
width: 200; height: 200;source: "qrc:/img/eee.jpg"
fillMode:Image.Tile
}
Image
{
width: 200; height: 200;source: "qrc:/img/eee.jpg"
fillMode:Image.TileVertically
}
Image
{
width: 200; height: 200;source: "qrc:/img/eee.jpg"
fillMode:Image.TileHorizontally
}
Image
{
width: 200; height: 200;source: "qrc:/img/eee.jpg"
fillMode:Image.Pad
}
}

 

8、mipmap : bool

此属性保存图像在缩放或变换时是否使用 mipmap 过滤。默认为 false。

与平滑相比，mipmap 过滤在按比例缩小时可提供更好的视觉质量，但它可能会以性能为代价（在初始化图像和渲染期间）。

9、mirror : bool

此属性保存图像是否应水平反转（镜像）。默认值为false。

10、mirrorVertically : bool

此属性保存图像是否应垂直反转（镜像）。默认值为false。

11、progress : real

只读属性。此属性保存图像加载的进度，从 0.0（未加载）到 1.0（已完成）。

12、smooth : bool

此属性保存图像在缩放或变换时是否平滑过滤。默认为 true。

平滑过滤可提供更好的视觉质量，但在某些硬件上可能会较慢。如果图像以其自然大小显示，则此属性没有视觉或性能影响。

13、source : url

图像源 URL。

14、sourceClipRect : rect

如果设置此属性，则保存要加载的源图像的矩形区域。

当仅需加载图像的部分时，sourceClipRect 与 sourceSize 属性一起使用以节省系统资源。

Image
{
anchors.fill: parent
source: "reallyBigImage.svg"
sourceSize.width: 1024
sourceSize.height: 1024
sourceClipRect: Qt.rect(100, 100, 512, 512)
}

可以通过将 sourceClipRect 设置为 undefined 清除此属性以重新加载整个图像。

注意：动态更改此属性会导致重新加载图像源。

15、sourceSize : size

此属性保存全帧图像的缩放宽度和高度。

此属性设置为加载的图像存储的最大像素数，以便大图像不会使用不必要的内存。

例如，这可确保内存中的图像不大于 1024x1024 像素，无论图像的宽度和高度值如何：

Image
{
anchors.fill: parent
source: "reallyBigImage.jpg"
sourceSize.width: 1024
sourceSize.height: 1024
}

如果图像的实际大小大于 sourceSize，则将图像缩小。

如果同时设置了 sourceSize.width 和 sourceSize.height，图像将被缩小以适应指定的尺寸（除非使用 PreserveAspectCrop 或 PreserveAspectFit，否则它将被缩放以匹配裁剪/拟合的最佳尺寸），并保持图像的纵横比。缩放后图像的实际大小可通过 Item::implicitWidth 和 Item::implicitHeight 获得。

如果源是固有可缩放图像（例如 SVG），则此属性确定加载图像的大小，而不管固有大小。避免动态更改此属性；与渲染普通图像相比，渲染 SVG 很慢。

如果源是不可缩放的图像，则加载的图像将不大于此属性指定的大小。

如果同时设置了 sourceClipRect 属性，则 sourceSize 确定比例，但它将被裁剪为剪辑矩形的大小。

通过将 sourceSize 设置为 undefined，可以将 sourceSize 清除为图像的自然大小。

注意：动态更改此属性会导致重新加载图像源。

16、status : enumeration

此属性保存图像加载的状态。

• Image.Null：没有设置图像
• Image.Ready：图像已加载
• Image.Loading：当前正在加载图像
• Image.Error：加载图像时发生错误

使用此状态以某种方式提供更新或响应状态更改。 例如：

触发状态更改：

State
{
name: 'loaded'
when: image.status == Image.Ready
}

实现一个 onStatusChanged 信号处理程序：

Image
{
id: image
onStatusChanged:
{
if (image.status == Image.Ready)
console.log('Loaded')
}
}
绑定到状态值：
Text
{
text: image.status == Image.Ready ? 'Loaded' : 'Not loaded'
}

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

Text

文本项继承自 Item 可以显示纯文本和富文本。

属性成员

1、bottomPadding : real

• leftPadding : real
• padding : real
• rightPadding : real
• topPadding : real

这些属性包含内容周围的填充。

除了 contentWidth 和 contentHeight 之外，还保留了此空间。

2、effectiveHorizontalAlignment : enumeration - 查询Text 的有效水平对齐方式（只读属性）

• horizontalAlignment : enumeration - 水平对齐
• verticalAlignment : enumeration - 垂直对齐

设置文本项宽度和高度内文本的水平和垂直对齐方式。

默认情况下，文本与顶部垂直对齐。水平对齐遵循文本的自然对齐方式，例如从左向右阅读的文本将向左对齐。

horizontalAlignment 的有效值为：

• Text.AlignLeft
• Text.AlignRight
• Text.AlignHCenter
• Text.AlignJustify

verticalAlignment 的有效值为：

• Text.AlignTop
• Text.AlignBottom
• Text.AlignVCenter

请注意，对于单行文本，文本的大小就是文本的面积。在这种常见情况下，所有对齐都是等效的。如果希望文本在其父项中居中，那么需要修改 Item::anchors，或将水平对齐设置为 Text.AlignHCenter 并将宽度绑定到父项的宽度。

当使用附加属性 LayoutMirroring::enabled 来镜像应用程序布局时，文本的水平对齐也将被镜像。但是，horizo​​ntalAlignment 属性将保持不变。

3、advance : size

只读属性。从文本项第一个字符的基线原点到文本流中紧跟在此字符之后的字符的基线原点的距离（以像素为单位）。如果文本从右向左流动，则 advance 可能为负。

4、antialiasing : bool

用于决定文本是否应该使用抗锯齿。默认值为true。

只有 renderType 为 Text.NativeRendering 的 Text 才能禁用抗锯齿。

5、baseUrl : url

此属性指定用于解析文本中的相对 URL 的基本 URL。

Urls 被解析为与基本 URL 的目标位于同一目录中，这意味着路径的最后一个“/”之后的任何部分都将被忽略。

 

6、clip : bool

如果文本不适合边界矩形，文本是否被剪切。

Text
{
y: 0
width: 80
height: 80
text: " 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
clip:false
}
Text
{
y: 80
width: 80
height: 80
text: " 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
clip:true
}

 

7、color : color

文本颜色。

8、contentHeight : real、contentWidth : real

只读属性。文本宽高。

Window
{
id:root;
visible: true;
width: 500;
height: 500;
 
Text
{
id:t1
y: 0
width: 80
height: 80
text: " 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
clip:false
}
Text
{
id:t2
y: 80
width: 80
height: 80
text: " 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
clip:true
}
 
 
MouseArea
{
width: root.width;
height: root.height;
onClicked:
{
console.log(t1.contentHeight + " " + t1.contentWidth);
console.log(t2.contentHeight + " " + t2.contentWidth);
}
}
}

包括被裁剪的部分。

9、elide : enumeration

设置此属性以省略适合 Text 项目宽度的文本部分。仅当设置了显式宽度时，文本才会消失。

此属性不能用于富文本。

• Text.ElideNone - 默认
• Text.ElideLeft
• Text.ElideMiddle
• Text.ElideRight

如果此属性设置为 Text.ElideRight，则它可以与 wrapMode 一起使用。只有在设置了 maximumLineCount 或 height 后，文本才会消失。

Text
{
id:t1
y: 0
width: 80
height: 80
text: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
clip:false
elide:Text.ElideRight
}
Text
{
id:t2
y: 80
width: 80
height: 80
text: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
clip:false
elide:Text.ElideRight
wrapMode:Text.WordWrap
}
Text
{
id:t3
y: 160
width: 80
text: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
clip:false
elide:Text.ElideRight
wrapMode:Text.WordWrap
}
Text
{
id:t4
y: 360
width: 80
text: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
clip:false
elide:Text.ElideRight
}

 

如果 maximumLineCount 和 height 都被设置，则 maximumLineCount 将被应用。

10、font.bold : bool

设置字体粗细是否为粗体。

11、font.capitalization : enumeration

设置文本的大小写。

• Font.MixedCase：不应用大小写更改。
• Font.AllUppercase：所有字符以大写形式呈现。
• Font.AllLowercase：所有字符以小写形式呈现。
• Font.SmallCaps：所有字符以小型大写字母形式呈现。
• Font.Capitalize：每个单词的第一个字符为大写字符。

Text
{
y: 0
text: "hell world"
font.capitalization:Font.SmallCaps
font.pixelSize: 30
}
Text
{
y: 80
text: "hell world"
font.capitalization:Font.AllUppercase
font.pixelSize: 30
}
Text
{
y: 160
text: "hell world"
font.capitalization:Font.Capitalize
font.pixelSize: 30
}

 

12、font.family : string

设置字体的系列名称。

13、font.hintingPreference : enumeration

设置文本的首选提示。这是对底层文本渲染系统使用一定级别的提示，并且跨平台具有不同的支持。

此属性仅在 renderType 设置为 Text.NativeRendering 时才有效。

Font.PreferDefaultHinting：使用目标平台的默认提示级别。

Font.PreferNoHinting：如果可能，在字形轮廓无提示的情况下渲染文本。文本布局在排版上将是准确的，使用与所使用的相同的指标，例如打印时。

Font.PreferVerticalHinting：如果可能，渲染没有水平提示的文本，但将字形与垂直方向的像素网格对齐。在密度太低而无法准确呈现字形的显示器上，文本会显得更清晰。但由于字形的水平度量没有暗示，文本的布局将可扩展到更高密度的设备（如打印机），而不会影响换行等细节。

Font.PreferFullHinting：如果可能，在水平和垂直方向都带有提示的文本。文本将被更改以优化目标设备上的易读性，但由于指标将取决于文本的目标大小，字形、换行符和其他印刷细节的位置不会缩放，这意味着文本布局可能看起来在具有不同像素密度的设备上有所不同。

14、font.italic : bool

字体是否具有斜体样式。

15、font.kerning : bool

在塑造文本时启用或禁用字距调整 OpenType 功能。禁用此功能可能会提高创建或更改文本时的性能，但会牺牲一些装饰功能。默认值是true。

16、font.letterSpacing : real

设置字体的字母间距。字母间距更改字体中各个字母之间的默认间距。

正值增加相应像素的字母间距；负值会减小间距。

17、font.pixelSize : int

以像素为单位设置字体大小。

使用此函数使字体设备依赖。使用 pointSize 以独立于设备的方式设置字体的大小。

18、font.pointSize : real

以磅为单位设置字体大小。必须大于零。

19、font.preferShaping : bool

在一些书写系统中，例如婆罗门文字，为了使文本清晰可辨，字体会将复杂的规则应用于一组字符以正确显示它们。将 preferredShaping 属性设置为 false 将在不需要时禁用所有此类功能，这将在大多数情况下提高性能。默认为true。

20、font.strikeout : bool

字体是否具有删除线样式。

21、font.styleName : string

设置字体的样式名称。不区分大小写。 如果设置，字体将与样式名称匹配。

22、font.underline : bool

文本是否带有下划线。

23、font.weight : int

请求的字体粗细。

必须是 1 到 1000 之间的整数，或预定义值之一：

Font.Thin
Font.Light
Font.ExtraLight
Font.Normal - 默认
Font.Medium
Font.DemiBold
Font.Bold
Font.ExtraBold
Font.Black

24、font.wordSpacing : real

设置字体的字间距。更改单个单词之间的默认间距。

正值将字间距增加相应数量的像素，而负值则相应地减小字间距。

25、fontInfo.family : string

• fontInfo.pixelSize : string
• fontInfo.pointSize : string
• fontInfo.styleName : string
• fontInfo.weight : int
• fontInfo.bold : bool
• fontInfo.italic : bool

当前字体的系列名称、像素大小、点大小、样式名称、权重、是否粗体、是否斜体。

26、fontSizeMode : enumeration

指定如何确定显示文本的字体大小。对于富文本无效。

• Text.FixedSize：（默认）使用 font.pixelSize 或 font.pointSize 指定的大小。
• Text.HorizontalFit ：使用最大尺寸，不超过指定的尺寸，适合项目的宽度，无需环绕。
• Text.VerticalFit：使用适合项目高度的指定尺寸的最大尺寸。
• Text.Fit：使用适合项目宽度和高度的指定尺寸的最大尺寸。

拟合文本的字体大小具有：

• 由 minimumPointSize 或 minimumPixelSize 属性指定的最小边界
• 由 font.pointSize 或 font.pixelSize 属性指定的最大边界。

如果文本不适合具有最小字体大小的项目边界，则文本将根据 elide 属性被省略。

27、hoveredLink : string

当用户将鼠标悬停在嵌入在文本中的链接时，此属性包含链接字符串。链接必须是富文本或 HTML 格式，并且 hoveredLink 字符串提供对特定链接的访问。

28、lineCount : int

返回文本项中可见的行数。富文本不支持此属性。

29、lineHeight : real

设置文本的行高。该值可以是像素或乘数，具体取决于 lineHeightMode。

默认值为 1.0 的乘数。行高必须是正值。

30、lineHeightMode : enumeration

此属性确定如何指定行高。

• Text.ProportionalHeight：（默认）设置与行成比例的间距（作为乘数）。
• Text.FixedHeight：将行高设置为固定行高（以像素为单位）。

31、linkColor : color

文本中链接的颜色。不适用于富文本。

32、maximumLineCount : int

文本项将显示的最大行数。富文本不支持此属性。

33、minimumPixelSize : int

此属性指定由 fontSizeMode 属性缩放的文本的最小字体像素大小。

如果 fontSizeMode 为 Text.FixedSize 或 font.pixelSize 为 -1，则忽略此属性。

34、minimumPointSize : int

此属性指定由 fontSizeMode 属性缩放的文本的最小字体点大小。

如果 fontSizeMode 为 Text.FixedSize 或 font.pointSize 为 -1，则忽略此属性。

35、renderType : enumeration

覆盖此组件的默认呈现类型。

支持的渲染类型有：

• Text.QtRendering
• Text.NativeRendering

如果希望文本在目标平台上看起来是原生的，并且不需要文本转换等高级功能，请选择 Text.NativeRendering。

36、renderTypeQuality : int

覆盖此组件的默认渲染类型质量。这是一种低级定制，在大多数情况下可以忽略。 目前只在 renderType 为 Text.QtRendering 时有效。

Text.QtRendering 使用的光栅化算法可能会在大文本尺寸下产生伪影，例如尖角看起来比应有的更圆。如果这是特定文本项的问题，请增加 renderTypeQuality 以提高渲染质量，但会消耗内存。

renderTypeQuality 可以是大于 0 的任何整数，或以下预定义值之一

• Text.DefaultRenderTypeQuality（默认）= -1
• Text.LowRenderTypeQuality = 26
• Text.NormalRenderTypeQuality = 52
• Text.HighRenderTypeQuality = 104
• Text.VeryHighRenderTypeQuality = 208

37、style : enumeration

设置附加文本样式。

Text.Normal - 默认

Text.Outline
Text.Raised
Text.Sunken
Row
{
Text { font.pointSize: 24; text: "测试Normal "; styleColor: "red" }
Text { font.pointSize: 24; text: "测试Raised "; style: Text.Raised; styleColor: "red" }
Text { font.pointSize: 24; text: "测试Outline ";style: Text.Outline; styleColor: "red" }
Text { font.pointSize: 24; text: "测试Sunken"; style: Text.Sunken; styleColor: "red" }
}

 

38、styleColor : color

文本样式使用的辅助颜色。用作轮廓文本的轮廓颜色，以及凸起或凹陷文本的阴影颜色。

39、text : string

要显示的文本。

40、textFormat : enumeration

显示文本属性的格式。

支持的文本格式有：

Text.AutoText：默认值，自动检测
Text.PlainText：纯文本
Text.StyledText：富文本， HTML 3.2。
Text.RichText：富文本，HTML 4
Text.MarkdownText

41、truncated : bool

文本是否由于 maximumLineCount 或 elide 被截断。富文本不支持此属性。

42、wrapMode : enumeration

换行模式。只有在设置了明确的宽度时，文本才会换行。

• Text.NoWrap：默认值。不换行。必要时 contentWidth 会超过文本项设置的宽度。
• Text.WordWrap：仅在单词边界上换行。必要时 contentWidth 会超过文本项设定的宽度。
• Text.WrapAnywhere：换行可能在一行上的任何点进行（即使在单词的中间）。
• Text.Wrap：如果可能，在单词边界处换行；否则换行可能在一行上的任何点进行。

信号成员

1、lineLaidOut(object line)

为在 Text.PlainText 或 Text.StyledText 模式的布局过程中布局的每一行文本发出此信号。

Text.RichText 模式不会发出。

参数中的线对象提供有关当前正在布置的线的更多详细信息。可通过它设置线属性。

指定线对象的属性为：

• number：（只读）行号，从零开始。
• x：指定行在 Text 元素内的 x 位置。
• y：指定行在 Text 元素内的 y 位置。
• width：指定线条的宽度。
• height：指定线的高度。
• implicitWidth：（只读） 该行根据其内容自然占据的宽度。
• isLast：（只读）该行是否为最后一行。

将 Text 项的前 5 行向右移动 100 像素：

Text
{
id:text
y: 0

text: "时间会刺破青春表面的彩饰，会在美人的额上掘深沟浅槽；会吃掉稀世之珍！天生丽质，什么都逃不过他那横扫的镰刀。"

width: 200
wrapMode:Text.WordWrap
font.pixelSize: 30
 
onLineLaidOut:
{
if (line.number < 5)
{
line.x = line.x + 100
line.width = line.width - 100
}
}
}

 

2、linkActivated(string link)

当用户单击嵌入在文本中的链接时，会发出此信号。链接必须是富文本或 HTML 格式，并且链接字符串提供对特定链接的访问。

Text
{
id:text
font.pixelSize: 30
// textFormat: Text.RichText
text: "<a href=\"https://www.baidu.com\">百度</a>"
onLinkActivated:
{
console.log("点击 " + link)
}
}

3、linkHovered(string link)

当用户悬停嵌入在文本中的链接时会发出此信号。链接必须是富文本或 HTML 格式，并且链接字符串提供对特定链接的访问。鼠标进入超链接文本和退出超链接文本都会发出此信号。

Text
{
id:text
font.pixelSize: 30
// textFormat: Text.RichText
text: "<a href=\"https://www.baidu.com\">百度</a>"
onLinkHovered:
{
console.log("悬浮 " + link)
}
}

成员函数

1、forceLayout()

触发显示文本的重新布局。

Window
{
id:root;
visible: true;
width: 500;
height: 500;
 
Text
{
id:text
font.pixelSize: 30
text: "黄河之水天上来"
onLineLaidOut:
{
console.log("文本重新布局了")
}
}
 
MouseArea
{
width: root.width;
height: root.height;
onClicked:
{
text.forceLayout()
}
}
}

2、linkAt(real x, real y)

返回内容坐标中点 x、y 处的链接字符串，如果该点不存在链接，则返回空字符串。

Text
{
id:text
font.pixelSize: 30
text: "<a href=\"https://www.baidu.com\">黄河之水天上来</a>"
}
 
MouseArea
{
width: root.width;
height: root.height;
onClicked:
{
console.log(text.linkAt(mouse.x,mouse.y))
}
}

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓