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

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

HarmonyOS
2024-10-28 09:20:21
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

1. 线性布局在给子组件设置margin值时,子组件的宽度就是本身的宽度加上margin的宽度,设置wdith('100%')后再设置margin,子组件宽度就会超过父组件,所以得不到想要的效果。

2. 建议width值和margin都用百分比控制,加起来是100%;不过可以在父子组件中,通过设置padding实现左右预留边距,从而使得子组件不超出屏幕。

3. 另外可以使用到Flex布局来实现,参考代码示例:

build() {  
  Row() {  
    Flex() {  
      Button() {  
      }  
      .width('100%')  
      .height(120)  
      .backgroundColor(Color.Blue)  
      .margin({  
        left: 20,  
        right: 20  
      })  
    }  
    .width('100%')  
    .backgroundColor(Color.Green)  
  }  
  .width('100%')  
  .height(200)  
  .backgroundColor(Color.Grey)  
}
已于2024-10-28 15:23:57修改
分享
微博
QQ
微信
回复
2024-10-28 15:23:44
相关问题
设置组件宽度超出组件
539浏览 • 1回复 待解决
组件宽度width是否包含borderWidth
565浏览 • 1回复 待解决
HarmonyOS right的paddingmargin不生效
608浏览 • 1回复 待解决
如何获取单位vp的屏幕宽度
189浏览 • 1回复 待解决
如何设置屏幕方向横屏
1181浏览 • 1回复 待解决
HarmonyOS 屏幕宽度怎么获取
321浏览 • 1回复 待解决
HarmonyOS Span 可以设置padding
358浏览 • 1回复 待解决