鸿蒙之布局-Stack

堆叠布局的使用，登录功能

@Entry
@Component
struct login {
@State name: string = ”
@State pwd: string = ”

build() {
Stack() { //
Image($r(‘app.media.login’)).width(“100%”).height(“100%”).margin({ left: 0, right: 0, top: 0 })
Column({ space: 10 }) {
TextInput({ placeholder: ‘请输入用户名’, text: this.name })
.maxLength(6)
.onChange((val) => { // 输入过程中实时触发
this.name = val
}).margin({ top: 250 })
TextInput({ placeholder: ‘请输入密码’, text: this.pwd })
.type(InputType.Password)
.onChange((val) => { // 输入过程中实时触发
this.pwd = val
})
Button(‘登 陆’)
.width(‘100%’)
.onClick(() => {
console.log(‘提交登陆’, this.name, this.pwd)
})

Row() {

Text(“短信快捷登录”).padding({ top: 40, left: 10 }).textAlign(TextAlign.Start)
Blank().width(150)
Text(“忘记密码”).padding({ top: 40, right: 10 }).textAlign(TextAlign.End)
}

Text(“没有账号? 快速注册”).padding({ top: 130 }).fontColor(Color.White).fontSize(18)
}.padding(20)
}
.width(‘100%’)

}
}

背景图如下：