【Qt之Quick模块】7. Quick基础、常用组件Item、Rectangle、Text、TextInput、TextEdit等

1. 概述

Qt Quick模块是编写QML应用程序的标准库。Qt QML模块提供QML引擎和语言基础结构，Qt Quick模块提供用QML创建用户界面所需的所有基本类型。它提供了一个可视化画布，包括用于创建和动画化可视化组件、接收用户输入、创建数据模型和视图以及延迟对象实例化的类型。
Qt Quick模块提供了一个QML API(为用QML语言创建用户界面提供QML类型)和一个c++ API(用c++代码扩展QML应用程序)。
注意:一组基于Qt quick的UI控件也可用于创建用户界面。

1.1 使用Qcuick模块image.png

需在.pro文件中添加：

QT += quick

在所用的文件中导入以下代码：

import QtQuick

1.2 Quick 模块类关系图

image.png

2. 可视组件

2.1 Item

Item类型是Qt Quick中所有可视项目的基本类型。

Qt Quick中的所有可视项都继承自Item。尽管Item对象没有可视外观，但它定义了可视项目中常见的所有属性，例如x和y位置、宽度和高度、锚定和键处理支持。

2.1.1 Item作为容器

Item类型可用于将多个项分组到单个根下。例如:

 import QtQuick 2.0Item {Image {source: "tile.png"}Image {x: 80width: 100height: 100source: "tile.png"}Image {x: 190width: 100height: 100fillMode: Image.Tilesource: "tile.png"}}

2.1.2 Item不透明度

    Item{Rectangle{// 设置透明度opacity: 0.5color: "lightgrey"width: 100height: 100border.color: "red"anchors.centerIn: rootRectangle{color: "blue"width: 100height: 100border.color: "blue"}}}

image.png

2.1.3 Item是否可见和启用

    Item{Rectangle{// 设置透明度opacity: 0.5color: "lightgrey"width: 100height: 100border.color: "red"Rectangle{color: "blue"width: 100height: 100border.color: "blue"// 是否可见visible: false// 是否启用enabled: false}}}

image.png

2.1.4 Item z轴堆叠顺序

Item有一个z属性，可以用来设置项的堆叠顺序
z相同，后面的在前面的上面
z大，在z小的上面

    Item{Rectangle{// 设置透明度z : 1opacity: 0.5color: "lightgrey"width: 100height: 100border.color: "red"}Rectangle{z : 0x: 50y: 50color: "blue"width: 100height: 100border.color: "blue"}}

image.png

2.1.5 Item 定位子项 和 坐标映射

Item有以下几个函数用于定位子项和坐标映射

  • childAt(real x, real y):定位第一个在(x, y)位置的可视子项
  • mapFromItem(Item item, real x, real y):将item的坐标转换为项目坐标
  • mapToItem(Item item, real x, real y):将item的项目坐标转换为item的坐标系统

2.2 Rectangle

矩形项用于用纯色或渐变填充区域，或提供矩形边框。颜色设置可以使用名称和"#000000"格式。
属性设置可以用属性组设置。

 import QtQuick 2.0Rectangle {width: 100height: 100color: "red"border.color: "black"border.width: 5radius: 10}

image.png

 Rectangle {color: "#00B000"width: 80; height: 80}Rectangle {color: "steelblue"y: 100; width: 80; height: 80}

image.png

2.3 Text

文本项可以显示纯文本和富文本。例如，具有特定字体和大小的红色文本可以这样定义:

 Text {text: "Hello World!"font.family: "Helvetica"font.pointSize: 24color: "red"}

或者

 Text {text: "<b>Hello</b> <i>World!</i>"}

image.png
image.png

2.3.1 隐藏超过长度的文本

如下,文本长度100，超过就隐藏左边

            Text {width: 100anchors.centerIn: parenttext: "<b>Hello</b> <i>World!</i>"font.family: "Helvetica"font.pointSize: 24color: "red"elide: Text.ElideLeft}

image.png

2.3.2 换行

 Text {width: 100anchors.centerIn: parenttext: "<b>Hello</b> <i>World!</i>"font.family: "Helvetica"font.pointSize: 24color: "red"// elide: Text.ElideLeftwrapMode: Text.WrapAnywhere}

image.png

2.3.3 裁剪

clip属性用于设置文本是否被裁剪

            Text {width: 100anchors.centerIn: parenttext: "<b>Hello</b> <i>World!</i>"font.family: "Helvetica"font.pointSize: 24color: "red"// elide: Text.ElideLeft// wrapMode: Text.WrapAnywhereclip: true}

image.png

2.3.4 字体

使用font属性可对文本进行设置，用法：

font.xxx

如：

font.family: "Helvetica"
font.pointSize: 24

font可以设置bold、family、italic、pixelSize、pointSize、underline等属性。

2.3.5 对齐方式

属性horizontalAlignment 和属性verticalAlignment设置对齐方式

            Text {width: parent.widthheight: parent.heighttext: "<b>Hello</b> <i>World!</i>"font.family: "Helvetica"font.pointSize: 11color: "red"// elide: Text.ElideLeft// wrapMode: Text.WrapAnywhere// clip: truehorizontalAlignment : Text.AlignHCenterverticalAlignment: Text.AlignVCenter}

image.png

2.3.6 文本样式

使用style属性设置文本样式

            Text {width: parent.widthheight: parent.heighttext: "<b>Hello</b> <i>World!</i>"font.family: "Helvetica"font.pointSize: 11color: "red"// elide: Text.ElideLeft// wrapMode: Text.WrapAnywhere// clip: truehorizontalAlignment : Text.AlignHCenterverticalAlignment: Text.AlignVCenterstyle: Text.Outline}

image.png

2.4 TextInput

TextInput显示一行可编辑的纯文本。

TextInput用于接受一行文本输入。输入约束可以放在TextInput项上(例如，通过验证器或inputMask)，并且将echoMode设置为适当的值可以将TextInput用于密码输入字段。

2.4.1 使用验证器

    TextInput{width: parent.widthheight: parent.heighthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCentervalidator: IntValidator{bottom: 1; top: 99;}//text: "只能输入1-99的数字."}

2.4.2 使用掩码

    TextInput{width: parent.widthheight: parent.heighthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter// validator: IntValidator{bottom: 1; top: 99;}inputMask: ">AA_999_a"//text: "只能输入1-99的数字."}

2.4.3 回显方式

echoMode属性指定了TextInput文本显示方式：

枚举值描述
QLineEdit::Normal0默认方式，直接显示文本
QLineEdit::NoEcho1不显示输入内容
QLineEdit::Password2以密码掩码字符替换文本
QLineEdit::PasswordEchoOnEdit3输入时显示文本，但输入完显示密码掩码字符
    TextInput{width: parent.widthheight: parent.heighthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCentervalidator: IntValidator{bottom: 1; top: 99;}echoMode: TextInput.Password// inputMask: ">AA_999_a"//text: "只能输入1-99的数字."onEditingFinished: console.log(text)}

2.4.4 信号处理器

TextInput提供了两个输入完成的信号处理器，onAccepted()和onEditingFinished()。他们都会在按下回车时触发，区别是后者失去焦点也会触发。
TextInput也提供了一个onTextEdited()的信号处理器，当内容编辑时触发。

2.4.5 文本选取

selectByMouse属性设置使用鼠标选择TextInput中的文本。

  • selectByMouse: bool
    默认为false。
    如果为true，则用户可以使用鼠标以某种特定于平台的方式选择文本。
  • selectedText: string
    此只读属性提供当前在文本输入中选择的文本。
  • selectedTextColor: color
    突出显示文本的颜色，用于选择。
  • selectionColor: color
    用于选择的文本突出显示背景颜色。
  • selectionEnd: int
    当前选择中最后一个字符后的光标位置。
    此属性是只读的。要更改选择，请使用select（start，end），selectAll（）或selectWord（）。
  • selectionStart: int
    当前选择中第一个字符之前的光标位置。
    此属性是只读的。要更改选择，请使用select（start，end），selectAll（）或selectWord（）。
    TextInput{width: parent.widthheight: parent.heighthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCentervalidator: IntValidator{bottom: 1; top: 99999999;}//echoMode: TextInput.Password// inputMask: ">AA_999_a"//text: "只能输入1-99的数字."onEditingFinished: console.log(text)selectByMouse: truemouseSelectionMode: TextInput.SelectWordsselectionColor: "lightgrey"selectedTextColor: "red"}

image.png

2.4.6 外观

TextInput默认没有外观，都不知道光标在哪儿，所以需要自己实现自定义组件，比如，在一个Rectangle内添加一个TextInput组件。或者实现别的已经实现的组件库，如TextField组件

    Rectangle{width: 300height: 50border.color: "blue"anchors.centerIn: parentTextInput{anchors.fill: parenthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCentervalidator: IntValidator{bottom: 1; top: 99999999;}//echoMode: TextInput.Password// inputMask: ">AA_999_a"//text: "只能输入1-99的数字."onEditingFinished: console.log(text)selectByMouse: truemouseSelectionMode: TextInput.SelectWordsselectionColor: "lightgrey"selectedTextColor: "red"}}

image.png

2.5 TextEdit

TextEdit组件显示一个可编辑的格式化文本块，和TextInput相比，那个是单行的，这个是多行的。属性用法基本一样
它可以显示纯文本和富文本。例如:

 TextEdit {width: 240text: "<b>Hello</b> <i>World!</i>"font.family: "Helvetica"font.pointSize: 20color: "blue"focus: true}

image.png
将focus属性设置为true使TextEdit组件能够接收键盘焦点。
请注意，TextEdit不实现滚动、跟随光标或特定于外观的其他行为。一般会使用Flickable元素提供移动、实现光标跟随:

 Flickable {id: flickwidth: 300; height: 200;contentWidth: edit.contentWidthcontentHeight: edit.contentHeightclip: truefunction ensureVisible(r){if (contentX >= r.x)contentX = r.x;else if (contentX+width <= r.x+r.width)contentX = r.x+r.width-width;if (contentY >= r.y)contentY = r.y;else if (contentY+height <= r.y+r.height)contentY = r.y+r.height-height;}TextEdit {id: editwidth: flick.widthfocus: truewrapMode: TextEdit.WraponCursorRectangleChanged: flick.ensureVisible(cursorRectangle)}}

3. 结论

且听且忘且随风，且行且看且从容。

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

线性代数第一课+第二课总结

线性代数第一课+第二课总结

第一课 第一课是简单的行列式计算&#xff0c;主要就是要把左下角的数字全部转换为0&#xff0c;通过减去其他行的式子即可实现&#xff0c;最后把对角线的所有数字相乘&#xff0c;得到的结果是最后行列式的答案 第二课 例题1 硬算理论上其实也是可行的&#xff0c;但是使…
阅读更多...
达梦数据库查询各表数据量/以及达梦更新统计信息

达梦数据库查询各表数据量/以及达梦更新统计信息

1、达梦数据库查询各表数据量 达梦数据库与开源的MySQL不一样&#xff0c;MySQL查询各表数据量非常简单 而达梦数据库就有一些地方要注意&#xff0c;先用这句去查↓ SELECT table_name, num_rows FROM all_tables WHERE tablespace_name 表空间名; 如果结果如下图一样&…
阅读更多...
STM32——通用定时器脉冲计数实验

STM32——通用定时器脉冲计数实验

1.脉冲计数实验原理 2.从模式配置结构体 typedef struct { uint32_t SlaveMode; /* 从模式选择 / uint32_t InputTrigger; / 输入触发源选择 / uint32_t TriggerPolarity; / 输入触发极性 / uint32_t TriggerPrescaler; / 输入触发预分频 / uint32_t TriggerFilter; / 输入滤波…
阅读更多...
华为交换机忘了密码如何恢复？

华为交换机忘了密码如何恢复？

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; S系列交换机&#xff08;S1700除外&#xff09;BootROM密码缺省情况如下: S盒式交换机在V100R006C03之前的版本BootROM默认密码为huawei&#xff0c;在…
阅读更多...
Linux的引导过程与服务控制

Linux的引导过程与服务控制

一.开机启动的完整过程 引导过程&#xff1a; 1.bios加电自检 检测硬件是否正常&#xff0c;然后根据bios中的启动项设置&#xff0c;去找内核文件 服务器主机开机以后&#xff0c;将根据主板BIOS中的设置对CPU、内存、显卡、键盘灯设备进行初步检测&#xff0c;检测成功后根…
阅读更多...
CMake入门教程【基础篇】CMake+Linux gcc构建C++项目

CMake入门教程【基础篇】CMake+Linux gcc构建C++项目

文章目录 1.概述2.GCC与CMake介绍3.安装CMake和GCC4.代码示例 1.概述 在Linux环境下&#xff0c;使用CMake结合GCC&#xff08;GNU Compiler Collection&#xff09;进行项目构建是一种常见且高效的方法。CMake作为一个跨平台的构建系统&#xff0c;可以生成适用于不同编译器的…
阅读更多...
stable diffusion 基础教程-提示词之光的用法

stable diffusion 基础教程-提示词之光的用法

基图 prompt: masterpiece,best quality,1girl,solo,looking at viewer,brown hair,hair between eyes,bangs,very long hair,red eyes,blush,bare shoulders,(white sundress),full body,leaning forward,medium breasts,unbuttoned clothes,Negative prompt: EasyNegativ…
阅读更多...
机器学习与深度学习——使用paddle实现随机梯度下降算法SGD对波士顿房价数据进行线性回归和预测

机器学习与深度学习——使用paddle实现随机梯度下降算法SGD对波士顿房价数据进行线性回归和预测

文章目录 机器学习与深度学习——使用paddle实现随机梯度下降算法SGD对波士顿房价数据进行线性回归和预测一、任务二、流程三、完整代码四、代码解析五、效果截图 机器学习与深度学习——使用paddle实现随机梯度下降算法SGD对波士顿房价数据进行线性回归和预测 随机梯度下降&a…
阅读更多...
KBDSMSFI.DLL文件缺失，软件或游戏无法启动，怎样快速修复？试试这些方法

KBDSMSFI.DLL文件缺失，软件或游戏无法启动，怎样快速修复？试试这些方法

很多用户在日常使用电脑&#xff0c;启动游戏或软件的时候&#xff0c;Windows桌面会弹出错误提示框“KBDSMSFI.DLL文件缺失&#xff0c;软件无法启动或运行&#xff0c;请尝试重新安装解决”。 之所以会出现错误提示&#xff0c;是因为Windows在运行某系软件或游戏的时候&…
阅读更多...
nn.Dropout、DropPath的理解与pytorch代码

nn.Dropout、DropPath的理解与pytorch代码

文章目录 理论dropoutDropPath 代码问题&#xff1a;dropout中为什么要除以 keep_prob? ​在vit的代码中看到了DropPath&#xff0c;想知道DropPath与nn.Dropout()有什么区别&#xff0c;于是查阅相关资料记录一下。 理论 dropout ​dropout是最早的用于解决过拟合的方法&am…
阅读更多...
KBDPL.DLL文件丢失，软件游戏无法启动，修复方法

KBDPL.DLL文件丢失，软件游戏无法启动，修复方法

不少小伙伴&#xff0c;求助说遇到Windows弹窗提示“KBDPL.DLL文件丢失&#xff0c;应用无法启动的问题”&#xff0c;不知道应该怎么修复&#xff1f; 首先&#xff0c;先来了解“KBDPL.DLL文件”是什么&#xff1f; kbdpl.dll是Windows操作系统的一部分&#xff0c;是一个动…
阅读更多...
vue3 基础+进阶(三、项目篇：状态管理库、路由以及一些基本配置)

vue3 基础+进阶(三、项目篇：状态管理库、路由以及一些基本配置)

目录 第三章 状态管理库:Pinia 3.1 创建空Vue项目并安装Pinia 3.1.1 创建空Vue项目 3.1.2 安装Pinia以及持久化工具 3.2 使用pinia 3.1.1 使用案例 3.1.2 规范问题 3.1.3 简化&#xff1a;结构赋值 第四章 Vue3的Router路由理解&#xff08;与vue2类比&#xff09; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023