HarmonyOS 鸿蒙Next Builder自定义构建函数中如果最外层宽度设置100%后，设置borderRadius跟margin属性右边不生效

@Builder function itemView(item:Item){ Row(){ Image(item.avatar) .width(80) .height(100) .interpolation(ImageInterpolation.High) Text(item.name) .fontSize(18) .margin({left:10}) .fontColor(’#222222’) Blank() Column(){ Text(‘￥’+item.income.toString()) .fontSize(15) .fontColor(’#36d’) Text(item.time) .fontSize(14) .fontColor(’#dedede’) } .justifyContent(FlexAlign.SpaceAround) .margin(10) .height(100) } .width(‘100%’) .margin({left:10,right:10}) .borderRadius(10) .padding(10) .alignItems(VerticalAlign.Center) .backgroundColor(’#ffffff’) }

代码如上，在外层设置.width(‘100%’) .margin({left:10,right:10}) .borderRadius(10)，查看效果时最右边的圆角没生效，右边外边距也不生效

不知道为什么会这样子左边的效果可以，右边的就不行

更多关于HarmonyOS 鸿蒙Next Builder自定义构建函数中如果最外层宽度设置100%后，设置borderRadius跟margin属性右边不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼

width(‘100%’)会优先于左右边框，需要用calc计算剩余宽度

我这样改了一下就能看到效果了

更多关于HarmonyOS 鸿蒙Next Builder自定义构建函数中如果最外层宽度设置100%后，设置borderRadius跟margin属性右边不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 2楼

这对吗,哥，

songsunli 3楼作者

没见过这种写法啊, 我再发个贴子问一下吧

.width('calc(100%-30vp)')

caililin 4楼

麻烦提供下可以复现问题的demo

eggper 5楼

名称	收入	时间
对对对	200	2024-01-13 11:30:22
你愁啥	2345	2024-01-13 11:30:22
瞅你咋地	2300	2024-01-13 11:30:22
哈哈哈	250	2024-01-13 11:30:22
就换一个	650	2024-01-13 11:30:22
进集结	100	2024-01-13 11:30:22
www	888	2024-01-13 11:30:22
热热热	992	2024-01-13 11:30:22

phonegap100 6楼

这个是自定义title控件

nodeper 7楼

在HarmonyOS的ArkUI框架中，当最外层容器的宽度设置为100%时，设置borderRadius和margin属性可能会出现右边不生效的情况。这通常是由于布局计算方式导致的。默认情况下，容器的宽度设置为100%时，其宽度会占据父容器的全部可用空间，而borderRadius和margin的计算可能会受到父容器宽度的限制。

具体来说，当宽度设置为100%时，容器会尝试填充父容器的宽度，但margin和borderRadius的渲染可能会受到父容器边界的限制，导致右边部分无法正确显示。这种情况下，可以尝试通过调整父容器的padding或overflow属性来解决问题。例如，设置overflow: visible可以让子容器超出父容器的边界，从而使borderRadius和margin在右边生效。

此外，确保没有其他样式或布局属性（如flex或position）影响容器的宽度计算。如果问题依然存在，可以检查是否有其他样式冲突或布局约束导致右边属性不生效。