技术栈
Appgallery connect
开发准备
上一节我们实现了个人中心页面的静态展示，项目进行到这里呢，我们也是时候添加用户相关的内容了， 因为到了后期，我们的数据都是跟用户绑定的，各个用户之间的数据并不互通，现在为了实现我们的用户绑定制度，我们需要给应用添加一个用户登陆的入口的。
功能分析
用户登陆页面的内容相对来说比较简单，我们首先要实现的就是登陆页的静态页面，需要展示的内容不多，包括 logo，账号密码的输入框，登陆按钮，请求状态等，之后我们会在页面中添加相应的业务逻辑使他更丰富一些
代码实现 import promptAction from '@ohos.promptAction';
@Entry@Componentstruct LoginPage {@State userId:string=''aboutToAppear(){}@State message: string = 'login page'@State acc:string = ''@State psw:string = ''@State isShowProgress: boolean = true;
controller: TextInputController = new TextInputController()
login():void{if (this.acc===''&&this.psw==='') {promptAction.showToast({message:"请输入账号或密码"})return}else {
this.isShowProgress=false
}
复制代码
}
@Builder imageButton(src:String){Button({type:ButtonType.Circle,stateEffect:true}){Image(src.toString()).height(20).width(20)}.height(50).width(50)}
build() {Row() {Column() {
Image($r('app.media.logo')) .width(120).height(120).borderRadius(60) Text("登陆界面") .width(80) .fontSize(14) .fontColor("#333333") .margin({top:40}) .fontWeight(FontWeight.Medium)
TextInput({text:"15290959515", placeholder: '请输入账号' }) .backgroundColor("#f6f6f6") .placeholderColor("#ff999595") .fontColor("#333333") .maxLength(11) .type(InputType.Number) .onChange((value: String) => { this.acc = value.toString() }).margin(20)
TextInput({text:"123456", placeholder: '请输入密码' }) .backgroundColor("#f6f6f6") .placeholderColor("#ff999595") .fontColor("#333333") .type(InputType.Password) .onChange((value: String) => { this.psw = value.toString() }).margin(20)
Row() { Text('注册') .fontColor(Color.Blue) .fontSize(14) .margin(30)
Text('忘记密码') .fontColor(Color.Blue) .fontSize(14) .margin(30)
} .width('100%') .justifyContent(FlexAlign.SpaceBetween)
if (this.isShowProgress) { LoadingProgress() .width(60) .height(60) .backgroundColor(Color.Pink) .margin({ top: $r('app.float.login_progress_margin_top') }) } Button('login',{type:ButtonType.Capsule,stateEffect:false}) .onClick(()=>{ this.isShowProgress=true
this.login()
}) .fontColor(Color.White) .width('80%') .height(40) .margin(40) .backgroundColor(0xff0000)
Blank() .margin(30) } .width('100%')}.height('100%').backgroundColor('#FFFFFF').justifyContent(FlexAlign.Center)
复制代码
}}
到这里我们的静态页面就实现完成了
评论