ArkUI 内边距padding 外边距margin

原创已于 2025-01-01 18:02:13 修改 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos

于 2024-12-26 17:25:33 首次发布

Harmony OS 专栏收录该内容

13 篇文章

订阅专栏

内边距padding

在组件内添加间距，拉开内容和组件边缘的距离

.padding（xx）设置四个方向内边距均为xx

.padding({
  left: xx,  //设置左边距为xx
  top:xx,   /xx/设置上边距为xx
  right:xx, //设置右边距为xx
  bottom:xx //设置下边距为xx
})

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:10}){
      Row(){
        Text("Harmonyos")
          .backgroundColor(Color.Red)
          .fontSize(60)
          .padding(20)  //设置内边距四个方向均为20
      }

      Row(){
        Text("Harmonyos")
          .backgroundColor(Color.Blue)
          .fontSize(60)
          .padding({
            left:10,  //设置左边距为10
            top:20,   //设置上边距为20
            right:30, //设置右边距为30
            bottom:40 //设置下边距为40
          })
      }

    }
    .width("100%")


  }
}

外边距margin

在组件外添加间距，拉开组件距离

外边距  margin
.margin（xx）设置四个方向外边距均为xx

.margin({
left: xx,  //设置左边距为xx
top:xx,   /xx/设置上边距为xx
right:xx, //设置右边距为xx
bottom:xx //设置下边距为xx
})

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:10}){
    
      /**
       * 外边距  margin
       .margin（xx）设置四个方向外边距均为xx

       .margin({
       left: xx,  //设置左边距为xx
       top:xx,   /xx/设置上边距为xx
       right:xx, //设置右边距为xx
       bottom:xx //设置下边距为xx
       })
       */

      Row(){
        Text("huawei")
          .margin({
            left:10,
            right:10,
            top:5,
            bottom:5
          })
          .fontSize(30)
          .backgroundColor(Color.Red)
        Text("xiaomi")
          .margin(5)
          .fontSize(30)
          .backgroundColor(Color.Orange)
        Text("oppo")
          .margin(5)
          .fontSize(30)
          .backgroundColor(Color.Green)
        Text("vivo")
          .margin(5)
          .fontSize(30)
          .backgroundColor(Color.Blue)
      }



    }
    .width("100%")


  }
}