开发者社区> 上进小菜猪> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ArkUI框架之声明式 UI 条件渲染&声明周期以及案例美化实战运用【OpenHarmony/HarmonyOS】

简介: ArkUI框架之声明式 UI 条件渲染&声明周期以及案例美化实战运用【OpenHarmony/HarmonyOS】
+关注继续查看

@[toc]

一. 声明式 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)
}

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

image-20220926210151032

image-20220926210206361

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

放入条件判断里:

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

在这里插入图片描述

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

1.2 真机模拟测试

启动远程真机模拟:

image-20220926211033477

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)

image-20220927203300948

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

image-20220927203446404

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

.padding(10)

10.效果展示截图:

image-20220927203557141

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
实战:思考如何拆分组件
学习过 React 哲学的同学应该知道,我们在思考如何拆分组件时,要以简化代码为目的,充分分析当前页面/组件的交互特性、结构特性、数据特性,来判断当前的页面应该如何拆分。
81 0
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
111 0
HarmonyOS实战——TickTimer定时器组件基本使用
HarmonyOS实战——TickTimer定时器组件基本使用
161 0
HarmonyOS实战—点击更换随机图片
HarmonyOS实战—点击更换随机图片
85 0
HarmonyOS实战—布局和组件的概述
HarmonyOS实战—布局和组件的概述
65 0
HarmonyOS实战—页面跳转
HarmonyOS实战—页面跳转
104 0
实战HaaS100搭载4G模组连接阿里云物联网
本文主要介绍如何使用HaaS100外接4G模组连接阿里云物联网平台。
1739 0
无密钥访问阿里云OpenAPI实战
本文介绍了一种不直接使用OpenAPI的访问密钥的身份认证方式,可以有效避免因为访问密钥的代码中硬编码或者存储到配置文件而引入的泄露风险。
1408 0
+关注
上进小菜猪
一切如愿吧
文章
问答
文章排行榜
最热
最新
相关电子书
更多
创业公司的域名想象
立即下载
使命必达—钉钉企业级消息服务的机遇与挑战
立即下载
ST+AliOS > Smart IoT !
立即下载