3.2：边距设置

组件边距分别内边距和外边距，分别表示为 padding 和 margin，它们说明如下：

• padding：是在元素内部添加一些空白空间，以增加元素的内边距；
• margin：是在元素外部添加一些空白空间，以增加元素的外边距。

3.2.1：padding设置

export declare class CommonMethod<T> {
  padding(value: Padding | Length): T;
}

设置组件的内边距，当只设置一个值时表示对四个方向的边距同时生效；参数类型为 Padding 时，可单独设置边距，若设置为百分比时，上下左右内外距均以父容器的 width 作为基础值。

简单样例如下所示：

@Entry @Component struct Index {

  build() {
    Row({space: 10}) {
      Stack() {
        Text()
          .width('100%')                                 // 设置宽度充满父布局
          .height('100%')                                // 设置高度充满父布局
          .backgroundColor(Color.Pink)                   // 设置背景色
      }
      .padding(10)                                       // 设置四个边距值均为10vp
      .backgroundColor("#aabbcc")                        // 设置背景色
      .size({width: 80, height: 80})                     // 设置宽高尺寸

      Stack() {
        Text()
          .width('100%')                                 // 宽度充满父布局
          .height('100%')                                // 高度充满父布局
          .backgroundColor(Color.Pink)                   // 设置背景色
      }
      .padding({left: 5, top: 20, right: 5, bottom: 20}) // 设置不同的边距值
      .backgroundColor("#aabbcc")                        // 设置背景色
      .size({width: 80, height: 80})                     // 设置宽高尺寸
    }
    .padding(10)
    .width("100%")
  }
}

@Entry @Component class MyView {

    func build() {
      Row(10) {
        Stack() {
          Text("")
            .width(100.percent)
            .height(100.percent)
            .backgroundColor(0xFFC0CB)
        }
        .padding(10)
        .backgroundColor(0xaabbcc)
        .size(width: 80, height: 80)

        Stack() {
          Text("")
            .width(100.percent)
            .height(100.percent)
            .backgroundColor(0xFFC0CB)
        }
        .padding(left: 5, top: 20, right: 5, bottom: 20)
        .backgroundColor(0xaabbcc)
        .size(width: 80, height: 80)
      }
      .padding(10)
      .width(100.percent)
    }
}

样例运行结果如下图所示：

3.2.2：margin设置

export declare class CommonMethod<T> {
  margin(value: Margin | Length): T;
}

设置组件的外边距，当只设置一个值时表示对四个方向的边距同时生效；参数类型为 Margin 时，可单独设置边距，若设置为百分比时，上下左右内外距均以父容器的 width 作为基础值。

简单样例如下所示：

@Entry @Component struct Index {

  build() {
    Row() {
      Stack() {
      }
      .backgroundColor(Color.Pink)                       // 设置背景色
      .size({width: 80, height: 80})                     // 设置宽高尺寸

      Stack() {
      }
      .backgroundColor(Color.Pink)                       // 设置背景色
      .size({width: 80, height: 80})                     // 设置宽高尺寸
      .margin({left: 20})                                // 设置左间距为20vp
    }
    .width("100%")                                       // 设置宽度填充父布局
    .backgroundColor("#aabbcc")                          // 设置背景色
  }
}

@Entry @Component class MyView {

    func build() {
      Row() {
        Stack() {
        }
        .backgroundColor(0xbbccaa)                         // 设置背景色
        .size(width: 80, height: 80)                       // 设置宽高尺寸

        Stack() {
        }
        .backgroundColor(0xbbccaa)                         // 设置背景色
        .size(width: 80, height: 80)                       // 设置宽高尺寸
        .margin(left: 20)                                  // 设置左间距为20vp
      }
      .width(100.percent)                                  // 设置宽度填充父布局
      .backgroundColor(0xaabbcc)                           // 设置背景色
    }
}

样例运行结果如下图所示：