HMOS NEXT 鸿蒙5.0 案例：客户档案（一）：登录界面＆欢迎界面

 直接上代码：=>{ 重点：监听显示设备横竖屏状态，并获取不同显示设备屏幕的宽度，进而实现不同的屏幕大小和方向的自适应布局和组件缩放效果 }

import { display, mediaquery, router } from '@kit.ArkUI'
import { rdbAccounts } from '../components/utils/rdbData'
import APDataModel from '../Moudel/DataClass/APDataClass'
import { relationalStore } from '@kit.ArkData'
import auth from '@hw-agconnect/auth'

let disWidth = display.getDefaultDisplaySync();

@Entry
@Component
struct Index {
  // 创建一个页面栈对象并传入Navigation
  pageStack: NavPathStack = new NavPathStack()
  //监听屏幕状态改变
  listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)')
  UserPrivacyDialog: CustomDialogController = new CustomDialogController({
    builder: UserPrivacyDialog({}),
  })
  @State UHS: boolean = true //横竖屏状态变量
  @State flag: boolean = false //位移动画状态管理
  @State loginFlag: boolean = true //登录方式状态管理
  @State mess: string = '用手机验证码登陆'
  @State radio: boolean = false//单选框状态管理
  @State ap: APDataModel = new APDataModel()
  @State displayWidth: number = disWidth.width //获取显示屏宽度
  @State aps: APDataModel[] = []
  //用户名、密码校对方法
  addAccount = () => {
    if (this.ap.account != '' && this.ap.account.length > 5 && this.ap.account.length < 13) {
      let ap = this.aps.find(item => item.account === this.ap.account)
      if (ap) {
        if (this.ap.password != '' && this.ap.password.length > 5) {
          if (ap.password === this.ap.password) {
            if (this.radio) {
              this.pageStack.replacePath({ name: "register", param: this.ap })
              AlertDialog.show(
                {
                  message: `用户: ${this.ap.account} 登陆成功!`,
                  alignment: DialogAlignment.Center
                })
            } else {
              AlertDialog.show(
                {
                  message: '请阅读并同意《用户隐私协议》',
                  alignment: DialogAlignment.Center
                })
            }
          } else {
            AlertDialog.show({
              message: '密码错误',
              alignment: DialogAlignment.Center
            })
          }
        } else {
          AlertDialog.show({
            message: '密码至少为6位数',
            alignment: DialogAlignment.Center
          })
        }
      } else {
        AlertDialog.show({
          message: `用户名 ${this.ap.account} 不存在${'\n'}请先注册--`,
          alignment: DialogAlignment.Center
        })
      }
    } else {
      AlertDialog.show({
        message: '用户名输入有误',
        alignment: DialogAlignment.Center
      })
    }
  }
  //查询数据库
  queryData = async () => {
    let apData = await rdbAccounts.getTheList() as relationalStore.ValuesBucket[]
    apData.forEach(item => {
      let ap: APDataModel = new APDataModel()
      ap.id = item.ID as number
      ap.name = item.NAME as string
      ap.referralCode = item.REFERRACODE as string
      ap.account = item.ACCOUNT as string
      ap.phoneNumber = item.PHONENUMBER as string
      ap.password = item.PASSWORD as string
      this.aps.push(ap)
    });
  }

  // 当满足媒体查询条件时，触发回调
  onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) {
    if (mediaQueryResult.matches as boolean) {
      this.UHS = false //横屏
    } else {
      this.UHS = true //竖屏
    }
  }

  aboutToAppear() {
    // 绑定当前应用实例，绑定回调函数
    this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => {
      this.onPortrait(mediaQueryResult)
    });
    //启动时调用查询数据库的方法
    this.queryData()
  }

  aboutToDisappear() {
    // 解绑listener中注册的回调函数
    this.listener.off('change');
  }

  build() {
    Flex() {
      Column() {
        Text('客 户 就 是 财 富')
          .height(50)
          .fontSize(30)
          .fontColor('#00b8b8')
          .fontWeight(600)
          .textAlign(TextAlign.Center)

        //注册按钮
        Column() {
          //名称及logo
          Column({ space: 15 }) {
            Image($r("app.media.app_icon"))
              .height(this.flag ? 150 : 90)
              .borderRadius(20)
              .animation({ duration: 500 })
            Text('简单 便捷 好用 省心')
              .fontSize(this.flag ? 30 : 16)
              .margin({ top: this.flag ? 20 : -5 })
              .animation({ duration: 500 })
              .fontColor($r('app.color.start_foreColor'))
            Text('点此 弹出 或 隐藏 登录框')
              .fontColor($r('app.color.hint_Color'))
              .fontSize(this.flag ? 22 : 16)
              .opacity(this.flag ? 0 : 1)
              .animation({ duration: 500 })

          }
          .onClick(() => {
            this.flag = !this.flag
          })
          .width('100%').justifyContent(FlexAlign.Center)
          .animation({ duration: 400 })
        }
        .position({ x: 0, y: this.flag ? '30%' : '9%' })
        .animation({ duration: 500 })
        .width('100%')
        .height('100%')

        //切换登录方式
        Column({ space: 15 }) {
          if (this.mess === '用账号密码登录') {
            this.loginID()
          } else if (this.mess === '用手机验证码登陆') {
            this.loginPassword()
          }

          Row() {
            Button('注册')
              .width(this.displayWidth > 1300 ? (this.UHS ? '24%' : '19%') : (this.UHS ? '49%' : '24%'))
              .backgroundColor($r('app.color.start_foreColor'))
              .animation({ duration: 500 })
              .onClick(() => {
                router.replaceUrl({
                  url: "pages/register"
                })
              })
            Blank().width('2%')
            Button('登陆')
              .width(this.displayWidth > 1300 ? (this.UHS ? '24%' : '19%') : (this.UHS ? '49%' : '24%'))
              .backgroundColor($r('app.color.start_foreColor'))
              .animation({ duration: 500 })
              .onClick(this.addAccount)
          }

          //协议确认单选框
          Row() {
            Radio({ value: 'Radio3', group: 'radioGroup' })
              .checked(this.radio)
              .height(18)
              .onClick(() => {
                this.radio = !this.radio
              })
            Text('我已阅读并同意').fontSize(18)
            Text('《用户隐私安全协议》').fontSize(16).fontColor('#ffd06d00')
              .onClick(() => {
                this.UserPrivacyDialog.open()
              })
          }
          //点击切换登录方式的文本按钮
          Text(this.mess)
            .height(35)
            .fontColor($r('app.color.sign_txt'))
            .onClick(() => {
              this.loginFlag = !this.loginFlag
              this.mess = this.loginFlag ? '用手机验证码登陆' : '用账号密码登录'
            })
          //第三方登录按钮栏
          Row({ space: 5 }) {

            Image($r('app.media.huaweilogo1'))
              .width(this.win).animation({ duration: 500 })
              .onClick(() => {
                auth.signIn({
                  autoCreateUser: true,
                  "credentialInfo": {
                    "kind": "hwid"
                  }
                })
                  .then(signInResult => {
                    console.info("test", "signInHwid success " + signInResult.getUser().getUid());
                  })
                  .catch((error: Error) => {
                    console.error("test", "signInHwid error " + error);
                  })
              })

          }
          .width(this.displayWidth > 1300 ? (this.UHS ? '50%' : '40%') : (this.UHS ? '100%' : '50%'))
          .height(50)
          .border({ style: BorderStyle.Solid, width: 0, radius: 50 })
          .padding({ left: 15, right: 15 })
          .shadow({
            radius: 50,
            color: $r('app.color.start_foreColor'),
            offsetX: 0,
            offsetY: 0,
            fill: false
          })
          .animation({ duration: 500 })
        }
        .position({ x: '6%', y: this.flag ? '100%' : '35%' })
        .opacity(this.flag ? 0 : 1)
        .animation({ duration: 500 })
        .width('88%')
      }
      .width('100%').height('100%')
      .backgroundColor(Color.Transparent)
      .onClick(() => {
        this.getUIContext().getFocusController().clearFocus()
      })
    }
    .width('100%').height('100%').padding({ left: '3%', right: '3%' })
    .backgroundColor(Color.Transparent)
  }

  //验证码登陆
  @Builder
  loginID() {
    Column({ space: 15 }) {
      TextInput({ placeholder: '手机号' })
        .backgroundColor(Color.White)
        .border({ style: BorderStyle.Solid, width: 1, color: $r('app.color.start_foreColor') })
        .copyOption(CopyOptions.InApp)
        .type(InputType.Number)
        .fontWeight(600)
        .maxLength(11)
        .fontSize(18)
        .width('100%')
        .height(40)

      Row() {
        Stack() {
          TextInput({ placeholder: '验证码' })
            .backgroundColor(Color.White)
            .border({
              style: BorderStyle.Solid,
              color: $r('app.color.start_foreColor'),
              width: {
                bottom: 1,
                right: 1,
                top: 1,
                left: 1
              }
            })
            .type(InputType.Number)
            .copyOption(CopyOptions.None)
            .maxLength(11)
            .fontSize(18)
            .fontWeight(600)
            .width('100%')
            .height(40)

          Text('| 获取验证码')
            .backgroundColor(Color.Transparent)
            .fontColor($r('app.color.start_foreColor'))
            .textAlign(TextAlign.End)
            .width('35%')
            .margin({ left: 162 })
            .fontSize(18)
            .height(40)
            .onClick(() => {
            })
        }
      }
    }
    .width(this.UHS ? '100%' : '50%')
  }

  //账号密码登陆
  @Builder
  loginPassword() {
    Column({ space: 15 }) {
      TextInput({ placeholder: '账号' })
        .placeholderColor($r('app.color.hint_Color'))
        .enableKeyboardOnFocus(false)
        .caretColor('#135790')//光标颜色
        .selectionMenuHidden(true)
        .enableAutoFill(true)
        .inputFilter('[0-9,a-z,A-Z]')
        .contentType(ContentType.USER_NAME)
        .type(InputType.USER_NAME)
        .copyOption(CopyOptions.None)
        .maxLength(12)
        .fontSize(22)
        .fontColor($r('app.color.start_foreColor'))
        .fontWeight(600)
        .shadow({
          radius: 10,
          color: $r('app.color.start_foreColor'),
          offsetX: 0,
          offsetY: 0
        })
        .draggable(false)
        .backgroundColor(Color.White)
        .width(this.displayWidth > 1300 ? (this.UHS ? '50%' : '40%') : (this.UHS ? '100%' : '50%'))
        .height(40)
        .padding({ left: 15 })
        .margin(0)
        .animation({ duration: 500 })
        .onChange((value: string) => {
          this.ap.account = value
        })
      TextInput({ placeholder: '密码' })
        .backgroundColor(Color.White)
        .placeholderColor($r('app.color.hint_Color'))
        .animation({ duration: 500 })
        .shadow({
          radius: 10,
          color: $r('app.color.start_foreColor'),
          offsetX: 0,
          offsetY: 0
        })
        .type(InputType.NUMBER_PASSWORD)
        .maxLength(11)
        .width(this.displayWidth > 1300 ? (this.UHS ? '50%' : '40%') : (this.UHS ? '100%' : '50%'))
        .height(40)
        .fontWeight(600)
        .showPasswordIcon(true)
        .onChange((value: string) => {
          this.ap.password = value
        })
    }
    .width('100%')
  }
}

@CustomDialog
struct UserPrivacyDialog {
  controller: CustomDialogController = new CustomDialogController({
    builder: UserPrivacyDialog({}),
  })

  build() {
    Column() {
      Text('APP用户隐私安全协议').margin(8).fontSize(20)
      Text(
        '一、引言\n' +
          ' \t \t \t \t本隐私安全协议（以下简称“协议”）明确规定了[客户管理APP]（以下简称“本APP”）在收集、使用、存储、处理和保护用户个人信息方面的政策和措施，确保用户的隐私权及信息安全得到充分尊重和有效保障。本APP重视每一位用户的隐私权益，承诺遵守相关法律法规，包括但不限于《中华人民共和国网络安全法》、《个人信息保护法》等，为用户提供安全、可靠的服务环境。\n' +
          '\n' +
          '二‌、信息收集范围‌\n' +
          ' \t \t \t \t‌基本信息‌：如用户名、邮箱地址、手机号码等，用于账户注册、登录及验证。\n' +
          '‌设备信息‌：如IP地址、操作系统类型、设备型号等，用于分析用户行为模式，提升服务安全性。\n' +
          '‌位置信息‌（如开启位置服务）：用于提供基于地理位置的服务，如定位导航、附近商家推荐等。\n' +
          '\n' +
          '‌三、信息安全措施‌\n' +
          '\t \t \t \t防泄露与应急响应‌：建立健全的信息泄露预防机制和应急响应计划，一旦发生数据泄露事件，立即启动预案，及时通知用户并采取补救措施。\n' +
          '\n' +
          '‌四、用户权利‌\n' +
          '\t \t \t \t查询与更正‌：用户有权查询自己的个人信息，并要求对错误或不完整的信息进行更正。\n' +
          '‌删除与撤回同意‌：用户有权要求删除其个人信息，或在特定情况下撤回对个人信息处理的同意。\n' +
          '‌投诉与反馈‌：用户可就隐私保护相关问题向本APP提出投诉或建议，本APP将及时响应并处理。\n' +
          '\n' +
          '‌五、生效日期‌\n' +
          ' \t \t \t \t本协议自[发布日期]起生效，对用户及本APP均具有法律约束力。'
      )
        .fontFamily('HarmonyHeiTi-family')
        .textOverflow({ overflow: TextOverflow.Clip })
        .copyOption(CopyOptions.None)
        .padding(8)
        .margin(8)
        .fontSize(12)
    }.width('100%')
    .onClick(() => {
      this.controller.close()
    })
  }
}

这个欢迎界面可以通过点击指定区域，显式或隐藏注册、登陆、多方登陆、切换登录方式和用户隐私协议等所有相关组件内容。

已实现本地关系型数据库存取数据，进而实现注册和登陆的功能以及账号和密码的输入规则校对。

实现手机和平板之间的大小屏幕的自适应排版、手机和平板横竖屏自动变换的自适应布局和组件缩放。

平板的横屏和竖屏－－界面效果展示：

手机横屏和竖屏－－界面效果展示

​

学习实践案例​，练手的，欢迎各位开发者、老师们、编程爱好者来莅临指导，指出不足，提出更好的实现方案，非常感谢！！！