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

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%则左右边距失效，这种情况只能在外部套一层来实现么？

HarmonyOS

FengTianYa

2024-12-25 08:42:01

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

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"
  })

2024-12-25 09:58:55

如何写精华回答，获更多曝光？

发布

746浏览 • 1回复待解决

HarmonyOS 组件设置margin左右20，width 100% margin会失效

1985浏览 • 2回复待解决

HarmonyOS 宽度100% margin左右不生效

279浏览 • 1回复待解决

HarmonyOS 宽度100%，左右间距不生效

193浏览 • 1回复待解决

HarmonyOS 子控件使用margin控制跟parent之间的左右边距不生效，看官网demo是用的宽度控制的

397浏览 • 1回复待解决

HarmonyOS Image设置了图片宽度为100%，如何知道这个UI组件的宽度具体是多少

193浏览 • 1回复待解决

HarmonyOS 子控件设置宽度100%问题

315浏览 • 1回复待解决

HarmonyOS 组件包含margin或padding时，宽度设置为100%会超出屏幕

1122浏览 • 1回复待解决

List如何设置分割线左右的边距？

658浏览 • 1回复待解决

HarmonyOS width设置100%,margin左右间距不生效

1203浏览 • 1回复待解决

HarmonyOS 容器布局的宽度设为100%时还想使用左右的margin

694浏览 • 1回复待解决

HarmonyOS .width('100%')和margin同时设置，左右margin无效

344浏览 • 1回复待解决

HarmonyOS 宽度设置“100%”，设置margin不生效怎么办

202浏览 • 1回复待解决

HarmonyOS ArkTS半模态页面，可以设置跟手机左右有边距吗？

193浏览 • 1回复待解决

#鸿蒙通关秘籍#在RelativeContainer中如何设置左右边框的对齐方式？

232浏览 • 1回复待解决

HarmonyOS Swiper组件宽度是100%，displayCount为2，子组件不居中显示问题

262浏览 • 1回复待解决

HarmonyOS 自定义的Dialog如何不在左右两侧留边距直接填满屏幕宽度

314浏览 • 1回复待解决

控件enabled设置为false时，hover失效

2565浏览 • 1回复待解决

HarmonyOS 用calc设置宽度.width(calc(100% -30))，根据需要设置的margin做动态赋值

1025浏览 • 1回复待解决

HarmonyOS 自定义CustomDialog，左右边有间隙，如何消除

504浏览 • 1回复待解决

TableLayoutManager如何给网格自动宽度和网格边距?

5936浏览 • 1回复待解决

HarmonyOS 折叠屏展开态，商城页面左右边界空白过大

657浏览 • 1回复待解决

Text组件的textOverflow设置为textOverflow.Marquee后，textAlign设置为Alignment.Center失效

972浏览 • 1回复待解决

自定义弹窗边界问题,自定义弹窗怎么设置左右边框的margin效果。

1166浏览 • 1回复待解决

HarmonyOS 如何实现宽度固定金额不固定，当金额超出固定宽度时则缩小至完全显示

142浏览 • 1回复待解决

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看