28、鸿蒙/组件/实现登录界面
2024-07-21 本文已影响0人
圆梦人生
案例
@Component
export struct Login {
//
@State username: string = ''
@State password: string = ''
build() {
Column({ space: 10 }){
//
TextInput({
placeholder: '请输入用户名'
}).onChange((value)=>{
this.username = value
})
//
TextInput({
placeholder: '请输入密码'
}).type(InputType.Password)
.onChange((value)=>{
this.password = value
})
//
Button('登录').width(200).onClick(()=>{
console.log('登录===', this.username, this.password)
}).width('100%')
//
Row({ space: 15 }){
Text('立刻注册')
Text('忘记密码')
}
}.padding(20)
}
}
登录.png