HarmonyOS鸿蒙NEXT中用户登录/注册-界面布局

核心功能：使用AGC的认证服务-手机号码认证方式，用户使用手机号+短信验证码登录即注册。

一、界面布局设计

布局最外层是Navigation，左上角可返回上一界面。因为登录页面不是APP启动后的第一个界面，不强制用户登录；而是在其他界面操作时要求登录才跳转到登录界面，不登录可返回。

红色框：列布局Colum
绿色框：行布局Row
黄色框：层叠布局Stack

二、build()布局实现

1.Logo/slogan，代码如下：

// logo
Column(){
  Image($r('app.media.icon'))
    .width(216)
    .height(216)
    .margin({ top: 50 })
  Text('农民叔叔')
    .fontSize(24)
    .fontColor('#182431')
    .fontWeight(FontWeight.Medium)
  Text('病虫害诊断专家')
    .fontSize(16)
    .fontColor('#99182431')
    .margin({ top: 8,bottom:12 })
}
.justifyContent(FlexAlign.Start)

2.手机号/短信验证码输入框，代码如下：

Row(){
  Column(){
    // 手机号输入框
    Stack(){
      // 手机号
      TextInput({placeholder:'请输入手机号'})
        .type(InputType.PhoneNumber)
        .enterKeyType(EnterKeyType.Next)
        .defaultFocus(true)
        .placeholderColor($r('sys.color.ohos_id_color_text_hint'))
        .placeholderFont({size:$r('sys.float.ohos_id_text_size_body1')})
        .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
        .maxLength(11)
        .fontSize($r('sys.float.ohos_id_text_size_body1'))
        .padding({left:82})
        .borderRadius($r('sys.float.ohos_id_corner_radius_notification'))
        .borderColor($r('sys.color.ohos_id_color_warning'))
        .inputFilter('^[0-9*]{0,11}$')
        .constraintSize({minHeight:56})

      // 区号，分割线
      Row(){
        Text('+86')
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .fontSize($r('sys.float.ohos_id_text_size_body1'))
          .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
          .margin({left:12,right:$r('sys.float.ohos_id_elements_margin_horizontal_m')})
          .direction(Direction.Ltr)
        // 分割线
        Divider()
          .vertical(true)
          .height(12)
          .color($r('sys.color.ohos_id_color_list_separator'))
          .margin({left:12})
      }
      .width('100%')
      .constraintSize({minHeight:56})
      .enabled(false)

    }
    .width('100%')

    // 验证码输入框
    TextInput({placeholder:'请输入验证码'})
      .type(InputType.Number)
      .enterKeyType(EnterKeyType.Done)
      .enableKeyboardOnFocus(true)
      .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
      .placeholderColor($r('sys.color.ohos_id_color_text_hint'))
      .placeholderFont({size:$r('sys.float.ohos_id_text_size_body1')})
      .fontSize($r('sys.float.ohos_id_text_size_body1'))
      .maxLength(6)
      .padding({left:12})
      .margin({top:12})
      .borderRadius($r('sys.float.ohos_id_corner_radius_notification'))
      .borderColor($r('sys.color.ohos_id_color_warning'))
      .inputFilter('^[0-9*]{0,11}$')
      .constraintSize({minHeight:56})
  }
  .width('100%')
}
.width('100%')
.margin(0)
.padding({left:8,right:8})

3.获取验证码文本按钮，代码如下：

Row(){
  Text('获取验证码')
    .fontSize($r('sys.float.ohos_id_text_size_body1'))
    .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
    .fontWeight(FontWeight.Medium)
    .enabled(true)
    .clickEffect({level:ClickEffectLevel.LIGHT,scale:0.9})
    .onClick(() => {
      // TODO: 获取验证码
    })
}
.justifyContent(FlexAlign.End)
.width('100%')
.margin({top:12})
.padding({right:8})

4.登录按钮，代码如下：

Row(){
  Button('登录')
    .width('100%')
    .height(40)
    .fontSize(16)
    .fontWeight(FontWeight.Medium)
    .backgroundColor('#007DFF')
    .onClick(() => {
      // TODO: 登录
    })
}
.width('100%')
.margin({top:68})
.padding({left:8,right:8})

5.隐私条款及勾选框，代码如下：

Row(){
  // 单选框
  Checkbox()
    .width(22)
    .height(22)
    .focusable(true)
    .selectedColor('#007DFF')
    .margin({right:12})
  // 文本
  Text(){
    Span('已阅读并同意')
      .fontColor($r('sys.color.ohos_id_color_text_secondary'))
      .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
      .fontSize($r('sys.float.ohos_id_text_size_body3'))
      .fontWeight(FontWeight.Regular)
      .opacity(0.8)

    Span('《隐私政策》')
      .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
      .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
      .fontWeight(FontWeight.Medium)
      .opacity(0.6)
      .fontSize($r('sys.float.ohos_id_text_size_body3'))
      .focusable(true)
      .focusOnTouch(true)
      .onClick(() => {
        // TODO: 打开隐私政策
      })
  }
}
.justifyContent(FlexAlign.Center)
.width('100%')
.margin({top:24})
.padding({left:8,right:8})
.constraintSize({minHeight:24})

6.完整的布局代码如下：

build() {
  // 页面导航
  Navigation(){
    Column(){
      // logo
      Column(){
        Image($r('app.media.icon'))
          .width(216)
          .height(216)
          .margin({ top: 50 })
        Text('农民叔叔')
          .fontSize(24)
          .fontColor('#182431')
          .fontWeight(FontWeight.Medium)
        Text('病虫害诊断专家')
          .fontSize(16)
          .fontColor('#99182431')
          .margin({ top: 8,bottom:12 })
      }
      .justifyContent(FlexAlign.Start)

      // 输入框
      Row(){
        Column(){
          // 手机号输入框
          Stack(){
            // 手机号
            TextInput({placeholder:'请输入手机号'})
              .type(InputType.PhoneNumber)
              .enterKeyType(EnterKeyType.Next)
              .defaultFocus(true)
              .placeholderColor($r('sys.color.ohos_id_color_text_hint'))
              .placeholderFont({size:$r('sys.float.ohos_id_text_size_body1')})
              .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
              .maxLength(11)
              .fontSize($r('sys.float.ohos_id_text_size_body1'))
              .padding({left:82})
              .borderRadius($r('sys.float.ohos_id_corner_radius_notification'))
              .borderColor($r('sys.color.ohos_id_color_warning'))
              .inputFilter('^[0-9*]{0,11}$')
              .constraintSize({minHeight:56})

            // 区号，分割线
            Row(){
              Text('+86')
                .fontColor($r('sys.color.ohos_id_color_text_primary'))
                .fontSize($r('sys.float.ohos_id_text_size_body1'))
                .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
                .margin({left:12,right:$r('sys.float.ohos_id_elements_margin_horizontal_m')})
                .direction(Direction.Ltr)
              // 分割线
              Divider()
                .vertical(true)
                .height(12)
                .color($r('sys.color.ohos_id_color_list_separator'))
                .margin({left:12})
            }
            .width('100%')
            .constraintSize({minHeight:56})
            .enabled(false)
          }
          .width('100%')

          // 验证码输入框
          TextInput({placeholder:'请输入验证码'})
            .type(InputType.Number)
            .enterKeyType(EnterKeyType.Done)
            .enableKeyboardOnFocus(true)
            .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
            .placeholderColor($r('sys.color.ohos_id_color_text_hint'))
            .placeholderFont({size:$r('sys.float.ohos_id_text_size_body1')})
            .fontSize($r('sys.float.ohos_id_text_size_body1'))
            .maxLength(6)
            .padding({left:12})
            .margin({top:12})
            .borderRadius($r('sys.float.ohos_id_corner_radius_notification'))
            .borderColor($r('sys.color.ohos_id_color_warning'))
            .inputFilter('^[0-9*]{0,11}$')
            .constraintSize({minHeight:56})
        }
        .width('100%')
      }
      .width('100%')
      .margin(0)
      .padding({left:8,right:8})

      // 获取验证码文本按钮
      Row(){
        Text('获取验证码')
          .fontSize($r('sys.float.ohos_id_text_size_body1'))
          .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
          .fontWeight(FontWeight.Medium)
          .enabled(true)
          .clickEffect({level:ClickEffectLevel.LIGHT,scale:0.9})
          .onClick(() => {
            // TODO: 获取验证码
          })
      }
      .justifyContent(FlexAlign.End)
      .width('100%')
      .margin({top:12})
      .padding({right:8})

      // 登录按钮
      Row(){
        Button('登录')
          .width('100%')
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007DFF')
          .onClick(() => {
            // TODO: 登录
          })
      }
      .width('100%')
      .margin({top:68})
      .padding({left:8,right:8})

      // 隐私条款
      Row(){
        // 单选框
        Checkbox()
          .width(22)
          .height(22)
          .focusable(true)
          .selectedColor('#007DFF')
          .margin({right:12})
        // 文本
        Text(){
          Span('已阅读并同意')
            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
            .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
            .fontSize($r('sys.float.ohos_id_text_size_body3'))
            .fontWeight(FontWeight.Regular)
            .opacity(0.8)

          Span('《隐私政策》')
            .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
            .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
            .fontWeight(FontWeight.Medium)
            .opacity(0.6)
            .fontSize($r('sys.float.ohos_id_text_size_body3'))
            .focusable(true)
            .focusOnTouch(true)
            .onClick(() => {
              // TODO: 打开隐私政策
            })
        }
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .margin({top:24})
      .padding({left:8,right:8})
      .constraintSize({minHeight:24})
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
  }
  .hideBackButton(false)
  .title('登录')
  .titleMode(NavigationTitleMode.Mini)
}

三、预览器效果

[下一篇：用户登录/注册功能开发]

更多关于HarmonyOS鸿蒙NEXT中用户登录/注册-界面布局的实战教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼作者

在HarmonyOS NEXT中，用户登录/注册界面布局可采用ArkUI框架实现。使用Column/Row容器构建整体结构，TextInput组件处理账号/密码输入，Button组件放置登录/注册按钮。通过@State装饰器管理输入框状态，@Link实现组件数据联动。可添加Checkbox组件用于"记住密码"等选项，使用Flex布局或百分比尺寸适配不同屏幕。鸿蒙的原子化服务能力允许将登录模块封装为独立服务供多端调用。样式建议使用HarmonyOS设计系统提供的资源规范。

更多关于HarmonyOS鸿蒙NEXT中用户登录/注册-界面布局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼

从界面布局来看，这个登录/注册页面的设计符合HarmonyOS NEXT的UI规范，有几点值得注意：

布局结构清晰合理，使用Column、Row和Stack的组合实现了复杂的输入框布局，特别是手机号输入框的区号+分割线设计很巧妙。
遵循了HarmonyOS的设计资源规范，大量使用了$r(‘sys.xxx’)系统资源，确保界面风格与系统一致。
交互细节考虑周到：

为TextInput设置了合适的InputType和enterKeyType
添加了clickEffect提升点击反馈
使用constraintSize保证最小高度

隐私条款部分处理规范，使用Checkbox+Span的组合，符合应用上架要求。

建议可以优化的地方：

获取验证码按钮可以增加倒计时功能
登录按钮状态可以根据输入框内容动态变化
可以添加密码登录的切换入口

整体代码结构清晰，是典型的HarmonyOS声明式UI写法，适合作为参考范例。