让我为大家介绍一下简单的制作华为登录页的静态界面吧
@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)
}
}
直接上效果图
感谢阅读!