鸿蒙之华为登录页

远近高低各不同2024-09-03 9:40

让我为大家介绍一下简单的制作华为登录页的静态界面吧

html 复制代码

@Entry
@Component
struct Index {
  build() {
      Column({space:20}) {
        // 图片
        Image($r("app.media.huawei"))
          .width(50)
        // 文本框
        TextInput({placeholder:'请输入用户名'})
        // 密码框
        TextInput({placeholder:'请输入密码'})
          .type(InputType.Password)
        Button('登录')
          .width("100%")
        Row({space:20}){
          Text('前往注册')
          Text('忘记密码')
        }
      }
      // 给Column设置宽度100%会自动居中
      .width('100%')
      .padding(20)
  }
}

直接上效果图

感谢阅读！