组件设置margin不生效

问题现象

组件设置margin属性添加外边距未生效。

@Entry
@Component
struct Page {
  build() {
    Column() {
      Column() {
        Text('这是一个输入文本')
          .margin({ left: 40, right: 40 })
          .width('100%')
          .height(40)
          .fontSize(16)
          .borderRadius(20)
          .textIndent(20)
          .backgroundColor('#E5E5EA')
      }
      .backgroundColor('#f1f3f5')
      .width('100%')
      .height(72)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

问题效果预览：

背景知识

• margin：设置组件的外边距属性。可以用来调整组件与其他元素之间的间距。
• calc：用于动态计算长度值的函数，常用于灵活设置布局尺寸（如宽度、高度、边距等）。它允许通过数学表达式组合不同单位和数值，实现动态响应式设计。需要注意的是在使用calc时运算符与数值之间需要使用空格隔开，该方法从API version 10开始适用于尺寸设置中。

解决方案

上述问题是因为子组件设置了宽度为100%，且同时设置了相同的左右margin值，即设置子元素与父元素左右保持相同的距离，但由于宽度为100%，左右设置了相同的margin导致左右边距相互抵消，实际的margin出现在了屏幕之外，想要实现子元素距离父元素左右有一定的距离可以通过下面两种方式进行处理。

• 方案一：

  使用calc计算特性，计算出子元素的宽度，并居中显示。

  @Entry
  @Component
  struct PlanA {
    build() {
      Column(){
        Column() {
          Text('这是一个文本')
            .width('calc(100% - 80vp)')
            .height(40)
            .fontSize(16)
            .borderRadius(20)
            .textIndent(20)
            .backgroundColor('#E5E5EA')
        }
        .backgroundColor('#f1f3f5')
        .width('100%')
        .height(72)
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
  
  

• 方案二：

  通过给子元素外层嵌套元素，给外层元素添加padding属性实现。

  @Entry
  @Component
  struct PlanB {
    build() {
      Column(){
        Column() {
          Column() {
            Text('这是一个输入文本')
              .width('100%')
              .height(40)
              .fontSize(16)
              .borderRadius(20)
              .textIndent(20)
              .backgroundColor('#E5E5EA')
          }
          .width('100%')
          .padding({ left: 40, right: 40 })
        }
        .backgroundColor('#f1f3f5')
        .width('100%')
        .height(72)
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }

  效果预览：