HarmonyOS实战—组件的外边距和内边距

简介: HarmonyOS实战—组件的外边距和内边距

边距

  • 组件的位置属性,分为:内边距 和 外边距

在这里插入图片描述

1. 外边距

  • 表示组件跟外部其他组件的边距

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 案例:
  • 如果只设置 margin ,就会把上下左右都给设置了,这是一个整体的设置。
ohos:margin="10vp"
  • 设置第一个文本组件 ohos:top_margin="10vp"

在这里插入图片描述

  • 给下面的文本框设置:ohos:top_margin="20vp"

在这里插入图片描述

外边距小节

  • 组件边框外侧距离其他组件的距离。
  • 如果组件外侧没有其他组件,则是到父布局的距离。

2. 内边距

  • 组件边框内侧跟文本之间的间距

在这里插入图片描述
在这里插入图片描述

  • 一般设置上内边距左内边距就行了,因为设置了这两个,就可以确定文本的位置了

在这里插入图片描述

  • 利用内边距就可以调整组件内部文本的位置
  • 把第二个文本的内边距设置为:ohos:top_padding="20vp"

在这里插入图片描述

内边距小节

  • 组件边框内侧距离内部文字的距离。
目录
相关文章
|
1月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
51 0
|
2月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
42 1
|
2月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
39 0
|
2月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
51 0
|
2月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
43 0
|
2月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
53 2
|
2月前
|
IDE 开发工具 数据安全/隐私保护
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
50 0
|
2月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
133 0
|
2月前
|
IDE 开发工具 Windows
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
50 3
|
2月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
29 1