一、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. How-important-is-deep-learning-in-autonomous-driving

    Deep learning (DL) is a very interesting technology indeed and yes it does solve perception really w ...

  2. ASP.NET Web API 2 的返回结果

    HttpResponseMessage IHttpActionResult void 某些其他类型 总结归纳 原文地址:https://www.cnblogs.com/xgzh/p/11208611. ...

  3. C# - VS2019 WinFrm应用程序连接Access数据库,并简单实现数据库表的数据查询、显示

    序言 众所周知,Oracle数据库和MySQL数据库一般在大型项目中使用,在某些小型项目中Access数据库使用较为方便,今天记录一下VS2019 WinFrm应用程序连接Access数据库,并实现数 ...

  4. laravel报错 No query results for model . 的解决方法

    这个通常由路由绑定出的问题,注意有绑定模型的路由,同路径的路由需要放在没绑定路由的后面 例如:/product/comments和/product的是同路径,/product必须放在/product/ ...

  5. js-深拷贝浅拷贝

    深拷贝浅拷贝可以考察一个人的很多方面,例如:基本功,逻辑能力,编码能力: 在实际工作中的应用:比如用于页面展示的数据状态,与需要传给后端的数据包中,有部分字段的值不一致的话,就需要在传参时根据接口文档 ...

  6. OC编码规范

    http://www.jianshu.com/p/8b76814b3663#class-constructor-methods

  7. 打开前端工程 Node Sass does not yet support your current environment: Windows 64-bit

    卸载当前sass版本,重新安装sass 打开cmd进入工程文件夹: 删除 npm uninstall --save node-sass 安装 npm install --save node-sass ...

  8. nodejs实现简单爬虫

    nodejs结合cheerio实现简单爬虫 let cheerio = require("cheerio"), fs = require("fs"), util ...

  9. Bayesian Optimization使用Hyperopt进行参数调优

    超参数优化 Bayesian Optimization使用Hyperopt进行参数调优 1. 前言 本文将介绍一种快速有效的方法用于实现机器学习模型的调参.有两种常用的调参方法:网格搜索和随机搜索.每 ...

  10. zz深度学习目标检测2014至201901综述

    论文学习-深度学习目标检测2014至201901综述-Deep Learning for Generic Object Detection A Survey  发表于 2019-02-14 |  更新 ...