该布局可以使用 RelativeContainer 来实现

目录结构

1. 封装 AlignRules 工具

// AlignRules.ets

// 组件锚点类型
type WidgetAnchor =
  'lt' | 'ct' | 'rt' |
  'lc' | 'c' | 'rc' |
  'lb' | 'cb' | 'rb';

// 容器锚点类型
type ContainerAnchor =
  'LT' | 'CT' | 'RT' |
  'LC' | 'C' | 'RC' |
  'LB' | 'CB' | 'RB';

/**
 * 相对布局对齐规则枚举
 * - 规则：[组件锚点（小写）]2[容器锚点（大写）]
 * - 前2字符：组件自身的参考点（lt=左上, ct=中上, rt=右上等）
 * - 后2字符：目标容器的参考点（LT=左上, RT=右上, C=中心等）
 * - 共9×9=81种组合
 * */
export enum RelativeAlignment {
  // 组件左上(lt) -> 容器锚点
  lt2LT, lt2CT, lt2RT, lt2LC, lt2C, lt2RC, lt2LB, lt2CB, lt2RB,

  // 组件中上(ct) -> 容器锚点
  ct2LT, ct2CT, ct2RT, ct2LC, ct2C, ct2RC, ct2LB, ct2CB, ct2RB,

  // 组件右上(rt) -> 容器锚点
  rt2LT, rt2CT, rt2RT, rt2LC, rt2C, rt2RC, rt2LB, rt2CB, rt2RB,

  // 组件左中(lc) -> 容器锚点
  lc2LT, lc2CT, lc2RT, lc2LC, lc2C, lc2RC, lc2LB, lc2CB, lc2RB,

  // 组件中心(c) -> 容器锚点
  c2LT, c2CT, c2RT, c2LC, c2C, c2RC, c2LB, c2CB, c2RB,

  // 组件右中(rc) -> 容器锚点
  rc2LT, rc2CT, rc2RT, rc2LC, rc2C, rc2RC, rc2LB, rc2CB, rc2RB,

  // 组件左下(lb) -> 容器锚点
  lb2LT, lb2CT, lb2RT, lb2LC, lb2C, lb2RC, lb2LB, lb2CB, lb2RB,

  // 组件中下(cb) -> 容器锚点
  cb2LT, cb2CT, cb2RT, cb2LC, cb2C, cb2RC, cb2LB, cb2CB, cb2RB
}

export class AlignRules {
  // 修改映射表为 Map 结构
  private readonly widgetAnchorMap: Map<WidgetAnchor, [string, string]> = new Map([
    ['lt', ['left', 'top']],
    ['ct', ['middle', 'top']],
    ['rt', ['right', 'top']],
    ['lc', ['left', 'center']],
    ['c', ['middle', 'center']],
    ['rc', ['right', 'center']],
    ['lb', ['left', 'bottom']],
    ['cb', ['middle', 'bottom']],
    ['rb', ['right', 'bottom']]
  ]);
  private readonly containerAnchorMap: Map<ContainerAnchor, [HorizontalAlign, VerticalAlign]> = new Map([
    ['LT', [HorizontalAlign.Start, VerticalAlign.Top]],
    ['CT', [HorizontalAlign.Center, VerticalAlign.Top]],
    ['RT', [HorizontalAlign.End, VerticalAlign.Top]],
    ['LC', [HorizontalAlign.Start, VerticalAlign.Center]],
    ['C', [HorizontalAlign.Center, VerticalAlign.Center]],
    ['RC', [HorizontalAlign.End, VerticalAlign.Center]],
    ['LB', [HorizontalAlign.Start, VerticalAlign.Bottom]],
    ['CB', [HorizontalAlign.Center, VerticalAlign.Bottom]],
    ['RB', [HorizontalAlign.End, VerticalAlign.Bottom]]
  ]);

  // 默认对齐规则
  private defaultRule(id: string): AlignRuleOption {
    return {
      middle: { anchor: id, align: HorizontalAlign.Center },
      center: { anchor: id, align: VerticalAlign.Center }
    };
  }

  // 解析枚举键
  private parseEnumKey(alignContent: RelativeAlignment): [WidgetAnchor, ContainerAnchor] | null {
    const enumKey = RelativeAlignment[alignContent];

    if (!enumKey) {
      return null;
    }

    // 手动拆分字符串，避免解构赋值
    const parts = enumKey.split('2');
    if (parts.length !== 2) {
      return null;
    }

    const widgetKey = parts[0] as WidgetAnchor;
    const containerKey = parts[1] as ContainerAnchor;
    return [widgetKey, containerKey];
  }

  /**
   * 根据对齐类型生成对齐规则
   * @param alignContent 相对布局对齐规则枚举值
   * @param id 锚点元素ID (默认容器)
   * @returns 对齐规则配置对象
   */
  align(alignContent: RelativeAlignment, id: string = '__container__'): AlignRuleOption {
    const parsed = this.parseEnumKey(alignContent);
    if (!parsed) {
      return this.defaultRule(id);
    }

    // 避免解构赋值 - 使用数组索引访问
    const widgetKey = parsed[0];
    const containerKey = parsed[1];

    // 安全访问映射表
    const widgetProps = this.widgetAnchorMap.get(widgetKey);
    const containerAligns = this.containerAnchorMap.get(containerKey);

    if (!widgetProps || !containerAligns) {
      return this.defaultRule(id);
    }

    // 显式创建规则对象
    const result: AlignRuleOption = {};

    // 处理水平属性
    const horizontalProp = widgetProps[0];
    const horizontalAlign = containerAligns[0];

    // 使用显式赋值代替动态属性
    switch (horizontalProp) {
      case 'left':
        result.left = { anchor: id, align: horizontalAlign };
        break;
      case 'right':
        result.right = { anchor: id, align: horizontalAlign };
        break;
      case 'middle':
        result.middle = { anchor: id, align: horizontalAlign };
        break;
    }

    // 处理垂直属性
    const verticalProp = widgetProps[1];
    const verticalAlign = containerAligns[1];

    switch (verticalProp) {
      case 'top':
        result.top = { anchor: id, align: verticalAlign };
        break;
      case 'bottom':
        result.bottom = { anchor: id, align: verticalAlign };
        break;
      case 'center':
        result.center = { anchor: id, align: verticalAlign };
        break;
    }

    return result;
  }
}

export const alignRules = new AlignRules();

1. 导出 AlignRules 工具

// index.ets

export * from './AlignRules'

1. 在使用的页面导入工具

// 示例页面
import { alignRules, RelativeAlignment } from '../utils'

1. 完整实例

// StackAligning01.js

import { alignRules, RelativeAlignment } from '../utils'


@Entry
@Component
struct StackAligning01 {
  build() {
    Scroll() {
      Column() {
        RelativeContainer() {

          Text('4')
            .backgroundColor('#ff8ecef3')
            .width(300)
            .height(60)
            .alignRules(alignRules.align(RelativeAlignment.rb2RB))

          Text('3')
            .backgroundColor('#ffdef0c4')
            .width(200)
            .height(30)
            .alignRules(alignRules.align(RelativeAlignment.lb2LB))

          Text('2')
            .backgroundColor('#ffc4ddf0')
            .width(40)
            .height(30)
            .alignRules(alignRules.align(RelativeAlignment.cb2CB))

          Text('1')
            .backgroundColor('#ffd8c4f0')
            .width(30)
            .height(30)
            .alignRules(alignRules.align(RelativeAlignment.cb2CB))

        }
        .backgroundColor('#fff3df8e')
        .width(100)
        .height(100)

      }
      .backgroundColor('#fff3bf8e')
      .width(350)
      .height(350)
    }
  }
}