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)  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
已于2024-10-28 15:23:57修改
分享
微博
QQ
微信
回复
2024-10-28 15:23:44


相关问题
HarmonyOS 宽度100% margin左右不生效
616浏览 • 1回复 待解决
设置组件宽度超出组件
1005浏览 • 1回复 待解决
HarmonyOS组件超出组件宽度
489浏览 • 1回复 待解决
HarmonyOS 子控件设置宽度100%问题
629浏览 • 1回复 待解决
组件宽度width是否包含borderWidth
857浏览 • 1回复 待解决