​

在实际开发过程中，登录模块一般都会涉及到隐私协议，在鸿蒙中如何实现隐私协议的字体高亮，以及如何展示隐私协议，还有输入时如何设置键盘避让模式？本文将展示一个简单的登录实战页面，以及展示隐私协议，附上源码以及效果。

Span设置《隐私协议》高亮

鸿蒙中展示文字的组件为Text，但是在《隐私协议》的场景中，《隐私协议》这几个字样一般都会高亮显示，如何解决这个问题？Text组件可作为一个容器组件，它的唯一子组件为Span，使用Span可单独设置字体颜色，字重，点击事件等字体属性

下面是不会高亮的场景 ​​​​​​X ：

  Text('我已阅读并同意《隐私协议》')

不高亮：

下面是会亮场景 V ：

 Text() {
          Span('我已阅读并同意')
          Span('《隐私协议》')
            .fontColor(Color.Blue)
        }
        .fontSize(14)

 高亮：

Web组件展示隐私协议

隐私协议一般都是一个网页或者是一个html网页文件，因此可以使用Web组件来展示隐私协议，一般有两种方式：1、直接去加载一个html文件，展示隐私协议，2、使用已发布的网址去显示隐私协议

使用加载html文件方式展示《隐私协议》

这里在Web组件的src字段上去使用 src/main/resources/rawfile路径下的 index.html文件，其中index.html文件是隐私协议内容，需要自行新建index.html文件

Web组件引用

 // 隐私协议展示
      Web({
        controller: this.controller,
        // 这里使用的是本地文件，也可使用网络地址，实际开发中按照实际情况修改即可
        src: $rawfile('index.html')
      })

index.html内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>用户隐私协议</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        h2 {
            color: #3498db;
            margin-top: 25px;
            margin-bottom: 15px;
        }
        p {
            margin-bottom: 15px;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            font-size: 0.9em;
            color: #7f8c8d;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>用户隐私协议</h1>

    <p>
        感谢您使用我们的服务。我们非常重视您的隐私，并致力于保护您的个人信息。本隐私协议旨在向您说明我们如何收集、使用、存储和保护您的个人信息。</p>

    <h2>1. 信息收集</h2>
    <p>我们可能会收集以下类型的个人信息：</p>
    <ul>
        <li>您在注册或使用服务时提供的姓名、邮箱地址、电话号码等。</li>
        <li>您在使用服务时生成的设备信息、IP地址、浏览器类型等。</li>
        <li>您在使用服务时提供的其他相关信息。</li>
    </ul>

    <h2>2. 信息使用</h2>
    <p>我们可能会将您的个人信息用于以下目的：</p>
    <ul>
        <li>提供和改进我们的服务。</li>
        <li>与您沟通，包括但不限于通知、支持和反馈。</li>
        <li>分析和优化用户体验。</li>
        <li>遵守法律法规和保护我们的合法权益。</li>
    </ul>

    <h2>3. 信息保护</h2>
    <p>我们采取以下措施保护您的个人信息：</p>
    <ul>
        <li>使用加密技术和安全措施保护数据传输和存储。</li>
        <li>限制内部人员访问您的个人信息。</li>
        <li>定期进行安全审计和漏洞修复。</li>
    </ul>

    <h2>4. 第三方服务</h2>
    <p>
        我们可能会与第三方服务提供商合作，以提供更好的服务。这些第三方可能会访问您的个人信息，但仅限于完成其服务所需的范围。</p>

    <h2>5. 用户权利</h2>
    <p>您有权：</p>
    <ul>
        <li>访问和更正您的个人信息。</li>
        <li>要求删除您的个人信息。</li>
        <li>撤回对个人信息处理的同意。</li>
    </ul>

    <h2>6. 协议更新</h2>
    <p>我们可能会不时更新本隐私协议。任何更新将通过我们的网站或服务通知您。</p>

    <h2>7. 联系我们</h2>
    <p>如果您对本隐私协议有任何疑问或建议，请通过以下方式联系我们：</p>
    <p>邮箱：privacy@example.com</p>
    <p>电话：+86 123 4567 8910</p>

    <div class="footer">
        <p>© 2023 示例公司. 保留所有权利.</p>
    </div>
</div>
</body>
</html>

效果图：

使用网址展示《隐私协议》内容

展示网址的前提是开启网络权限，在src/main/module.json5 文件中配置网络权限：

  "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

 使用网址展示《隐私协议》内容只需要将Web组件src字段赋值为自己需要显示的网址即可，这里就以咱们华为官网的隐私协议为例：

隐私政策 - 华为https://www.huawei.com/cn/privacy-policy这里是Web组件，src赋值"https://www.huawei.com/cn/privacy-policy",即可加载网页内容

// 隐私协议展示
      Web({
        controller: this.controller,
        // 这里使用的是本地文件，也可使用网络地址，实际开发中按照实际情况修改即可
        src: 'https://www.huawei.com/cn/privacy-policy'
      })

 效果如下：

 在输入框聚焦时设置键盘避让模式

在设置键盘避让模式之前，登录表单有可能会被键盘挡住影响操作，示例如下

设置键盘避让模式之后，登录表单就会随着键盘抬起而自动避让键盘，效果如下：

 设置键盘避让模式，鸿蒙提供了一个api去完成 setKeyboardAvoidMode，这里完成这个效果的关键在于监听TextInput组件的聚焦失焦，在TextInput组件的onEditChange事件中提供了一个参数，这个参数是个bealoon值，若值为true则输入框聚焦，若值为false则输入框失焦，基于此，可以直接在onEditChange事件中直接判断，当参数值为true时调用 api，调用这个api时有一点要足以KeyboardAvoidMode这个枚举需要从‘@kit.ArkUI’中导入，否则在枚举下面也没有RESIZE，键盘避让也不会生效：

导入

import { KeyboardAvoidMode, window } from '@kit.ArkUI';

 设置键盘避让模式api

.onEditChange((isEditing) => {
          // 设置键盘避让模式
          if (isEditing) {
            window.getLastWindow(getContext())
              .then((win) => {
                win.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
              })
          }
        })

 最后附上完整代码：

index.ets

import { preferences } from '@kit.ArkData';
import { KeyboardAvoidMode, router, window } from '@kit.ArkUI';

@Entry
@Component
struct LoginForm {
  @State username: string = ''; // 用户名
  @State password: string = ''; // 密码
  @State message: string = ''; // 提示信息
  @State isAgreed: boolean = false; // 是否同意隐私协议

  // 获取首选项存储实例
  getStore() {
    return preferences.getPreferencesSync(getContext(), { name: 'userStore' });
  }

  // 存储用户数据
  saveUserData(key: string, value: string) {
    const store = this.getStore();
    store.putSync(key, value);
    store.flushSync();
    this.message = '登录成功，数据已保存！';
  }

  // 验证登录
  validateLogin() {
    if (!this.username || !this.password) {
      this.message = '用户名或密码不能为空！';
      return;
    }
    if (!this.isAgreed) {
      this.message = '请先阅读并同意隐私协议！';
      return;
    }
    // 模拟简单的登录验证逻辑
    if (this.username === 'admin' && this.password === '123456') {
      this.saveUserData('username', this.username);
      this.saveUserData('password', this.password);
    } else {
      this.message = '用户名或密码错误！';
    }
  }

  build() {
    Column({ space: 20 }) {
      Text('登录表单')
        .fontSize(24)
        .fontWeight(FontWeight.Bold);

      // 用户名输入框
      TextInput({ placeholder: '请输入用户名' })
        .onChange((value: string) => {
          this.username = value;
        })
        .onEditChange((isEditing) => {
          // 设置键盘避让模式
          if (isEditing) {
            window.getLastWindow(getContext())
              .then((win) => {
                win.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
              })
          }
        })
        .width('80%');

      // 密码输入框
      TextInput({ placeholder: '请输入密码' })
        .onEditChange((isEditing) => {
          if (isEditing) {
            window.getLastWindow(getContext())
              .then((win) => {
                // 设置键盘避让模式
                win.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
              })
          }
        })
        .type(InputType.Password)
        .onChange((value: string) => {
          this.password = value;
        })
        .width('80%');
      // 隐私协议勾选框
      Row({ space: 10 }) {
        Checkbox()
          .select(this.isAgreed)
          .onChange((isChecked: boolean) => {
            this.isAgreed = isChecked;
          });

        Text() {
          Span('我已阅读并同意')
            .onClick(() => {
              // 点击文字也可以触发勾选
              this.isAgreed = !this.isAgreed;
            });
          Span('《隐私协议》')
            .onClick(() => {
              router.pushUrl({
                // 隐私协议
                url: 'pages/PrivacyPolicyPage'
              })
            })
            .fontColor(Color.Blue)
        }
        .fontSize(14)

      }
      .width('80%')
      .alignItems(VerticalAlign.Center);

      // 登录按钮
      Button('登录')
        .onClick(() => {
          this.validateLogin();
        })
        .width('80%');

      // 提示信息
      Text(this.message)
        .fontSize(14)
        .fontColor(this.message.includes('成功') ? Color.Green : Color.Red);
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%');
  }
}

在 src/main/resources/rawfile 目录下的隐私协议内容html文件

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>用户隐私协议</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        h2 {
            color: #3498db;
            margin-top: 25px;
            margin-bottom: 15px;
        }
        p {
            margin-bottom: 15px;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            font-size: 0.9em;
            color: #7f8c8d;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>用户隐私协议</h1>

    <p>
        感谢您使用我们的服务。我们非常重视您的隐私，并致力于保护您的个人信息。本隐私协议旨在向您说明我们如何收集、使用、存储和保护您的个人信息。</p>

    <h2>1. 信息收集</h2>
    <p>我们可能会收集以下类型的个人信息：</p>
    <ul>
        <li>您在注册或使用服务时提供的姓名、邮箱地址、电话号码等。</li>
        <li>您在使用服务时生成的设备信息、IP地址、浏览器类型等。</li>
        <li>您在使用服务时提供的其他相关信息。</li>
    </ul>

    <h2>2. 信息使用</h2>
    <p>我们可能会将您的个人信息用于以下目的：</p>
    <ul>
        <li>提供和改进我们的服务。</li>
        <li>与您沟通，包括但不限于通知、支持和反馈。</li>
        <li>分析和优化用户体验。</li>
        <li>遵守法律法规和保护我们的合法权益。</li>
    </ul>

    <h2>3. 信息保护</h2>
    <p>我们采取以下措施保护您的个人信息：</p>
    <ul>
        <li>使用加密技术和安全措施保护数据传输和存储。</li>
        <li>限制内部人员访问您的个人信息。</li>
        <li>定期进行安全审计和漏洞修复。</li>
    </ul>

    <h2>4. 第三方服务</h2>
    <p>
        我们可能会与第三方服务提供商合作，以提供更好的服务。这些第三方可能会访问您的个人信息，但仅限于完成其服务所需的范围。</p>

    <h2>5. 用户权利</h2>
    <p>您有权：</p>
    <ul>
        <li>访问和更正您的个人信息。</li>
        <li>要求删除您的个人信息。</li>
        <li>撤回对个人信息处理的同意。</li>
    </ul>

    <h2>6. 协议更新</h2>
    <p>我们可能会不时更新本隐私协议。任何更新将通过我们的网站或服务通知您。</p>

    <h2>7. 联系我们</h2>
    <p>如果您对本隐私协议有任何疑问或建议，请通过以下方式联系我们：</p>
    <p>邮箱：privacy@example.com</p>
    <p>电话：+86 123 4567 8910</p>

    <div class="footer">
        <p>© 2023 示例公司. 保留所有权利.</p>
    </div>
</div>
</body>
</html>

隐私协议页面 

PrivacyPolicyPage.ets

import { webview } from '@kit.ArkWeb'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct PrivacyPolicyPage {
  controller: webview.WebviewController = new webview.WebviewController()

  build() {
    Column() {
      // 头部NavBar
      RelativeContainer() {
        Image($r('app.media.left_arrow'))
          .height(26)
          .width(26)
          .onClick(() => {
            router.back()
          })
          .alignRules({
            left: {
              anchor: '__container__',
              align: HorizontalAlign.Start
            },
            center: {
              anchor: '__container__',
              align: VerticalAlign.Center
            }
          })
          .margin({ left: 20 })
        Text('隐私协议')
          .alignRules({
            middle: {
              anchor: '__container__',
              align: HorizontalAlign.Center
            },
            center: {
              anchor: '__container__',
              align: VerticalAlign.Center
            }
          })
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .height(60)

      // 隐私协议展示
      Web({
        controller: this.controller,
        // 这里使用的是本地文件，也可使用网络地址，实际开发中按照实际情况修改即可
        src: $rawfile('index.html')
      })
        .layoutWeight(1)
        .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

​

# 华为 # harmonyos
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

[特殊字符] Mojo 语言：为 AI 硬件而生的“Python 升级版” —— 完整指南

avatar 人工智能6S服务平台

告别深拷贝的痛：在鸿蒙PC与ArkTS中玩转 `@ObservedV2` 装饰器

带来的细粒度响应，这不仅仅是 API 的升级，更是鸿蒙 ArkUI 框架逐渐走向成熟的一个缩影。作为开发者，我们应该顺应这种改变，用更声明式、更高效的代码去构建未来的鸿蒙PC应用。今天，我们不堆砌官方文档，直接从实际开发的痛点出发，扒一扒这套新一代状态管理机制的底层逻辑，看看它是怎么在鸿蒙6的环境下，把UI刷新效率拉满的。为了在复杂业务中解决这个问题，开发者往往不得不把状态提升到极高的层级，导致父

avatar 人工智能6S服务平台
cover

开源鸿蒙 Flutter 实战｜分隔线组件全流程实现

avatar 人工智能6S服务平台