/**
 * 垂直布局 Column
 * 水平布局 Row
 *    属性：justifyContent(主轴对齐方向)
 *         alignItems(交叉轴对齐方向)
 */

@Entry
@Component
struct LoginPage {
  @State message: string = 'Hello World';

  build() {
    Column({ space: 10 }) {
      Image($r('app.media.dunhuang'))
        .width('100%')
      TextInput({ placeholder: '请输入用户名' })
      TextInput({ placeholder: '请输入密码' })
        .type(InputType.Password)
      Button('登录')
        .width('100%')
      Row() {
        Text('忘记密码')
        Blank()
          .width(30)
        Text('注册')
      }
      .width('100%')
      .height(100)
      .backgroundColor(Color.Green)
      .padding(10)
      .alignItems(VerticalAlign.Bottom)
      .justifyContent(FlexAlign.SpaceEvenly)

    }
    .padding(10)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Start)
  }
}

参考官网

文档中心