前言：
此时朋友们对“登录界面代码编写方法是什么意思”大体比较重视，看官们都需要了解一些“登录界面代码编写方法是什么意思”的相关资讯。那么小编同时在网上收集了一些关于“登录界面代码编写方法是什么意思””的相关内容，希望各位老铁们能喜欢，咱们一起来学习一下吧！效果展示
这篇文章，我们实现上面这个登录页面。所有代码，均为本人手敲
整体页面布局
页面整体布局为Column，主轴从上到下，中间对齐。交叉轴为中间对齐。左右两边各10fp，代码：
build() { Column() {} .padding({ left: 10, right: 10 }).height('100%').backgroundColor(Color.White).justifyContent(FlexAlign.Center) }接下来，我们往里面逐行的添加内容。
这块是一个图片LOGO，两行文字，具体：
Image($r('app.media.icon')).width(100).height(100).margin({ bottom: 20 }) Text('登录界面') .fontSize($r('app.float.title_30')) .fontColor(Color.Black) .fontWeight(FontWeight.Bold) .margin({ bottom: 20 }) Text('登录后可以享受更多服务') .fontSize($r('app.float.title_20')) .fontColor(Color.Gray) .fontWeight(FontWeight.Medium) .margin({ bottom: 20 })手机号、密码输入区这块是两个TextInput组件，两个在一行的Text组件，具体：
TextInput({ placeholder: '输入手机号' }) .type(InputType.Number) .height(50) .margin({ bottom: 10 }) .borderRadius(10) TextInput({ placeholder: '输入密码' }) .type(InputType.Password) .height(50) .margin({ bottom: 10 }) .borderRadius(10) Row() { Text('短信验证码登录').fontSize($r('app.float.title_15')).fontColor(Color.Blue) Text('忘记密码').fontSize($r('app.float.title_15')).fontColor(Color.Blue) } .width('100%') .justifyContent(FlexAlign.SpaceBetween) .margin({ bottom: 60 })登录区最后是登录区，具体：
Button('登录').type(ButtonType.Normal).width('100%') .borderRadius(10).margin({ bottom: 20 }) Text('注册账号').fontSize($r('app.float.title_15')).fontColor(Color.Blue) .margin({ bottom: 50 }) Text('其他方式登录').fontSize($r('app.float.title_12')).fontColor(Color.Gray) .margin({ bottom: 20 }) Row() { this.getOtherLoginText('方式一') this.getOtherLoginText('方式二') this.getOtherLoginText('方式三') }.width('100%').justifyContent(FlexAlign.SpaceAround)其中，getOtherLoginText函数是一个builder装饰的自定义构建函数，具体：
@Builder getOtherLoginText(title: string) { Text(title) .fontColor(Color.Gray) .width(50) .height(50) .borderWidth(1) .borderRadius(25) .borderColor(Color.Gray) .backgroundColor(Color.White) .textAlign(TextAlign.Center) .fontSize($r('app.float.title_12')) }整体代码@Entry@Componentstruct Login { @Builder getOtherLoginText(title: string) { Text(title) .fontColor(Color.Gray) .width(50) .height(50) .borderWidth(1) .borderRadius(25) .borderColor(Color.Gray) .backgroundColor(Color.White) .textAlign(TextAlign.Center) .fontSize($r('app.float.title_12')) } build() { Column() { Image($r('app.media.icon')).width(100).height(100).margin({ bottom: 20 }) Text('登录界面') .fontSize($r('app.float.title_30')) .fontColor(Color.Black) .fontWeight(FontWeight.Bold) .margin({ bottom: 20 }) Text('登录后可以享受更多服务') .fontSize($r('app.float.title_20')) .fontColor(Color.Gray) .fontWeight(FontWeight.Medium) .margin({ bottom: 20 }) TextInput({ placeholder: '输入手机号' }) .type(InputType.Number) .height(50) .margin({ bottom: 10 }) .borderRadius(10) TextInput({ placeholder: '输入密码' }) .type(InputType.Password) .height(50) .margin({ bottom: 10 }) .borderRadius(10) Row() { Text('短信验证码登录').fontSize($r('app.float.title_15')).fontColor(Color.Blue) Text('忘记密码').fontSize($r('app.float.title_15')).fontColor(Color.Blue) } .width('100%') .justifyContent(FlexAlign.SpaceBetween) .margin({ bottom: 60 }) Button('登录').type(ButtonType.Normal).width('100%').borderRadius(10).margin({ bottom: 20 }) Text('注册账号').fontSize($r('app.float.title_15')).fontColor(Color.Blue).margin({ bottom: 50 }) Text('其他方式登录').fontSize($r('app.float.title_12')).fontColor(Color.Gray).margin({ bottom: 20 }) Row() { this.getOtherLoginText('方式一') this.getOtherLoginText('方式二') this.getOtherLoginText('方式三') }.width('100%').justifyContent(FlexAlign.SpaceAround) } .padding({ left: 10, right: 10 }).height('100%').backgroundColor(Color.White).justifyContent(FlexAlign.Center) }}以上就是这个登录页面的全部代码了，是不是很简单？对比Android开发来说，简单了不少吧？
原创不易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。欢迎大家点个关注，我将继续为大家分享相关的技术内容。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #登录界面代码编写方法是什么意思
