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

一、界面布局设计

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

红色框：列布局Colum

绿色框：行布局Row

黄色框：层叠布局Stack

二、build()布局实现

理解了界面布局之后，需要在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 # DevEco Studio
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

鸿蒙智能待办：钉钉学而思待办自动同步日历

点外卖后不用反复打开App看取餐号，智能待办会自动归集瑞幸、KFC、麦当劳等餐饮取餐号，在取餐时间到时主动提醒。出行方面，同程旅行、携程旅行平台的票务出行、酒店订单信息也能统一归集，时序化整理后自动提醒出发时间和登机信息。升级鸿蒙6.1，让AI帮你记住每一件重要的事。还可统一归集瑞幸、KFC、麦当劳等餐饮取餐号及各类同程旅行、携程旅行平台的票务出行、酒店订单信息，并进行时序化整理和智能提醒。Har

avatar HarmonyOS开发者社区

鸿蒙AI防诈能力：场景化防诈+换脸检测+亲情防诈

用AI对抗AI，用智能对抗狡猾，这正是鸿蒙安全"更智能"的体现。在AI换脸诈骗层出不穷的今天，鸿蒙用场景化防诈、换脸检测、亲情防诈三重AI防护对抗新型威胁——安全好用才是真好用。现在，AI技术飞速发展，电信诈骗手段层出不穷，从"冒充公检法"到"AI换脸视频通话"，用户防不胜防。HarmonyOS 6的AI防护能力已扩展至AI场景化防诈、AI换脸检测、亲情防诈三大方向，用AI对抗AI，为你筑起智能化

avatar HarmonyOS开发者社区

鸿蒙开发--IAPKit-ArkTS

HarmonyOS IAP Kit 应用内购买功能摘要 HarmonyOS IAP Kit 是华为提供的应用内支付解决方案，支持三种商品类型：消耗型（如游戏钻石）、非消耗型（如永久会员）和订阅型（如月度会员）。开发者需要先在AppGallery Connect后台开通商户服务并配置商品信息（包括商品ID、名称、价格等）。在代码实现上，主要流程包括：检查支付环境、查询商品信息、发起购买请求并处理支付

avatar HarmonyOS开发者社区