HarmonyOS 设置宽度为100%则左右边距失效？

Question

Row() {
  Image($r('app.media.ic_main_search'))
    .height(16)
    .width(16)
    .margin({
      left: 12
    })
}
.margin({
  top: 6,
  bottom: 6,
  left: 12,
  right: 12,
})
.backgroundColor('#FFFFFF')
.borderRadius(50)
.height(32)
.width('100%')

如果我设置宽度为100%则左右边距失效，这种情况只能在外部套一层来实现么？

Answer 1

width(‘100%’) 的时候，margin 左右的设置就会失效。 可以写成这样

.width(px2vp(this.screenWidthPx-60)).height(80)
  .margin({
    top: "15px",
    left: "30px",
    right: "30px",
  })

this.screenWidthPx 这样取值

@State screenWidthPx: number = 0;

aboutToAppear(): void {
  this.screenWidthPx = display.getDefaultDisplaySync().width;
  console.info(this.screenWidthPx.toString());
}

左右margin的值一样的话还可以这样写

.width('calc(100% - 60px)').height(80)
  .margin({
    top: "15px"
  })