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

#### 问题现象

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

#### 背景知识

*   层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
*   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%' });
      }
    }
    ```
    
    效果预览：
    
*   **方案二**：需要精确地控制单个子组件的位置，可以使用offset和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%');
      }
    }
    ```
    
    效果预览：