ArkUI框架，Flex布局，基础组件及封装，父子组件的双向绑定

1.Flex布局初探

Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局，例如：使三个元素在容器内水平居中，垂直等间隔分散。

例如：如下的布局代码分别表示：（垂直排列，水平居中，垂直居中）

direction:FlexDirection.Column,
justifyContent:FlexAlign.Center,
alignItems:ItemAlign.Center

配合Text组件和Button组件，我们可以写一个基本的登录界面：

@Entry
@Component
struct Index {
  build() {
    Flex({ justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center,
      direction: FlexDirection.Column }) {
      Text("登录")
        .fontSize(40)
        .fontWeight(700)
      TextInput()
        .width("80%")
        .height(40)
      TextInput()
        .width("80%")
        .height(40)
      Button("登录")
    }
    .width("100%")
    .height("100%")
    .border({ width: 10, color: "#000" })
  }
}

---

2.组件封装

我们可以将常用的组件进行自定义的封装，例如，我们想将输入框进行自定义的封装，以备后续进行调用：

自定义一个组件内容：（myInput.ets）

/* 定义子组件的内容 */
@Component
  /* struct用于定义组件的名称 */
struct MyInput {
  build() {
    TextInput()
      .width("80%")
      .height(40)
  }
}

export default MyInput

在主页面引用它：

import MyInput from "../common/components/myInput"
@Entry
@Component
struct Index {
  build() {
    Flex({ justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center,
      direction: FlexDirection.Column }) {
      Text("登录")
        .fontSize(40)
        .fontWeight(700)
      MyInput()
      MyInput()
      Button("登录")
    }
    .width("100%")
    .height("100%")
    .border({ width: 10, color: "#000" })
  }
}

可以实现同上面一样的效果，但是组件的实现更加原子化：

我们也可以通过父组件向子组件传值，实现输入框的不同提示信息：

子组件新增Prop装饰器请求父组件传递的值：

@Component
  /* struct用于定义组件的名称 */
struct MyInput {
  @Prop placeholder:string

  build() {
    TextInput({ placeholder: this.placeholder })
      .width("80%")
      .height(40)
  }
}

export default MyInput

父组件在调用子组件时，向子组件传值：

import MyInput from "../common/components/myInput"
@Entry
@Component
struct Index {
  build() {
    Flex({ justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center,
      direction: FlexDirection.Column }) {
      Text("登录")
        .fontSize(40)
        .fontWeight(700)
      MyInput({ placeholder:"输入用户名" })
      MyInput({ placeholder:"输入密码" })
      Button("登录")
    }
    .width("100%")
    .height("100%")
    .border({ width: 10, color: "#000" })
  }
}

效果如下：

---

3.设备管理器模拟

Previewer的页面无法进行实时的交互操作，所以我们要学会使用真机进行模拟

点击右上角如下选项：

选择华为P50，运行：

打开真机页面，运行：

模拟成功：

---

4.父子组件双向绑定

我们需要拿到用户输入的数据，以向后端发送一个登录请求，这就需要父子组件的双向绑定机制

要实现数据的双向绑定，我们先在父组件定义需要绑定的数据：

@State username: string = ""
@State password: string = ""

在输入框中添加inputValue参数：

MyInput({ placeholder: "输入用户名", inputValue: $username })
MyInput({ placeholder: "输入密码", inputValue: $password })

子组件中进行链接：

@Link inputValue: string

子组件中设置onChange事件，用于绑定数据的修改：

TextInput({ placeholder: this.placeholder, text: this.inputValue })
  .onChange((value:string) => {
    this.inputValue = value
  })
  .width("80%")
  .height(40)

随后，为了展示一个好的效果，我们还需要在登陆字的下面显示一下我们监听到的输入的数据内容：

/* 展示输入框输入的数据 */
Text(this.username)
  .fontSize(40)
  .fontWeight(700)
Text(this.password)
  .fontSize(40)
  .fontWeight(700)

整体代码如下：

index.ets：

import MyInput from "../common/components/myInput"

@Entry
@Component
struct Index {
  @State username: string = ""
  @State password: string = ""

  build() {
    Flex({ justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center,
      direction: FlexDirection.Column }) {
      Text("登录")
        .fontSize(40)
        .fontWeight(700)
      /* 展示输入框输入的数据 */
      Text(this.username)
        .fontSize(40)
        .fontWeight(700)
      Text(this.password)
        .fontSize(40)
        .fontWeight(700)
      MyInput({ placeholder: "输入用户名", inputValue: $username })
      MyInput({ placeholder: "输入密码", inputValue: $password })
      Button("登录")
    }
    .width("100%")
    .height("100%")
    .border({ width: 10, color: "#000" })
  }
}

myInput.ets：

@Component
  /* struct用于定义组件的名称 */
struct MyInput {
  @Link inputValue: string
  @Prop placeholder: string

  build() {
    TextInput({ placeholder: this.placeholder, text: this.inputValue })
      .onChange((value:string) => {
        this.inputValue = value
      })
      .width("80%")
      .height(40)
  }
}

export default MyInput

如下图，实现了父子组件数据的双向绑定：