鸿蒙开发hello word
先做一个登录界面:
@Entry @Component struct login2 { // 定义输入框状态变量 @State username: string = '' @State password: string = '' @State showPassword: boolean = false build() { Column() { // 应用图标 Image($r('app.media.app_logo')) // 请在资源文件中添加对应图标 .width(80) .height(80) .margin({ top: 80, bottom: 20 }) // 标题 Text('标题2364') .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ bottom: 6 }) // 副标题 Text('login.subtitle') .fontSize(14) .fontColor('#666666') .margin({ bottom: 40 }) // 用户名输入框 TextInput({ placeholder: '请输入22' }) .width('80%') .height(50) .borderRadius(25) .backgroundColor('#F5F5F5') .padding({ left: 20 }) .margin({ bottom: 15 }) .onChange(value => this.username = value) // 密码输入框 TextInput({ placeholder: $r('app.string.password_hint') }) .type(InputType.Password) .width('80%') .height(50) .borderRadius(25) .backgroundColor('#F5F5F5') .padding({ left: 20 }) .margin({ bottom: 10 }) .onChange(value => this.password = value) // 短信登录和忘记密码 Row() { Text('sms.login') .fontSize(14) .fontColor('#1677FF') .margin({ left: '10%' }) Text('忘记密码') .fontSize(14) .fontColor('#1677FF') .margin({ right: '10%' }) } .width('100%') .justifyContent(FlexAlign.SpaceBetween) .margin({ bottom: 30 }) // 登录按钮 Button('登录') .width('80%') .height(50) .fontSize(16) .backgroundColor('#1677FF') .borderRadius(25) .margin({ bottom: 15 }) .onClick(() => { // 登录逻辑处理 this.handleLogin() }) // 注册链接 Text('注册') .fontSize(14) .fontColor('#1677FF') .onClick(() => { // 跳转到注册页面 }) } .width('100%') .height('100%') .backgroundColor('#FFFFFF') } // 登录处理方法 private handleLogin() { // 实现登录逻辑 if (!this.username) { // 提示用户名不能为空 return } if (!this.password) { // 提示密码不能为空 return } // 调用登录接口... } }
浙公网安备 33010602011771号