组件的宽度设置为100%，设置左右margin不生效？

Question

怎么实现组件宽度设置左右margin后撑满剩余宽度

Column() {
  Row() {
    Text(‘Center’)
    .width(MATCH_PARENT)
      .margin({
        left: 10,
        right: 10
      })
      .backgroundColor(’#00f’)
  }
  .alignItems(VerticalAlign.Center)
  .backgroundColor(’#f00’)
  .width(MATCH_PARENT)
    .height(30)
}
.justifyContent(FlexAlign.Center)
.width(MATCH_PARENT)
.height(MATCH_PARENT)

如上述例子，希望text的宽度是离父组件左右各10的margin之后的剩余宽度

Answer 1

设置宽高为100%会充满整个组件，设置margin和padding无法生效，可以使用stack层叠布局来设置类似的效果

@Entry
@Component
struct ColumnExample {
  build() {
    Column() {
      Stack() {
        Column() {
        }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End).width(300)
        Column() {
          Text(‘Center’)
          .width(‘100%’)
          .height(‘100%’)
          .backgroundColor(’#00f’)
        }.width(200).height(60).border({ color: Color.Red, width: 1 })
      }
    }.width(‘100%’).padding({ top: 5 })
  }
}