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

Posted 2022-12-13

一. 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.效果展示：

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

2.1 组件封装

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

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

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

3. 自定义该组件

​ 先写一个装饰器，然后定义名称：

@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.观察效果和之前的一模一样。

优点：原子化，颗粒化，方便管理。

2.2 父对子组件传值

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

• @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.查看效果：

三.父子组件相互绑定

3.1 远程模拟器

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

3.2 Link装饰器

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

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

使用@Link装饰器。

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

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

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

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

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

> 段落引用