QML自定义TextField控件

QML中QtQuick提供的文本编辑框控件包括 TextInput，TextField，TextEdit，TextArea。Textlnput 与 TextField 为行编辑控件，TextEdit 与 TextArea 为块编辑控件。

行编辑框中，TextInput没有默认边框需自行定义外框，使用起来没有TextField方便，项目中大多选用TextField，自定义TextField控件时，只需要定义其背景、字体、鼠标选中、文字位置等属性。自定义的控件具体见代码文件TextField.qml：

/*
* 自定义QML CheckBox
* Since:Qt 5.7 采用QtQuick.Controls 2.12库(2.0版)
*/import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as TT.TextField {id: control;implicitWidth: implicitBackgroundWidth;implicitHeight: implicitBackgroundHeight;padding: 6; // TextField内部上下左右的距离leftPadding: padding + 4; // 文字距离左边界的距离color: "#333333";   // 字体颜色font.pixelSize: 12; // 字体大小font.family: "Microsoft YaHei"; // 字体selectByMouse: true;selectionColor: control.palette.highlight; // 鼠标选中文字的背景颜色selectedTextColor: control.palette.highlightedText; // 鼠标选中文字的字体颜色placeholderTextColor: Color.transparent(control.color, 0.5); // 预显示字体颜色(为正式字体的一半色彩)verticalAlignment: TextInput.AlignHCenter; // 文本水平对齐方式renderType: Text.NativeRendering;  // 字体渲染类型 与本地平台有关，此处可使字体更加清晰// 正则输入限制，此处表示不限制输入validator: RegExpValidator { regExp: /.*/ }// 占位符文本属性设置PlaceholderText {id: placeholder;x: control.leftPadding;y: control.topPadding;  // 文本渲染位置width: control.width - (control.leftPadding + control.rightPadding);height: control.height - (control.topPadding + control.bottomPadding);text: control.placeholderText;font: control.font;color: control.placeholderTextColor;verticalAlignment: control.verticalAlignment;visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter);elide: Text.ElideRight;renderType: control.renderType;}// 文本输入框背景属性设置background: Rectangle {radius: 3;implicitWidth: 120;implicitHeight: 30;color: control.readOnly ? "#EEEFF7" : "#FFFFFF";border.width: 1;border.color: "#E5E5E5";}}

上面自定义代码中没有限制其正则输入，本文提供几种常用的正则限制，针对不同的输入框代码如下：

// 浮点数输入 如： 0.23 1.34E-5
validator: RegExpValidator { regExp: (/^[-\+]?\d*\.?\d+([Ee][-\+]?\d+)?/) }// 整数输入 0 ~ 9999999位
validator: RegExpValidator { regExp: (/^\d{0,7}$/) }// 汉字输入 和 - 只能输入120个
validator: RegExpValidator { regExp: (/[\w\s-]{1, 120}/) }// A-Za-z0-9输入
validator: RegExpValidator { regExp: (/^[A-Za-z0-9]+$/) }// 整数输入 0 ~ 9999999位
validator: RegExpValidator { regExp: (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/) }// Email输入
validator: RegExpValidator { regExp: (/^\d{0,7}$/) }// 日期输入
validator: RegExpValidator { regExp: (/^\d{4}-\d{1,2}-\d{1,2}/) }

自定义控件应用：

在main.qml中引入两种控件qml路径as成My，并使用此Controls具体见代码实现：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.12
import "myControl" as MyWindow {visible: true;width: 640;height: 480;title: qsTr("自定义Control");My.Label {anchors.top: parent.top;anchors.topMargin: 56;anchors.right: text1.left;anchors.rightMargin: 15;text: qsTr("汉字输入");}My.TextField {id: text1;width: 150;anchors.top: parent.top;anchors.topMargin: 50;anchors.left: parent.left;anchors.leftMargin: 100;placeholderText: qsTr("预显示字体");}My.Label {anchors.top: text1.bottom;anchors.topMargin: 56;anchors.right: text2.left;anchors.rightMargin: 15;text: qsTr("浮点数输入");}My.TextField {id: text2;width: 150;anchors.top: text1.bottom;anchors.topMargin: 50;anchors.left: parent.left;anchors.leftMargin: 100;text: qsTr("1.25e-5");}
}

自定义控件展示：

如下图：

QML自定义TextField控件相关推荐

Qt使用C++封装qml自定义图形控件（QQuickPaintedItem）
C++封装qml自定义图形控件 QtWidget.qml简介通过继承QQuickPaintedItem封装控件描述公用接口定义代码示例效果图 QtWidget.qml简介 Qt提供了2套UI ...
QML 自定义ComboBox控件
ComboBox是填充数据模型,数据模型通常是JavaScript数组,ListModel或者是整数,但是也支持其他类型的数据模型提供的属性. QtQuick在Qt 5.7在Controls 2.5版 ...
2. QML使用View3D控件显示三维模型
1. View3D介绍 View3D控件和QML中其它控件类似,只是在其中可以显示三维模型,类似在界面中创建一个场景,所有的模型将在这个场景中被加载出来. 效果展示: View3D三维模型加载 1.1 ...
Android 手机卫士--自定义组合控件构件布局结构
由于设置中心条目中的布局都很类似,所以可以考虑使用自定义组合控件来简化实现本文地址:http://www.cnblogs.com/wuyudong/p/5909043.html,转载请注明源地址. ...
Android View体系（十）自定义组合控件
相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...
iOS自定义View 控件自动计算size能力
iOS自定义View 控件自动计算size能力背景在使用 UILabel 和 UIImage 的时候,不用指定宽高约束,控件也不会报约束缺失,还可以根据内容自己确定适合的宽高,特别适合 Xib 和 ...
VS2010 自定义用户控件未出现在工具箱的解决方案
VS2010 自定义用户控件未出现在工具箱的解决方案参考文章: (1)VS2010 自定义用户控件未出现在工具箱的解决方案 (2)https://www.cnblogs.com/lyout/arch ...
[置顶] 分步实现具有分页功能的自定义DataList控件【附源代码】
一.控件也是类 [效果] [操作步骤] 1. 新建网站Web 2. 添加类CustomDataList.cs(系统会提示你把类建在App_Code文件夹中),代码如下: using System; ...
[转] 使用模板自定义 WPF 控件
[转] 使用模板自定义 WPF 控件 ...

QML自定义TextField控件

自定义控件应用：

自定义控件展示：

QML自定义TextField控件相关推荐

最新文章

热门文章