如何调整Stack容器内子组件的位置
==================

#### 问题现象

Stack容器内子组件默认会在同一位置堆叠放置，如何去调整这些子组件的坐标位置，例如按某种规则堆叠或设置其处于任意坐标上？

#### 背景知识

*   层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过[Stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-stack-layout)容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
*   Stack布局中，子组件依赖[alignContent参数](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-stack#aligncontent)实现位置的相对移动。支持9种预设对齐方式，该参数控制Stack所有子组件的定位，无法通过该属性单独控制子组件实现准确定位。

#### 解决方案

*   **方案一**：Stack布局常用于堆叠多个子组件。然而，有时需要进一步增强布局的灵活性，使得单个组件能够更好地满足不同的布局需求。为了实现这一点，可以将每个子组件嵌套在一个Column容器中。这样做可以利用Column的特性，使其能够根据父容器的尺寸自动调整子组件的位置和大小。
    
    例如，通过给Column设置justifyContent属性，可以使其中的组件分别处于竖直方向上的顶部，居中和底部位置。
    
    @Entry
    @Component
    struct StackLayout {
      build() {
        Stack() {
          Column() {
            Column()
              .borderRadius(8)
              .width(100)
              .height(50)
              .backgroundColor('#5291FF');
          }
          .justifyContent(FlexAlign.Start)
          .width('100%')
          .height('100%');
    
          Column() {
            Column()
              .borderRadius(8)
              .width(100)
              .height(50)
              .backgroundColor('#5291FF');
          }
          .justifyContent(FlexAlign.Center)
          .width('100%')
          .height('100%');
    
          Column() {
            Column()
              .borderRadius(8)
              .width(100)
              .height(50)
              .backgroundColor('#5291FF');
          }
          .justifyContent(FlexAlign.End)
          .width('100%')
          .height('100%');
        }
        .height('90%')
        .offset({ x: '0%', y: '5%' });
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3/v3/g8LN1OEzSO2koWYXnn2q_A/zh-cn_image_0000002628392488.png?HW-CC-KV=V1&HW-CC-Date=20260709T133906Z&HW-CC-Expire=86400&HW-CC-Sign=7DADF65744F55D0ED40B68B5D145B6E31FD7694544886A436DD729061F0A06BA "点击放大")
    
*   **方案二**：需要精确地控制单个子组件的位置，可以使用[offset](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-shape#offset)和[position](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-location#position)去做具体的调整。其中，offset控制子组件相对于自身原始位置的偏移，position控制子组件在父组件中的绝对位置。
    
    例如，通过position调整单个子组件至垂直方向底部，水平方向居中（alignContent参数可以使所有子组件在此处进行重叠，但无法指定单个子组件的位置）。
    
    @Entry
    @Component
    struct StackExample {
      build() {
        Column() {
          Stack() {
            Column()
              .borderRadius(8)
              .backgroundColor('#5291FF')
              .width(100)
              .height(50)
              .position({ x: 150 \- 50, y: 150 \- 50 });
          }
          .width(300)
          .height(150)
          .backgroundColor('#F1F3F5')
          .borderRadius(8);
        }
        .alignItems(HorizontalAlign.Center)
        .width('100%')
        .height('100%');
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6/v3/G3xzfkPpQh6p_BAOIoX5SA/zh-cn_image_0000002658911709.png?HW-CC-KV=V1&HW-CC-Date=20260709T133906Z&HW-CC-Expire=86400&HW-CC-Sign=7BB0AA0944234EE621E024689603615772AF7658F3948FAF3AEADF8EE7538973 "点击放大")