HarmonyOS 鸿蒙Next 基于ArkUI及Stage模型，我开发图案密码锁+本地库图表组件

HarmonyOS 鸿蒙Next 基于ArkUI及Stage模型，我开发图案密码锁+本地库图表组件 前言： 通过此项目，可以学习到PatternLock图案密码锁组件，preferences首选项使用，如何创建三方库图表和使用。包含两个页面，一个是Login.ets,、一个是Index.ets，一个本地库图表组件。

开发环境： DevEco Studio 3.1 Canary1 构建版本：3.1.0.100，构建 November 3, 2022

效果演示：

登录界面： 把数据管理->首选项，封装为一个公共类PerferencesUtil,代码如下：

import dataPreferences from '@ohos.data.preferences';
import {Logger} from '../utils/Logger';
const TAG = '[PreferencesUtil]';
const PREFERENCES_NAME = 'myPreferences';       // 首选项名字
const PASSWORD_KEY = 'appPatternLockPassword';  // 首选项Key字段
export class PreferencesUtil{
    createPatternLockPreferences(context) {
        globalThis.getPatternLockPreferences = (() => {
            let preferences: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(context, PREFERENCES_NAME);
            return preferences;
        });
    }
    async getPassword() {
        Logger.info(TAG, `get passworld start`)
        let password: string = 'null';
        const preferences = await globalThis.getPatternLockPreferences();
        password = await preferences.get(PASSWORD_KEY, password);
        return password;
        Logger.info(TAG, `get passworld start`)
    }
    async setPassword(passWorld: string) {
        Logger.info(TAG, `set passworld start`)
        globalThis.getPatternLockPreferences().then(async (preferences) => {
            await preferences.put(PASSWORD_KEY, passWorld);
            preferences.flush();
        }).catch((err) => {
            Logger.error(TAG, 'put the preferences failed, err: ' + err);
        });
        Logger.debug(TAG, `set password end`)
    }
}
export default new PreferencesUtil();

PatternLock 图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。

接口： PatternLock(controller?: PatternLockController)

参数:

属性: 不支持除backgroundColor以外的通用属性设置。

事件: 除支持通用事件外，还支持以下事件：

PatternLockController PatternLock组件的控制器，可以通过它进行组件状态重置。

导入对象 patternLockController: PatternLockController = new PatternLockController()

reset reset(): void 重置组件状态。

代码如下：

// 图案密码锁组件PatternLock(this.patternLockController)
.sideLength(300)
.circleRadius(20)
.pathStrokeWidth(20)
.autoReset(true)
.margin({ top: 30, bottom: 50 })
.onPatternComplete((input: Array<number>) => {
    console.info('xx-PatternLock: ' + input)
    // 判断密码长度不能为空，长度要大于或等于5位
    if (input === null || input === undefined || input.length < 5) {
        this.message = $r('app.string.message_password_length_insufficient')
        return
    }
    if (this.isHasPass) {
        if (this.defaultPassword === input.toString()) {
            if (this.isReset) {
                this.message = $r('app.string.message_input_new')
                this.defaultPassword = 'null'
                this.patternLockController.reset()
                this.password = []
                this.isHasPass = false
                return
            }
            router.replace({
                url: 'pages/Index'
            })
        } else {
            this.message = $r('app.string.message_incorrect')
            this.password = []
            return
        }
    }
    // 密码判断
    if (this.password.length > 0) {
        // 密码匹配
        if (this.password.toString() === input.toString()) {
            this.password = input
            this.message = $r('app.string.message_correct')
            this.isShowSetting = true
        } else {
            this.message = $r('app.string.message_not_match')
            this.patternLockController.reset()
        }
    } else {
        // 密码长度不对
        this.password = input
        this.message = $r('app.string.message_input_again')
        this.patternLockController.reset()
    }
})
if (this.isShowSetting) {
    Button($r('app.string.message_set_password'))
        .margin(30)
        .width('60%')
        .onClick(() => {
            this.setPassword()
        })
}
.width('100%').justifyContent(FlexAlign.End)

主界面： 引用本地库图表组件，代码如下：

import { CustomChart, PicChartElement } from '@ohos/library'

图表组件关键代码：

Index.ets

export { CustomChart, PicChartElement } from './src/main/ets/components/mainpage/CustomChart'

CustomChart.ets

@Componentexport struct CustomChart {
    // 饼图数据
    private picChartElements: PicChartElement[]
    // 圆半径
    @State circle_radius:number = 80
    // 单位
    @State unit: string = "克"
    // 获取上下文
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    aboutToAppear() {
        let total = 0
        // 统计总数量
        this.picChartElements.forEach((value) => {
            total += value.quantity
        })
        // 初始化 弧线的终止弧度
        let lastEndAngle = -0.5 * Math.PI
        // 封装饼图数据
        this.picChartElements.forEach((value) => {
            // 占用百分比
            let percent = value.quantity / total
            // 四舍五入，获取整数
            value.percent = Math.round(percent * 100)
            // 初始化终止弧度为 弧线的起始弧度
            value.beginAngle = lastEndAngle
            // 计算弧线的终止弧度
            value.endAngle = (percent * 2 * Math.PI) + lastEndAngle
            // 赋值终止弧度为变量，作为下次的起始弧度
            lastEndAngle = value.endAngle
            // 返回封装好的对象
            return value
        })
    }
    build() {
        Column({space: 30}) {
            Canvas(this.context)
                // 高度为半径2倍
                .height(this.circle_radius * 2)
                // 纵横比，宽度和高度一样
                .aspectRatio(1)
                // 画布组件的事件回调，可以在此时进行绘制
                .onReady(() => {
                    this.picChartElements.forEach((item) => {
                        // 创建一个新的控制路径
                        this.context.beginPath()
                        // 路径从当前点移动到指定点
                        this.context.moveTo(this.circle_radius, this.circle_radius)
                        // 绘制弧线路径(弧线圆心的x坐标值,弧线圆心的y坐标值,弧线的圆半径,弧线的起始弧度,弧线的终止弧度)
                        this.context.arc(this.circle_radius, this.circle_radius, this.circle_radius, item.beginAngle, item.endAngle)
                        // 指定绘制的填充色
                        this.context.fillStyle = item.color
                        // 对封闭路径进行填充
                        this.context.fill()
                    })
                })
            Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround}) {
                ForEach(this.picChartElements, (item: PicChartElement) => {
                    Row({ space: 4 }) {
                        // 标注圆点颜色
                        Circle({ width: 8, height: 8 }).fill(item.color)
                        // 标注文本
                        Text(item.element).fontSize(12)
                        // 标注数量
                        Text(item.quantity + ' ' + this.unit).fontSize(12)
                    }
                    .height(30)
                })
            }
            .width('100%')
        }
        .width('100%')
    }
}
export class PicChartElement {
    element: Resource | string  // 显示文本
    quantity: number            // 数量
    percent: number             // 百分比
    beginAngle: number          // 弧线的起始弧度
    endAngle: number            // 弧线的终止弧度
    color: string               // 颜色
    constructor(element: Resource | string, quantity: number, color: string) {
        this.element = element
        this.quantity = quantity
        this.color = color
    }
}

总结 参考《HarmonyOS第一课》保存应用数据实例，初始化Preferences，是在entryAbility的onCreate方法获取首选项实例，而Import时，提示不允许

Importing ArkTS files to JS and TS files is not allowed. <etsLint>

后来我在Login.ets的aboutToAppear获取首选项实例，可能是现在开发工具目前还不支持吧! 源码已经开源，感兴趣的小伙伴，可以克隆下来运行看看效果。

Gitee源码地址：https://gitee.com/harmonyos3/pattern-lock-chart