效果展示

这篇文章，我们实现上面这个登录页面。所有代码，均为本人手敲

整体页面布局

页面整体布局为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
@Component
struct 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开发来说，简单了不少吧？

原创不易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。欢迎大家点个关注，我将继续为大家分享相关的技术内容。