一、Textinput

Textinput 用于编辑一行文本,类似于 QLineEdit。

  • font 分组属性允许你设置 Textlnput 元素所用字体的各种属性,包括字体族(family)、大 小(pixelSize、pointSize)、粗细(bold、weight)、斜体(italic)、下画线(underline)等。

  • 还有一些属性与 Text 元素一样,如 text 属性可以设置或获取元素的文本,horizontalAlignment 和 verticalAlignment 用于设定文本对齐方式,wrapMode 设置文本超过控件宽度时的换行策略,color 设置文字颜色,contentWidth、contentHeight 返回文本的宽、高。

  • length 属性返回编辑框内的字符个数。maxinumiLength 设置编辑框允许输入的字符串的最大长度, 超过这个长度就会被截断。

  • 假如你想使用 Textlnput 来输入密码,可以设置 echoMode 属性为 Textlnput.Password、 Textlnput.PasswordEchoOnEdit 或 Textlnput.NoEcho,而 echoMode 默认为 Textlnput.Normal, 即输入什么显示什么。如果 echoMode 不为 Textlnput.Normal,那么 displayText 属性就保存显示给用户的文本,而 text 属性则保存实际输入的文本,比如你设定 passwordCharacter 为 "*", echoMode 为 Textlnput.Password,那么 displayText 属性内保存的就是一串 "*"。

Textlnput 还支持粘贴、撤销、重做、滚动等特性。不过,Textlnput不支持使用HTML标记的富文本。

Textinput 同时也支持适应 validator 或 inputMask 对输入文本做范围限制,也可以设置 echoMode 实现密码框的效果。

  • inputMask 是个字符串,用来限制你可以输入的字符。掩码串内包含允许的字符和分隔符,后面还可以跟一个可选的分号,以及一个用于补空白的字符。举个简单的例子,你想让用户输入类似于 "2014-01-30" 这种格式的日期, 可以将 inputMask 设置为 "0000-00-00"。

  • Textlnput 目前支持 IntValidator、DoubleValidator、RegExpValidator,如果你设置了 validator属性,那么用户就只能输入符合 validator 所界定范围的字符。

  • IntValidator 可以设置一个整数范围,top、bottom 设定最大值、最小值,不设置的话使用整型的最大值、最小值。

  • RegExpValidator 让我们提供一个正则表达式作为验证器。

当用户按了回车键或确认键,或者编辑框失去焦点时,会发出 accepted 和 editingFinished 信号,开发者可以实现 onAccepted 和 onEditingFinished 信号处理器来处理。需要注意的是, 如果你设置了 inputMask 或 validator,那么只有在编辑框内的文本符合限制条件时这两个信号才会触发。

TextInput 除了显示光标和文本外,默认并没有边框等装饰性效果,所以在使用时一般要为其添加一个可视化的外观。 示例代码如下:

import QtQuick 2.2
import QtQuick.Window 2.0 Window {
visible: true
width: 320
height: 240 Row {
spacing: 10
anchors.centerIn: parent Text {
text: qsTr("请输入密码:");
font.pointSize: 15;
verticalAlignment: Text.AlignVCenter
} Rectangle {
width: 100
height: 24
color: "lightgrey"
border.color: "grey" TextInput {
anchors.fill: parent
anchors.margins: 2
font.pointSize: 15
focus: true
onAccepted: console.log("accepted")
}
}
}
}

执行后的效果图如下:

二、TextEdit

TextEdit 是 Qt Quick 提供的多行文本编辑框,它的大多数属性与 Textinput 类似,不同之处在于,TextEdit 用来显示多行的可编辑的格式化文本,它既可以显示纯文本也可以显示富文本。如下面的代码所示:

import QtQuick 2.2
import QtQuick.Window 2.0 Window {
visible: true
width: 320
height: 240 Column {
anchors.centerIn: parent Rectangle {
width: 120
height: 100
color: "lightgrey"
border.color: "grey" TextEdit {
id : textEdit
width: 100
height: 100
font.pointSize: 20
color: "blue"
focus: true
}
}
}
}

执行后的效果图如下:

参考:

《Qt Quick核心编程》第9章

QML学习(五)—<TextInput和TextEdit输入栏>

Qt Quick 常用元素:Textinput 与 TextEdit 文本编辑框的更多相关文章

  1. Qt Quick 常用元素:RadioButton(单选框),CheckBox(复选框) 与 GroupBox(分组框)

    先介绍一下 ExclusiveGroup. ExclusiveGroup (互斥分组)本身是不可见元素,用于将若干个可选择元素组合在一起, 供用户选择其中的一个选项.你可以在 ExclusiveGro ...

  2. Qt Quick 常用元素:TabView(选项卡) 与 Slider(滑块)

    一.TabView TabView 可以实现类似 Windows 任务管理器的界面,有人叫 TabView 为标签控件,有人又称之为选项卡控件,我们知道它就是这么个东西就行了.现在来介绍 TabVie ...

  3. Qt Quick 常用元素:ComboBox(下拉列表) 与 ProgressBar(进度条)

    一.ComboBox ComboBox,即下拉列表框,由一个列表框和一个标签控件(或编辑控件)组成.ComboBox 的下拉列表是使用 Menu 实现的,列表内的每个条目对应一个 Menultem. ...

  4. qt quick中qml编程语言

    Qt QML 入门 — 使用C++定义QML类型 发表于 2013 年 3 月 11 日   注册C++类 注册可实例化的类型 注册不实例化的QML类型 附带属性 注册C++类 注册可实例化的类型 如 ...

  5. Qt 学习之路 :Qt Quick Controls

    自 QML 第一次发布已经过去一年多的时间,但在企业应用领域,QML 一直没有能够占据一定地位.很大一部分原因是,QML 缺少一些在企业应用中亟需的组件,比如按钮.菜单等.虽然移动领域,这些组件已经变 ...

  6. Qt 5入门指南之Qt Quick编程示例

    编程示例 使用Qt创建应用程序是十分简单的.考虑到你的使用习惯,我们编写了两套教程来实现两个相似的应用程序,但是使用了 不同的方法.在开始之前,请确保你已经下载了QtSDK的商业版本或者开源版本,并且 ...

  7. 《Qt Quick 4小时入门》学习笔记2

    http://edu.csdn.net/course/detail/1042/14805?auto_start=1   Qt Quick 4小时入门 第五章:Qt Quick基本界面元素介绍   1. ...

  8. Qt Quick里的图形效果:阴影(Drop Shadow)

    Qt Quick提供了两种阴影效果: DropShow,阴影.这个元素会根据源图像,产生一个彩色的.模糊的新图像,把这个新图像放在源图像后面,给人一种源图像从背景上凸出来的效果. InnerShado ...

  9. Qt Quick 简单教程

    上一篇<Qt Quick 之 Hello World 图文详解>我们已经分别在电脑和 Android 手机上运行了第一个 Qt Quick 示例—— HelloQtQuickApp ,这篇 ...

随机推荐

  1. vue入门案例

    1.技术在迭代,有时候你为了生活没有办法,必须掌握一些新的技术,可能你不会或者没有时间造轮子,那么就先把利用轮子吧. <!DOCTYPE html> <html> <he ...

  2. java基于NIO的分散读取文件,然后统一聚合后写入文件

    分散读取:对于一个文件,可以分散的读取数据,可以快速的读取,好比多个线程在分段同时读取: 聚合写入:为了提高效率,一般读取到的数据都是分散的,要快速写入,就需要把分散的数据聚集在一起,然后一块写入到文 ...

  3. WPF 选择文件选择文件夹

    namespace Microsoft.Win32 选择文件: if (string.IsNullOrEmpty(folderInitialDirectory)) { folderInitialDir ...

  4. C++调用linux命令并获取返回值

    qt中封装了相关的方法, 但是因为我的命令中用到了管道命令, 出现了非预期结果, 所有改用了linux系统原生的方法. 下边是一个判断某进程是否存在的例子. 当前存在一个问题,当linux返回多行时, ...

  5. 2.原生js实现图片懒加载

    网上查了很多图片懒加载的内容, 但基本上都是jQuery实现的, 没有说清楚其原理, 所以研究了一下 多的不说, 上代码, 看不明白的建议看下我的上一篇文章<1. 图解浏览器和用户设备的宽高等属 ...

  6. UML——Use Case Diagram(用例图)

    用例图主要用来描述角色以及角色与用例之间的连接关系.说明的是谁要使用系统,以及他们使用该系统可以做些什么.一个用例图包含了多个模型元素,如系统.参与者和用例,并且显示这些元素之间的各种关系,如泛化.关 ...

  7. python 之Lambda表达式

    python 的 lambda 表达式 python写一些执行脚本时,使用lambda就可以省下定义函数的过程,比如说我们只是需要写个简单的脚本来管理服务器时,我们就不用专门定义函数然后再写调用,使用 ...

  8. os模块,sys模块,json和pickle模块,logging模块

    目录 OS模块 sys模块 json和pickle模块 序列化和反序列化 json模块 pickle logging模块 OS模块 能与操作系统交互,控制文件 / 文件夹 # 创建文件夹 import ...

  9. 初识.netCore以及如何vs2019创建项目和发布

    一:什么是.netCore 从图上得知,.NetCore是同.NetFramework一样也是一种框架,并且都是基于.Net Standard Library,前面我们有用过.netFramwork来 ...

  10. odoo10学习笔记七:国际化、报表

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189297.html 一:国际化(模块翻译) 我们开发的模块要国际化通用,就要开发出不同的语言支持. 这些 ...