鸿蒙开发之ArkUI 界面篇 七 综合案例

一个登录界面，如图：

首先分析，垂直方向出现了5排，分别是顶部的图片组件，两个输入框，一个登录按钮，一排“前往注册“和”忘记密码“组件，他们水平对齐，用row容器，代码如下：

@Entry
@Component
struct IndexTest {
  @State message: string = 'IndexTest';
  build() {
    Column({
    space:15 //子组件和字组件的距离
    })
    {
      Image($r('app.media.app_icon'))
        .height(60)

      TextInput({
        placeholder:'请输入用户名'
      }).padding({
        left:20
      })
      TextInput({
        placeholder:'请输入密码'
      }).type(InputType.Password)
        .padding({
          left:20
        })
      Button("登录").width('100%')
      Row({
        space:15 //子组件和子组件的距离
      }){
        Text('前往注册')
        Text('忘记密码')
      }

    }.padding(15) //字组件和容器的距离
  }
}