199.HarmonyOS NEXT系列教程之图案锁组件集成详解

/**
 * 图形锁屏封装组件
 *    1.使用PatternLock组件实现图形锁屏模块布局及图形密码处理逻辑及输入动效
 *    2.使用@ohos.vibrator接口实现设备振动效果，操作完成或失败时触发振动效果
 *    3.自定义组件参数说明
 *        patternLockController: PatternLock组件控制器，可用于控制组件状态
 *        message: 组件状态信息，使用@Link装饰器修饰，用于组件状态信息的展示
 *        initalPasswords: 初始密码为大写字母Z，九宫格分别代表数字0-8
 *        passwords: 图形密码临时数据，用于进行图形密码设置
 */
PatternLockComponent({
    patternLockController: this.patternLockController,
    message: this.message,
    initalPasswords: this.initalPasswords,
    passwords: this.passwords
})

// 控制器实例化
private patternLockController: PatternLockController = new PatternLockController();

// 控制器使用
PatternLockComponent({
    patternLockController: this.patternLockController
})

// 状态参数定义
@State initalPasswords: number[] = [0, 1, 2, 4, 6, 7, 8];
@State passwords: number[] = [];
@State message: ResourceStr = $r('app.string.pattern_lock_message_1');

// 参数传递
PatternLockComponent({
    message: this.message,
    initalPasswords: this.initalPasswords,
    passwords: this.passwords
})

// 页面隐藏时的处理
onPageHide(): void {
    // 重置密码锁状态
    this.patternLockController.reset();
    this.message = $r('app.string.pattern_lock_message_1');
}

Button($r('app.string.pattern_lock_button_1'))
    .onClick(() => {
        // 重置PatternLock状态
        this.patternLockController.reset();
        this.initalPasswords = [];
        this.passwords = [];
        this.message = $r('app.string.pattern_lock_message_8');
    })

Button($r('app.string.pattern_lock_button_2'))
    .onClick(() => {
        // 设置默认图案
        this.patternLockController.reset();
        this.initalPasswords = [0, 1, 2, 4, 6, 7, 8];
        this.passwords = [];
        this.message = $r('app.string.pattern_lock_message_9');
    })

// 组件样式定制
PatternLockComponent({
    // 基础参数配置
})
.width('100%')
.height('50%')

// 添加自定义功能
startVibrator(vibratorCount?: number) {
    // 振动功能实现
}