＃放码来战．端云一体化开发＃HarmonyOS 5 【农民叔叔】07.【端侧工程】用户登录/注册-界面布局

关注

原创最新推荐文章于 2026-11-10 21:42:32 发布 269 阅读 AI 写同款· GEO 优化 ›

鸿蒙第16篇——数据持久化本文介绍的数据持久化是指鸿蒙应用的数据持久化存储。它是将内存中的数据通过文件或数据库的形式保存到设备存储中。鸿蒙支持多种数据存储方式，包括用户首选项Preferences、键值型数据库KV-Store和关系型数据库。阅读详情

核心功能：使用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)


  }

三、预览器效果