文章目录

• 一. 声明式 UI 条件渲染&声明周期
• • 1.1 条件渲染&声明周期
  • • 1.1.1 用户名位数判断
    • 1.1.2 生命周期实现正则表达式
  • 1.2 真机模拟测试
• 二.入门登录页面收尾(样式优化)

一. 声明式 UI 条件渲染&声明周期

1.1 条件渲染&声明周期

1.1.1 用户名位数判断

实现用户名位数判断可以直接在build方法函数里进行写if语句的条件判断。

if(this.username.length<5){  Text("用户名至少五位")    .fontSize(12)    .fontWeight(1000)    .width("80%")    .fontColor("red")}

我们把用户名改到超出五位查看效果如下：

@State username: string='1231xxx231'

我们把用户名改到低于五位查看效果如下：

@State username: string='1312'

由上可以看出，如果我们的用户名位数低于5位会出现红色的提示文字：

用户名至少五位。

1.1.2 生命周期实现正则表达式

我们先写一个简单的正则表达式，来过滤到不合法的字符。

private username_reg= /^[0-9a-zA-Z]{5,8}/;

使用生命周期方法：

onPageShow(){  let test_reg =this.username_reg.test(this.username)  console.info(this.username)  // @ts-ignore  console.info(test_reg)}

测试生命周期，我们将用户名输入中文：来检测正则表达式是否成功启用。

由上可知我们在正则表达式来过滤非法字符非常的有效。

放入条件判断里：

if(!this.username_reg.test(this.username)){  Text("用户名必须5-8位，英文或者数字")    .fontSize(12)    .fontWeight(1000)    .width("80%")    .fontColor("red")}

到这里就解决了我们的正则表达式过滤非法字符的需求。

1.2 真机模拟测试

启动远程真机模拟：

1.输入5-8位，英文或者数字：

输入非法字符：

机模拟测试通过！

二.入门登录页面收尾(样式优化)

1.使用装饰器@Prop：作用于俩个输入框前面的提示文字，账号和密码。

@Prop label:string

2.在子组件里写一个Row方法，将之前的方法全部套入。

Row({space:5}){}

3.写第一步的俩个输入框前面的提示文字的样式规定。

Text(this.label)  .fontSize(18)  .width("20%")  .textAlign(TextAlign.Center)

4.到主index.ets里引用label，规定label值的不同，以改变渲染的文字不同的目的。

Myinput({label:"用户名",  placeholder:"输入用户名",  inputvakue:$username,})Myinput({label:"密码",  placeholder:"输入密码",  inputvakue:$password,}

5.设置用户名和密码框的属性。普通文本框和密码框。先到index.ets里，设置其类型：

inputType:InputType.Normal

inputType:InputType.Password

6.定义inputType，获取index.ets传递过来的类型值。

private inputType:InputType=InputType.Normal

7.在TextInput的方法中规定其type。

.type(this.inputType)

8.规定文字和输入框的占比大小，设置为，文字占比为百分之20，输入框占比为百分之80。

9.发现输入框溢出，因为是弹性布局，我们直接到主页面里设置一下，推回来。

.padding(10)

10.效果展示截图：

到这里一个简单基于OpenHarmony/HarmonyOS操作系统的ArkUI框架的小入门Demo操作就结束了，这个是声明式UI开发，还有一种是类Web范式开发，至于他们俩种开发方式的区别在本栏目的第一篇文章中有详细的优缺点分析。

华为开发者大会2021将于10月22日在东莞松山湖正式开幕，推出了全新的ArkUI应用开发框架。

QQ头像吧