【ArkUI】对于Flex布局与基础组件&&声明式UI-组件封装&&父子组件相互绑定的运用【OpenHarmony/HarmonyOS】

一. Flex布局与基础组件

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

1.先规定弹性布局的大小,设置为百分之百。

.width("100%")
.height("100%")

2.放一个宽度为10的背景颜色为黑色的外边框来可视化弹性布局的大小。

.border({width:10,color:"#000"})

3.设置其页面方向:

设置其为水平居中:

justifyContent:FlexAlign.Center

设置其为垂直居中:

alignItems:FlexAlign.Center

设置竖状排列:

direction:FlexDirection.Column

4.设计一个简陋的登录页面:

登录——》俩个输入框——》进入APP

Text("登录")
    .fontSize(40)
    .fontWeight(700)
TextInput()
    .width("80%")
    .height(40)
    .border({width:1,color:"#000"})
TextInput()
    .width("80%")
    .height(40)
    .border({width:1,color:"#000"})
Button("进入APP")

5.效果展示:

image-20220924130456094

二.声明式UI-组件封装和父对子组件传值

2.1 组件封装

组件封装其实就是自己定义一个函数方法,可以把重复的代码进行重复利用。

  1. 先观察该项目的目录结构:

zh-cn_image_0000001182200571

  1. 在MainAbility 目录下作为pages的同级目录中,新建目录common,在common目录下新建components文件。components文件里存放我们自定义的组件。在components文件里新建myinput.ets文件夹,里面写我们自定义的组件。

image-20220924132054447

  1. 自定义该组件

​ 先写一个装饰器,然后定义名称:

@Component
struct Myinput{
}

使用build方法:

build(){
    TextInput()
        .width("80%")
        .height(40)
        .border({width:1,color:"#000"})
}

里面的TextInput方法直接把之前的TextInput方法剪切过来。

导出该模块:

export default Myinput

4.然后在index.tes文件里先把自定义的组件引用进来:

import Myinput from "../common/componets/myinput"

5.把之前写的TextInput方法删掉,使用Myinput方法来调用。

Myinput()
Myinput()

6.观察效果和之前的一模一样。

image-20220924132954923

优点:原子化,颗粒化,方便管理。

2.2 父对子组件传值

@Prop装饰器:自定义组件成员变量初始化

image-20220924134106176

  • @Prop和@Link变量必须且仅通过构造函数参数进行初始化。

  • 父组件的@Prop变量可以初始化子组件的常规变量或@Prop变量,但不能初始化子组件的@State或@Link变量。

1.我们这里需要@Prop装饰器

@Prop

2.在子组件里,引用到父组件传过来的值。

@Prop placeholder:string

3.在下面的TextInput引用该方法的值。

TextInput({placeholder:this.placeholder})

4.在父组件中,引用Myinput的时候就要给其赋值:

Myinput({placeholder:"输入用户名"})
Myinput({placeholder:"输入密码"})

5.查看效果:

image-20220924133931507

三.父子组件相互绑定

3.1 远程模拟器

我们需要打开远程模拟器,在这之前需要绑定华为账号,才能登录获得2小时的远程真机模拟。

image-20220924202652091

3.2 Link装饰器

@Link装饰的变量可以和父组件的@State变量建立双向数据绑定:

  • 支持多种类型:@Link变量的值与@State变量的类型相同,即class、number、string、boolean或这些类型的数组;
  • 私有:仅在组件内访问;
  • 单个数据源:初始化@Link变量的父组件的变量必须是@State变量;
  • 双向通信:子组件对@Link变量的更改将同步修改父组件的@State变量;
  • 创建自定义组件时需要将变量的引用传递给@Link变量,在创建组件的新实例时,必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化,@State变量可以通过'$'操作符创建引用。

icon-note.gif 说明: @Link变量不能在组件内部进行初始化。

使用@Link装饰器。

写一个监听onChange事件,用来获取到用户端输入的值,赋值给@Link inputvakue:string。

.onChange((value:string)=>{
    this.inputvakue=value
})

在登录下面输出一行提示的用户名,应该是用户输入随时变化的。

Text(this.username)
    .fontSize(12)
    .fontWeight(500)
    .width("100px")

重新编译上传,得到以下结果:上面的提示小文字与输入框进行了应该实时的双向绑定。

image-20220924202903004

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:博客之星2021 设计师:Hiro_C 返回首页
评论

打赏作者

上进小菜猪

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值