harmony初步学习自定义组件

需求

使用ArkTS定义一个用户名输入框，左边是描述文字，右边是输入框，作为一个通用组件，在其他界面复用。

新建组件DzEditText.ets

//code by 每日教程http://teachcourse.cn
@Component
export struct DzEditText {
  @State des: string = '用户名'
  @State inputHint: string = '请输入用户名'

  build() {
    Row() {
      Text(this.des)
        .height('100%')

      TextInput({ placeholder: this.inputHint })
        .layoutWeight(1)
        .height('100%')
    }.width('100%')
    .height(80)
    .padding(12)
  }
}

水平布局，左边是文本控件Text，宽度为内容大小，高度为父控件高度

右边为输入框控件TextInput，宽度为屏幕剩余宽度，高度为父控件高度

引用组件DzEditText.ets

import { DzEditText } from '../view/other/DzEditText'
// code by 每日教程https://teachcourse.cn
@Entry
@Component
struct DzIndex {
  build() {
    Column() {
      DzEditText({ des: '用户名', inputHint: '请输入用户名' })
      DzEditText({ des: '密码', inputHint: '请输入密码' })
    }.width('100%')
    .height('100%')
  }
}

效果图：