天天看點

HarmonyOS實戰—元件的外邊距和内邊距

邊距

  • 元件的位置屬性,分為:内邊距 和 外邊距
HarmonyOS實戰—元件的外邊距和内邊距

1. 外邊距

  • 表示元件跟外部其他元件的邊距
HarmonyOS實戰—元件的外邊距和内邊距
HarmonyOS實戰—元件的外邊距和内邊距
HarmonyOS實戰—元件的外邊距和内邊距
  • 案例:
  • 如果隻設定 

    margin

     ,就會把上下左右都給設定了,這是一個整體的設定。
ohos:margin="10vp"
           
  • 設定第一個文本元件 

    ohos:top_margin="10vp"

HarmonyOS實戰—元件的外邊距和内邊距
  • 給下面的文本框設定:

    ohos:top_margin="20vp"

HarmonyOS實戰—元件的外邊距和内邊距

外邊距小節:

  • 元件邊框外側距離其他元件的距離。
  • 如果元件外側沒有其他元件,則是到父布局的距離。

2. 内邊距

  • 元件邊框内側跟文本之間的間距
HarmonyOS實戰—元件的外邊距和内邊距
HarmonyOS實戰—元件的外邊距和内邊距
  • 一般設定上内邊距和左内邊距就行了,因為設定了這兩個,就可以确定文本的位置了
HarmonyOS實戰—元件的外邊距和内邊距
  • 利用内邊距就可以調整元件内部文本的位置
  • 把第二個文本的内邊距設定為:

    ohos:top_padding="20vp"

  • 元件邊框内側距離内部文字的距離。