鸿蒙系统的自定义手势密码功能实现

简述：在最经开发鸿蒙app的过程中，需要做一个手势密码登录页面，虽然鸿蒙官网上提供了相应的组件，但是并不能满足我们的业务需求，所有我们只能自己自定义控件。先来看看我自己自定义手势密码页面的效果，大体满足了实际的业务需求。

先看下效果图

具体的实现步骤如下：

1. 确定ui容器的选择

手势密码一般都是九宫格的方式排列，很明显这里最优的选择容器是RelativeContainer

这个容器就相当于Android的RelativeLayout,用法也很相似，不清楚的朋友可以自行去官网查看

用法，这里就不一一讲解了。

大致的布局模型图如下

一般情况下手势密码都是9个点，但是不排除有二班的情况，为了防止设置的的4*4或者5*5的情况出现，所以我在布局的地方采用了一种更灵活的方式，逻辑可能有些许绕，不过静下心来也是很容易看懂的，直接上代码：

ForEach(this.ViewArr, (item: ChildViewModel, index: number) => {
  GestureLockView({
    clickImage: this.clickImage,
    defaultImage: this.defaultImage,
    mGestureLockViewWidth: this.mGestureLockViewWidth,
    mMarginBetweenLockView: this.mMarginBetweenLockView,
    childViewModel: item

  })
    .alignRules({
      top: {
        //如果是第一行，则以自身为基础，如果不是第一行，为在上一行元素的底部
        anchor: (index < this.mCount ? '__container__' : ('view_' + (index - this.mCount))),
        //如果是第一行则头部为VerticalAlign.Top，