【鸿蒙开发】第8课，PatternLock九宫格图案锁组件、QRCode组件、Radio单选组件

1 PatternLock组件

PatternLock是鸿蒙系统中的一个UI组件，它允许用户通过九宫格图案的方式输入密码。当用户在PatternLock组件区域按下时，输入状态开始；手指离开屏幕时，输入状态结束，完成密码输入。

1.1 PatternLock组件属性说明

PatternLock组件支持多种属性，这些属性可以帮助开发者实现各种视觉效果和功能需求。以下是一些常用的属性及其说明：

sideLength：设置组件的宽度和高度（宽高相同）。默认值为300vp，最小可以设置为0。
circleRadius：设置宫格中圆点的半径。默认值为14vp。
backgroundColor：设置背景颜色。
regularColor：设置宫格圆点在"未选中"状态的填充颜色。默认值为黑色。
selectedColor：设置宫格圆点在"选中"状态的填充颜色。默认值为黑色。
activeColor：设置宫格圆点在"激活"状态的填充颜色。"激活"状态为手指经过圆点但还未选中的状态。默认值为黑色。
pathColor：设置连线的颜色。默认值为蓝色。
pathStrokeWidth：设置连线的宽度。默认值为34vp，最小可以设置为0。
autoReset：设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。
activateCircleStyle（API Version 12+）：设置宫格圆点在"激活"状态的背景圆环样式。

1.2 PatternLock组件事件处理

PatternLock组件支持多种事件处理，这些事件可以帮助开发者响应用户的操作，如密码输入完成、圆点连接等。以下是一些常用的事件及其说明：

onPatternComplete：密码输入结束时触发该回调。回调参数为与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。
onDotConnect（API Version 11+）：密码输入选中宫格圆点时触发该回调。回调参数为选中宫格圆点顺序的数字，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。

1.3 PatternLock组件控制器

PatternLock组件的控制器（PatternLockController）允许开发者通过代码控制组件的状态，如重置组件状态。以下是一些常用的控制器方法及其说明：

reset：重置组件状态。
setChallengeResult（API Version 11+）：用于设置图案密码正确或错误状态。

1.4 代码示例

下面是一个使用PatternLock组件的简单示例，包括代码和详细注释。这个示例展示了如何创建一个PatternLock组件，并处理密码输入完成和重置密码锁的事件。

typescript 复制代码

// 导入必要的模块
import { LengthUnit } from '@kit.ArkUI';

@Entry
@Component
struct PatternLockDemo {
  @State passwords: Number[] = [] // 存储用户输入的密码
  @State message: string = '请设置密码!' // 提示信息
  @State hasSetPwdSuccess: boolean = false // 是否成功设置密码
  private patternLockController: PatternLockController = new PatternLockController() // 创建PatternLock控制器

  build() {
    Column({ space: 10 }) {
      Text(this.message)
        .textAlign(TextAlign.Center)
        .margin(20)
        .fontSize(20)

      PatternLock(this.patternLockController)
        .sideLength(200)// 设置组件宽度和高度
        .circleRadius(9)// 设置宫格圆点半径
        .pathStrokeWidth(18)// 设置连线宽度
        .activeColor('#B0C4DE')// 设置激活状态圆点颜色
        .selectedColor('#228B22')// 设置选中状态圆点颜色
        .pathColor('#90EE90')// 设置连线颜色
        .backgroundColor('#F5F5F5')// 设置背景颜色
        .autoReset(true)// 允许在完成输入后再次触屏重置组件状态
        .activateCircleStyle({
          color: '#90EE90', // 设置激活状态背景圆环颜色
          radius: { value: 16, unit: LengthUnit.VP }, // 设置激活状态背景圆环半径
          enableWaveEffect: true // 启用波浪动画效果
        })
        .onDotConnect((index: number) => {
          console.log("onDotConnect index: " + index) // 输出连接圆点索引
        })
        .onPatternComplete((input: Array<number>) => {
          // 处理密码输入完成事件
          if (input.length < 5) {
            this.message = '密码要大于5位，重新输入'
            this.patternLockController.reset()
            return
          }

          if (this.hasSetPwdSuccess) { // 如果已经设置了密码，进行密码验证
            if (this.passwords.toString() === input.toString()) {
              this.message = '密码正确'
              this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT) // 密码正确状态
            } else {
              this.message = '密码错误'
              this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG) // 密码错误状态
            }
          } else { // 没有设置密码，先进行密码设置
            if (this.passwords.length > 0) {
              // 判断两次输入的密码是否相同
              if (this.passwords.toString() === input.toString()) {
                this.hasSetPwdSuccess = true
                this.passwords = input
                this.message = '设置密码成功: ' + this.passwords.toString()
                this.patternLockController.reset()
              } else {
                this.message = '两次密码不一致，请重新输入'
                this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG) // 设置密码错误状态
              }
            } else {
              // 保存设置的密码，并提示第二次密码输入
              this.passwords = input
              this.message = "请再输入一次密码"
            }
          }

        })

      Button('重置密码')
        .margin(30)
        .onClick(() => {
          // 重置密码锁
          this.patternLockController.reset()
          this.passwords = []
          this.message = '请设置密码!'
          this.hasSetPwdSuccess = false
        })
      if (this.hasSetPwdSuccess)
        Text("密码：" + this.passwords.toString())
    }
    .width('100%')
    .height('100%')
  }
}

2 QRCode组件

QRCode组件是鸿蒙系统中用于显示单个二维码的组件。它支持设置二维码颜色、背景颜色、内容不透明度等。

2.1 QRCode组件的属性

QRCode组件除了支持通用属性外，还支持以下特定属性：

value：字符串类型，必填。用来生成二维码的内容。
color：颜色类型，可选。设置二维码的颜色。
backgroundColor：颜色类型，可选。设置二维码的背景颜色。
contentOpacity：数字或资源类型，可选（从API Version 11开始支持）。设置二维码内容颜色的不透明度，不透明度最小值为0，最大值为1。注意当设置了背景色时该设置不生效。

2.2 代码示例

typescript 复制代码

@Entry
@Component
struct Index {
  // 定义状态变量，存储二维码的内容
  @State qrValue: string = 'https://juejin.cn/column/7473406723488219175';

  build() {
    Column({ space: 10 }) {
      // 显示QRCode组件，并设置相关属性
      QRCode(this.qrValue)
        .width(200)
        .height(200)
          // .contentOpacity(0.1) // 二维码透明度，当设置了背景色该设置不生效
        .color(Color.Yellow) // 设置二维码颜色
        .backgroundColor(Color.Green) // 设置二维码背景颜色
    }
    .width('100%')
    .margin({ top: 5 });
  }
}

3 Radio组件

Radio组件，即单选框组件，是鸿蒙系统中常用的一种表单元素。它允许用户从一组选项中选择一个选项，通常由一个圆圈和一个标签组成。Radio组件常用于收集用户选择的信息，如性别、年龄、爱好等，使表单填写更加快捷和准确。

3.1 、Radio组件的基本用法

在鸿蒙系统中，创建Radio组件非常简单。

typescript 复制代码

Radio(options: {value: string, group: string,  indicatorType?: RadioIndicatorType, indicatorBuilder?: CustomBuilder})

其中，value是单选框的名称，group是所属组的组名称。同一组的Radio组件中，只有一个可以被选中。 indicatorType是指定单选按钮选中状态的指示器类型,indicatorBuilder用于构建自定义的选中状态指示器。

通过checked属性来设置Radio组件的选中状态。当checked属性为true时，表示该Radio组件被选中；为false时，表示未选中。

可以通过绑定onChange事件来响应Radio组件的选中操作。当Radio组件的选中状态发生变化时，会触发onChange事件，并传递一个布尔值参数，表示当前是否选中。

3.2 代码示例

typescript 复制代码

// 导入必要的模块
import promptAction from '@ohos.promptAction';
import image from '@ohos.multimedia.image';

@Entry
@Component
struct RadioExample {
  @Builder
  indicatorBuilder() {
    Image($r('app.media.startIcon'))
  }

  build() {
    // 创建一个Row容器，用于水平排列Radio组件
    Row() {
      // 创建第一个Radio组件，并设置其初始状态为选中
      Column() {
        Radio({ value: 'Radio1', group: 'radioGroup', indicatorType: RadioIndicatorType.TICK })
          .checked(true)// 设置选中状态为true
          .height(50)// 设置高度
          .width(50)// 设置宽度
          .onChange((isChecked: boolean) => {
            if (isChecked) {
              // 当选中状态发生变化时，显示Toast提示
              promptAction.showToast({ message: 'Radio1 selected' });
            }
          });
        Text('Radio1') // 显示Radio组件的标签
      }

      // 创建第二个Radio组件，并设置其初始状态为未选中

      Column() {
        Radio({ value: 'Radio2', group: 'radioGroup', indicatorType: RadioIndicatorType.DOT })
          .checked(false)// 设置选中状态为false
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            if (isChecked) {
              promptAction.showToast({ message: 'Radio2 selected' });
            }
          });
        Text('Radio2')
      }

      // 创建第三个Radio组件，并设置其初始状态为未选中
      Column() {
        Radio({
          value: 'Radio3',
          group: 'radioGroup',
          indicatorType: RadioIndicatorType.CUSTOM,
          indicatorBuilder: this.indicatorBuilder
        })
          .checked(false)
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            if (isChecked) {
              promptAction.showToast({ message: 'Radio3 selected' });
            }
          });
        Text('Radio3')
      }
    }

    .height
    ('100%'
    ) // 设置Row容器的高度
    .width
    ('100%'
    ) // 设置Row容器的宽度
    .justifyContent
    (FlexAlign
      .Center
    ) // 设置子组件水平居中
  }
}