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%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

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

HarmonyOS

FengTianYa

2024-12-25 08:42:01

655浏览

回答 1

按赞同

按时间

zxjiu

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

.width(px2vp(this.screenWidthPx-60)).height(80)
  .margin({
    top: "15px",
    left: "30px",
    right: "30px",
  })
1.
2.
3.
4.
5.
6.

this.screenWidthPx 这样取值

@State screenWidthPx: number = 0;

aboutToAppear(): void {
  this.screenWidthPx = display.getDefaultDisplaySync().width;
  console.info(this.screenWidthPx.toString());
}
1.
2.
3.
4.
5.
6.

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

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

2024-12-25 09:58:55

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

发布

1331浏览 • 1回复待解决

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

3069浏览 • 2回复待解决

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

680浏览 • 1回复待解决

HarmonyOS 宽度100% margin左右不生效

1107浏览 • 1回复待解决

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

721浏览 • 1回复待解决

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

556浏览 • 1回复待解决

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

967浏览 • 1回复待解决

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

1888浏览 • 1回复待解决

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

1942浏览 • 1回复待解决

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

1048浏览 • 1回复待解决

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

1149浏览 • 1回复待解决

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

961浏览 • 1回复待解决

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

585浏览 • 1回复待解决

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

606浏览 • 1回复待解决

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

647浏览 • 1回复待解决

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

3215浏览 • 1回复待解决

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

592浏览 • 1回复待解决

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

750浏览 • 1回复待解决

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

832浏览 • 1回复待解决

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

1517浏览 • 1回复待解决

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

1687浏览 • 1回复待解决

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

1216浏览 • 1回复待解决

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

6375浏览 • 1回复待解决

HarmonyOS 设置userAgent失效

636浏览 • 1回复待解决

HarmonyOS 在使用单位为fp和vp，为什么在模拟器中360vp可以占据宽度100% ，在真机上宽度没有达到100%，单位应该怎样做适配

651浏览 • 1回复待解决

51CTO

51CTO博客

51CTO学堂

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

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