高级兼容编辑框实例讲解

作者：创世魂

通过本组件可快速实现一个带浮动提示，错误验证的编辑框，使用本组件必须使用“兼容窗口”。

注意：本组件位于“高级兼容编辑框组件”模块中，欲使用本组件需添加其模块。

界面设计如下图：

引用“高级兼容编辑框组件”模块后，在“扩展组件”中可找到此组件。

依次拖放组件：“按钮1”、“高级兼容编辑框1”和“编辑框1”。

代码如下图：

保存布局后，代码效果如下。

运行效果如下图：

可看到“高级兼容编辑框”的“提示文本”和“下划线”默认都是黑色。

“添加验证规则”帮助文档：

顾名思义，通过本方法可为编辑框添加验证规则，验证内容是否合法。

验证规则由“高级编辑框验证基础类”实现。

“高级编辑框验证基础类”帮助文档：

在此帮助页中可以看到该类存在“虚拟方法”。

证明需要定义新的类并添加“验证是否合法”虚拟方法来实现验证规则。

除此之外还有一个“置错误提示内容”方法，用于显示错误内容。

“验证是否合法(虚拟)”帮助文档：

可看到本虚拟方法共有两个参数，一个逻辑返回值。

参数1：返回当前编辑框的内容，用作读取内容验证判断。

参数2：用于判断当前编辑框是否为空。

本方法返回真表示合法，否则不合法。

“置错误提示内容”帮助文档：

本方法只要一个文本型参数，用于设置编辑框内容输入错误时，显示的错误文本。

注意：错误文本位于编辑框下方位置。

“启用实时验证(写)”帮助文档：

本属性继承自“高级兼容编辑框”，用于是否开启编辑框实时验证。

代码编写如下图：

1、新建一个类，类名填写“编辑框验证”，基础类填写“高级编辑框验证基础类”。

2、添加“验证是否合法”虚拟方法，并将虚拟方法自带的返回值注释或删除。

3、利用“如果”判断内容不为空的时候开始验证内容是否等于“123”。

4、如果等于“123”就返回真，否则在代码最后面调用“置错误提示内容()”方法，并返回假。

5、给“高级兼容编辑框”增加属性“启用实时验证”，属性值填写真。

6、添加“通知_被创建”虚拟方法，定义局部变量“验证器”，类型务必和定义的类名保持一致。

7、最后调用“添加验证规则()”方法，将“验证器”变量填入参数中即可。

运行结果如下图（GIF）：

最终可看到只有文本内容为“123”的时候才不会显示错误提示。

“丢失焦点自动验证(写)”帮助文档：

当调用“添加验证规则()”开启验证规则后，可通过本属性设置丢失焦点自动验证。

属性值为真则开启，否则关闭。

“错误颜色(写)”帮助文档：

通过本属性可设置错误提示的文本颜色。

代码编写如下图：

在“高级兼容编辑框1”的属性栏中分别增加以上两个属性，并设置对应的属性值。

运行结果如下图（GIF）：

最终可看到丢失焦点后，不仅编辑框进行了自动验证而且颜色错误颜色更改为黄色。

帮助文档如下图：

当调用“添加验证规则()”开启验证规则后，可通过本方法可主动验证内容是否合法。

返回真表示合法，否则不合法。

代码编写如下图：

“按钮1”被点击后，调用本方法验证并弹出不同的信息框。

运行结果如下图（GIF）：

帮助文档如下图：

顾名思义，通过本方法可清除所有的验证规则。

代码编写如下图：

“按钮1”被点击后调用本方法清除。

运行结果如下图（GIF）：

可看到“按钮1”被点击前，还可以正常的验证内容，点击后验证被清除。

帮助文档如下图：

通过本属性可设置编辑框下划线的颜色。

代码编写如下图：

“按钮1”被点击后修改本属性为“颜色类.红色”。

运行结果如下图（GIF）：

最终可看到编辑框下划线被修改为红色。

帮助文档如下图：

顾名思义，通过本属性可设置编辑框内容颜色。

注意：请不要使用父类中的“文本颜色”属性。

代码编写如下图：

“按钮1”被点击后调用本属性，设置属性值为“颜色类.红色”。

运行结果如下图（GIF）：

最终可看到编辑框颜色被修改为了红色。

帮助文档如下图：

通过本属性可以给内容颜色设置一个状态颜色表，用于不同状态下显示不同颜色。

代码编写如下图：

1、定义类型为“状态到颜色表”的变量，属性值设置两种状态颜色。

2、通过“颜色表类”创建定义的状态颜色。

3、将创建的颜色表赋值给“内容颜色表”属性。

运行结果如下图（GIF）：

最终可看到编辑框内容获得焦点前后的颜色不同。

帮助文档如下图：

顾名思义通过本属性可隐藏编辑框的下划线。

属性值提供真则隐藏，否则显示。

代码编写如下图：

“按钮1”被点击后调用本属性设置属性值为真。

运行结果如下图（GIF）：

最终可看到高级兼容编辑框的下划线被隐藏。

帮助文档如下图：

启用本属性后，如果文本过长会在编辑框底部显示一个省略号。

注意：必须开启“单行模式”才有效。

代码编写如下图：

“按钮1”被点击后，启用“单行模式=真”并启用“启用单行省略显示=真”，随后设置“内容”属性。

运行结果如下图（GIF）：

最终可看到启用本属性后，拖动编辑框内容时，在编辑框左下角可以看到一个省略号。

帮助文档如下图：

顾名思义通过本属性可让编辑框显示一个清除按钮，点击清除按钮可清空编辑框内容。

属性值为真则显示，为假则不显示。

代码编写如下图：

“按钮1”被点击后设置本属性值为真。

运行结果如下图（GIF）：

最终可看到编辑框出现清除按钮，并且点击后内容会清空。

“最小底部文本行(写)”帮助文档：

本属性的作用是用来设置编辑框底部文本的显示行数。

注意：编辑框底部的文本又被称为辅助文本。

“辅助文本内容(写)”帮助文档：

本属性可设置辅助文本的内容。

“辅助文本颜色(写)”帮助文档：

本属性可用来设置辅助文本显示的颜色。

代码编写如下图：

1、在“高级兼容编辑框1”的属性栏填写“辅助文本内容”和“辅助文本颜色”分别设置这两个属性的属性值。

2、“按钮1”被点击后，设置“最小底部文本行=2”，显示两行辅助文本。

运行结果如下图（GIF）：

最终可看到辅助文本由三行变成了两行。

“最小字符数(写)”帮助文档：

通过本属性可设置编辑框的最小字符数。

如果输入的内容长度小于此属性值，则会自动触发编辑框验证，自动修改下划线颜色。

注意：属性值为0则不限制，如果不设置本属性默认不限制。

“最大字符数(写)”帮助文档：

通过本属性可用来设置编辑框最大字符数，为0则不限制。

如果输入的内容长度超过此属性值，则自动触发编辑框验证，修改下划线颜色。

代码编写如下图：

在“高级兼容编辑框1”的属性栏设置“最新字符数”为2，设置“最大字符数”为4。

运行结果如下图（GIF）：

最终结果可看到当编辑框内容长度小于“2”大于“4”的时候都会触发编辑框验证。

并且在编辑框右下角还有字符长度提示。

帮助文档如下图：

调用本属性可实现修改“提示文本”的颜色。

注意：修改提示文本颜色只能使用本属性实现，不能使用父类的“提示文本颜色”属性。

代码编写如下图：

在“高级兼容编辑框1”的属性栏分别填写“提示文本”和“提示内容颜色”属性，并设置属性值。

运行结果如下图（GIF）：

软件运行后可以看到“提示内容颜色”被修改成了白色。

帮助文档如下图：

顾名思义，通过本属性可调整底部文本的字体尺寸，单位像素。

注意：底部文本又称辅助文本。

代码编写如下图：

1、在“高级兼容编辑框1”的属性栏设置辅助文本内容和颜色。

2、“按钮1”被点击后调整底部文本尺寸为30像素。

运行结果如下图（GIF）：

最终可看到底部文本尺寸明显变大。

帮助文档如下图：

通过此属性可让辅助文本一直处于显示状态。

提示：默认情况下高级兼容编辑框失去焦点后，辅助文本会隐藏。

代码编写如下图：

“按钮1”被点击后，设置本属性值为真。

运行结果如下图（GIF）：

可以看到“按钮1”单击前后，辅助文本呈现出不同的状态。

“浮动提示内容(写)”帮助文档：

通过本属性设置浮动提示内容，本内容位于编辑框左上方位置。

注意：本内容默认不会主动显示，在编辑框输入内容后才会显示出来。

“浮动提示文本尺寸(写)”帮助文档：

通过本属性用来设置浮动内容的文本尺寸，单位像素。

“浮动提示文本颜色(写)”帮助文档：

本属性用于设置浮动内容颜色，属性值可使用“颜色类”中定义的常量值，例如：颜色类.黄色。

注意：预设值本属性必须将“浮动标签类型”属性设置为“高亮模式”。

“浮动标签类型(写)”帮助文档：

本属性用于设置浮动类型，调用方式：高级编辑框浮动标签类型.XXX。

在属性表中，直接下拉选择即可。

代码编写如下图：

在“高级兼容编辑框1”中分别填写以上属性名并写上对应的属性值。

运行结果如下图（GIF）：

最终可看到当编辑框输入内容时，浮动内容会显示出来并且是黄色。

帮助文档如下图：

顾名思义，通过本属性可实现一直显示浮动提示。

代码编写如下图：

“按钮1”被点击后，设置本属性值为真。

运行结果如下图（GIF）：

最终可看到浮动提示被直接显示出来。

帮助文档如下图：

通过本属性可以控制浮动提示是否开启“显示/隐藏”动画。

注意：本属性默认为开启动画状态。

代码编写如下图：

“按钮1”被点击后设置本属性为假，关闭动画。

运行结果如下图（GIF）：

最终可看到“按钮1”被单击后，浮动内容的显示动画消失。

帮助文档如下图：

通过本属性可设置高级兼容编辑框的基本颜色，设置的颜色会偏暗。

注意：基本颜色包含三种颜色，如下图所示。

代码编写如下图：

“按钮1”被点击后，设置基本颜色为白色。

运行结果如下图（GIF）：

最终可看到基本的颜色都变成了白色。