没有合适的资源?快使用搜索试试~ 我知道了~
Qt Quick常用元素介绍,适合初学者
需积分: 5 0 下载量 91 浏览量
2024-05-13
12:27:14
上传
评论
收藏 742KB PDF 举报
温馨提示
试读
55页
Qt Quick常用元素介绍,Qt Quick 是一个用于创建高性能和动态图形用户界面的框架,它是 Qt 框架的一部分。Qt Quick 允许你使用 QML(Qt Modeling Language)和 C++ 来创建跨平台的图形应用程序。QML 提供了一种声明性的语法来定义用户界面,而 C++ 则用于实现更复杂的逻辑和与底层系统的交互。 在 Qt Quick 中,有许多内置的控件(也称为元素或项)可供使用,这些控件通常被称为 Qt Quick Controls 2。本文主要介绍一些常用的 Qt Quick 控件TextInput、TextField、TextEdit、TextArea、RadioButton、CheckBox等如何使用。
资源推荐
资源详情
资源评论
Qt Quick 常用元素介绍
本文介绍 Qt Quick 的控件,如 TextInput、TextField、TextEdit、TextArea、RadioButton、
CheckBox 等如何使用。
1 行编辑(TextInput 与 TextField)
Qt Quick 提供了两个行编辑控件,即 TextInput 与 TextField。
1.1 TextInput
TextInput 用于编辑一行文本,类似于 QLineEdit。支持使用 validator 或 inputMask
对输入文本做范围限制,也可以设置 echoMode 实现密码框的效果。
font 分组属性允许你设置 TextInput 元素所用字体的各种属性,包括字体族
(family)、大小(pixelSize、pointSize)、粗细(bold、weight)、斜体(italic)、下
画线(underline)等。
还 有 一 些 属 性 与 Text 元 素 一 样, 如 text 属 性 可 以 设 置 或 获
取 元 素 的 文 本,horizontalAlignment 和 verticalAlignment 用于设定文本对齐
方式,wrapMode 设置文本超过控件宽度时的换行策略,color 设置文字颜色,
contentWidth、contentHeight 返回文本的宽、高……不过,TextInput 不支持使用
HTML 标记的富文本。
length 属性返回编辑框内的字符个数,使用它比通过 text 属性取得文本再调用
String 对象的 length 方法效率要高很多。maximumLength 设置编辑框允许输入的
字符串的最大长度,超过这个长度就会被截断。
你我皆知,编辑框有一个光标,就像天上的星星眨眼睛,咿呀咿呀呦。TextInput
的 cursor 就是光标,可以通过 cursorDelegate 来定制它的外观,而 QLineEdit 的
cursor 样子很难定制。
cursorPosition 可以设置或返回光标位置;cursorVisible 设置或返回光标的可见状
态;
cursorRectangle 是只读属性,返回光标所在矩形,定制的 cursorDelegate 会受这
个属性影响,当 cursorRectangle 变化时,cursorDelegate 的尺寸和位置会跟着变
化。
假 如 你 想 使 用 TextInput 来 输 入 密 码 , 可 以 设 置 echoMode 属 性 为
TextInput.Password 、 TextInput.PasswordEchoOnEdit 或 TextInput.NoEcho , 而
echoMode 默认为 TextInput.Normal,即输入什么显示什么。如果 echoMode 不为
TextInput.Normal,那么 displayText 属性就保存显示给用户的文本,而 text 属性
则保存实际输入的文本,比如你设定 passwordCharacter 为"*",echoMode 为
TextInput.Password,那么 displayText 属性内保存的就是一串"*"。
TextInput 还 支 持 粘 贴 (canPaste)、 撤 销 (canUndo)、 重 做 (canRedo)、
滚 动(autoScroll)等特性,有兴趣的话可以设置它们玩玩儿。
该说说 inputMask 和 validator 了。
inputMask 是 个 字 符 串 , 用 来 限 制 你 可 以 输 入 的 字 符 , 可 以 参 考
QLineEdit::inputMask 来了解详情。掩码串内包含允许的字符和分隔符,后面还可
以跟一个可选的分号,以及一个用于补空白的字符。举个简单的例子,你想让用
户 输 入 类 似 于 "2014-01-30" 这 种 格 式 的 日 期 , 可 以 将 inputMask 设 置 为
"0000-00-00";你想让用户输入沪市股票代码,可以设置 inputMask 为"600000"。
TextInput 目 前 支 持 IntValidator、 DoubleValidator、 RegExpValidator, 如 果
你 设 置 了 validator 属性,那么用户就只能输入符合 validator 所界定范围的字
符。
IntValidator 可以设置一个整数范围,top、bottom 设定最大值、最小值,不设置
的话使用整型的最大值、最小值。简单的示例:
TextInput {
width: 120;
height: 30;
font.pixelSize: 20;
anchors.centerIn: parent;
validator: IntValidator{ top: 15; bottom: 6;}
focus: true;
}
RegExpValidator 让我们提供一个正则表达式作为验证器,比如你想让用户输入一
个 IP 地址, 可 能 会 使 用"000.000.000.000; _"作 为 inputMask, 但 是 它
不 能 限 制 用 户 输 入 诸如"388.129.0.296"这样的非法 IP 地址。如果我们使
用正则表达式验证器,就可以严格限制用户的输入。下面是示例代码片段,用户
只能输入合法的数字和"."(为了排版我人为折行了):
TextInput {
width: 240;
height: 30;
font.pixelSize: 20;
anchors.centerIn: parent;
validator: RegExpValidator{
regExp: new RegExp("(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2})
\\.(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2})
\\.(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2})
\\.(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2})");
}
inputMask: "000.000.000.000;_";
focus: true;
}
TextInput 允许用户选择文本,如果 selectByMouse 属性设置为 true,用户就可以
使用鼠标来选择编辑框内的文字。selectedText 是只读属性,保存用户选中的文
字。selectionStart、selectionEnd 表示选中的起、止位置;selectedTextColor 表示
选中的文本颜色,而 selectionColor 则表示选中框的颜色。
当用户按了回车键或确认键,或者编辑框失去焦点时,会发出 accepted 和
editingFinished 信号,开发者可以实现 onAccepted 和 onEditingFinished 信号处理
器来处理。需要注意的是,如果你设置了 inputMask 或 validator,那么只有在编
辑框内的文本符合限制条件时这两个信号才会触发。
TextInput 还有一些方法,如 copy()、cut()、insert()、select()、getText()等,需要
使用的话请查阅 Qt 帮助。
1.2 TextField
TextField 的基本功能与 TextInput 类似,咱们单说它与 TextInput 的不同之处。
(1)文本颜色与背景色
TextInput 的文本颜色使用 color 属性指定,TextField 的文本颜色使用 textColor 属
性指定。
TextInput 没有背景,是透明的,能够与父控件无缝结合。而 TextField 有背景,
其背景色可通过 TextFieldStyle 的(Component 类型的)background 属性来设定。
(2)TextFieldStyle
TextField 对应有一个 TextFieldStyle 来定制风格,比如背景、字体、选中背景色与
选中文本颜色。但比较 TextField 与 TextInput 你会发现,其实就多了个背景,其
他都是一样的。你可以这样使用 TextFieldStyle:
TextField {
style: TextFieldStyle {
textColor: "black"
background: Rectangle {
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: "#333"
border.width: 1
}
}
}
上面的代码使用 Rectangle 对象作为 TextField 的背景,提供了边框和背景色,以
及建议大小。
通过在 TextInput 下面放置一个 Z 序较小的 Rectangle 对象,可以达到类似的效果。
(3)TextInput 可定制 cursor
TextInput 类的 cursorDelegate 属性可以用来定制编辑光标,而 TextField 没有这个
哦。
2
文本块(
TextEdit
与
TextArea
)
Qt Quick 中有两个块编辑控件,即 TextEdit 和 TextArea。
2.1 TextEdit
TextEdit 是 Qt Quick 提供的多行文本编辑框,它的大多数属性与 TextInput 类似,
textDocument 属性,可以结合 QSyntaxHighlighter 来实现语法高亮。
textFormat 用 于 指 定 文 本 格 式, 是 纯 文 本 (TextEdit.PlainText)、 富
文 本 ( TextEdit.RichText ) 还 是 自 动 检 测 ( TextEdit.AutoText ), 默 认 值 是
TextEdit.PlainText。
lineCount 属性返回编辑框内的文本行数。
因为支持富文本,TextEdit 还有 linkActivated 信号,在用户点击文本中内嵌的链
接时触发,linkHovered 信号在鼠标悬停在文本内嵌的链接上方时触发。
当一行文本要占用的宽度大于 TextEdit 的宽度时,wrapMode 决定如何折行,它
支持 TextEdit.WordWrap(在单词边界处折行)、TextEdit.NoWrap(不折行,超出
宽 度的 文 本不 显示 )、 TextEdit.WrapAnywhere( 折 行 , 不 考 虑单 词 边 界 )、
TextEdit.Wrap(折行,尽量在单词边界处折行)4 种换行策略。
修改文本可以使用 append、insert、cut、paste、remove 等方法,获取文本可以
使用 getText 方法或者 text 属性。
需要注意的是,TextEdit、TextInput、Text 等元素的背景都不能定制,如果想要一
个背景,可以在这些对象的底下放一个 Z 序更小的 Rectangle 对象。
2.2 TextArea
TextArea 与 TextEdit 类似,咱也只说其不同之处,大概有 4 点。
(1)文本颜色与背景色
TextEdit 的文本颜色使用 color 属性指定,TextArea 的文本颜色使用 textColor 属性
指定。
TextEdit 没有背景,是透明的,能够与父控件无缝结合。而 TextArea 有背景,其
剩余54页未读,继续阅读
资源评论
icysmile131
- 粉丝: 2963
- 资源: 95
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功