鸿蒙开发之简单登录页面

@Entry
@Component
struct Index {@State loading:boolean=false;build() {Row() {Column({ space: 5 }) {Image($r("app.media.app_icon")).width(100).height(100).borderRadius(10).margin({top: 60})Text("登录界面").fontSize(40).fontWeight(FontWeight.Bold).margin({top: 20,bottom: 20})Text("登录账号以使用更多服务").fontSize(20).fontColor("#AAAA").fontWeight(FontWeight.Bold)TextInput({text: "18224799110",placeholder: "请输入手机号"}).height(50).backgroundColor(Color.White).type(InputType.PhoneNumber).margin({top: 10})Divider().color("#E5E4E5")TextInput({text: "123456",placeholder: "请输入密码"}).height(50).backgroundColor(Color.White).type(InputType.Password).margin({ top: 10 })Flex({direction: FlexDirection.Row,wrap: FlexWrap.NoWrap,justifyContent: FlexAlign.SpaceBetween}) {Text("短信验证码登录").fontColor("#007DFF").fontWeight(FontWeight.Bold)Text("忘记密码").fontColor("#007DFF").fontWeight(FontWeight.Bold)}.padding({left: 20,right: 20})Button("登录").width('90%').margin({top: 50}).onClick(() =>{this.loading=true;})Text("注册账号").fontColor("#1886FA").fontWeight(FontWeight.Bold).margin({ top: 20 })if (this.loading) {LoadingProgress().height(50).color("#1886FA")}Text("其他登录方式").fontColor("#9B9DA4").fontWeight(FontWeight.Bold).margin({ top: 20 })Flex({direction: FlexDirection.Row,wrap: FlexWrap.NoWrap,justifyContent: FlexAlign.SpaceAround}) {Image($r("app.media.wx")).height(60).width(60).borderRadius(50).objectFit(ImageFit.Fill);Image($r("app.media.zfb")).height(60).width(60).borderRadius(50).objectFit(ImageFit.Fill);Image($r("app.media.tiktok")).height(60).width(60).borderRadius(50).objectFit(ImageFit.Fill);}.padding({top: 20})}.height('100%')}.height('100%')}
}