arkUI：布局的属性（margin、padding、border、borderRadius）
- [1 前言](#1 前言)
- [2 表格](#2 表格)
- [3 相关内容说明](#3 相关内容说明)
-
- [3.1 内边距（padding）](#3.1 内边距（padding）)
- [3.2 外边距（margin）](#3.2 外边距（margin）)
- [3.3 边框（border）](#3.3 边框（border）)
- [3.4 圆角（borderRadius）](#3.4 圆角（borderRadius）)
- [4 例子](#4 例子)
-
- [4.1 外边距（margin）](#4.1 外边距（margin）)
-
- [4.1.1 源码1 （外边距）](#4.1.1 源码1 （外边距）)
- [4.1.2 源码1运行效果](#4.1.2 源码1运行效果)
- [4.2 内边距（padding）](#4.2 内边距（padding）)
-
- [4.2.1 源码2（内边距）](#4.2.1 源码2（内边距）)
- [4.2.2 源码2运行效果](#4.2.2 源码2运行效果)
- [4.3 边框（border）](#4.3 边框（border）)
-
- [4.3.1 源码3（边框）](#4.3.1 源码3（边框）)
- [4.3.2 源码3运行效果](#4.3.2 源码3运行效果)
- [4.4 圆角（borderRadius）](#4.4 圆角（borderRadius）)
-
- [4.4.1 源码4（圆角）](#4.4.1 源码4（圆角）)
- [2.4.1 源码6运行效果](#2.4.1 源码6运行效果)
- 5.结语
- 6.定位日期
1 前言
我们可以在ArkUI 中使用内外边距（padding 和 margin）、边框（border）以及圆角（borderRadius）来调整组件的布局和外观。这些样式是前端开发中常用的布局技巧，能够大幅提升界面的美观性和可用性。
2 表格
| 属性 | 描述 |
|---|---|
| margin | 外边距 |
| padding | 内边距 |
| border | 边框 |
| borderRadius | 圆角 |
3 相关内容说明
3.1 内边距（padding）
内边距（padding）用于设置组件内部内容与边框之间的距离。
typescript
padding(20)：为四个方向（上、下、左、右）设置相同的内边距。
padding({ left: 25 })：单独设置左边的内边距。3.2 外边距（margin）
外边距（margin）用于设置组件之间的间距。
typescript
margin({ bottom: 40 })：设置底部外边距为 40。
margin({ top: 20 })：设置顶部外边距为 20。
margin(20)：为四个方向（上、下、左、右）设置相同的外边距。3.3 边框（border）
边框（border）用于给组件添加边框，并设置边框的宽度、颜色和样式。
- 如下，设置边框宽度为 3，颜色为蓝色，样式为实线。
typescript
border({ width: 3, color: "blue", style: BorderStyle.Solid })- 如下，底部边框宽度为 8，颜色为绿色，样式为实线。
typescript
border({ width: { bottom: 8 }, color: "green", style: BorderStyle.Solid })- 如下，底部边框宽度为 8，颜色为绿色，样式为实线。
typescript
border({
width: {
top: 1,
bottom: 5,
left: 10,
right: 3
},
color: '#f00',
style: { top: BorderStyle.Solid, bottom: BorderStyle.Dotted, right: BorderStyle.Dashed }
})3.4 圆角（borderRadius）
圆角（borderRadius）用于设置组件的圆角效果，可以根据需要调整不同的圆角半径来控制组件的外观。
typescript
borderRadius(10)：设置所有四个角的圆角半径为 10。
borderRadius(30)：对于正方形，圆角大于宽度的一半时会变成圆形。
borderRadius(0)：设置圆角为 0，表示没有圆角，保持矩形的形状。4 例子
4.1 外边距（margin）
margin 可以传递一个对象，指定上下左右的外边距，例如 { top: 20, bottom: 30 }，也可以直接传递一个数字来设置四个方向的外边距一致。如果要修改不同方向的外边距，应该使用对象而不是单一数字。
4.1.1 源码1 （外边距）
typescript
@Entry
@Component
struct PageLayoutAttrivute {
build() {
Column() { // 内部容器，垂直排列组件
// 外边距，margin
Text("组件1")
.width(100)
.height(60)
.backgroundColor("#fcc")
.margin({ bottom: 40 }) // 设置底部外边距
Divider()
.color("red") // 设置分隔线颜色为红色
Text("组件2")
.width(100)
.height(60)
.backgroundColor("#caf")
.margin({ top: 20 }) // 设置顶部外边距
Divider()
.color("red") // 设置分隔线颜色为红色
Text("组件3")
.width(100)
.height(60)
.backgroundColor("#caf")
.margin(20) // 直接设置所有方向的外边距为20
Divider()
.color("red") // 设置分隔线颜色为红色
Text("对照组件")
.width(100)
.height(60)
.backgroundColor("#cca") // 设置背景颜色
}
.backgroundColor("#ffc") // 内部容器背景颜色
}
}4.1.2 源码1运行效果
4.2 内边距（padding）
源码2展示了一个简单的布局，其中包含了三个 Text 组件，并且每个组件都有不同的边框和内边距设置。
4.2.1 源码2（内边距）
typescript
@Entry
@Component
struct PageLayoutAttrivute {
build() {
Column() {
Text("对照组1")
.border({ width: 1, color: "black" }) // 边框，颜色为黑色
.fontWeight('bold') // 设置字体加粗
Text("实验组1")
.border({ width: 1, color: "blue" }) // 边框，颜色为蓝色
.padding(20) // 设置内边距
Text("实验组2")
.border({ width: 1, color: "green" }) // 边框，颜色为绿色
.padding({ left: 25 }) // 设置左边内边距
}
.width("100%") // 设置容器宽度为 100%
}
}4.2.2 源码2运行效果
- 实验组1全部内边距为20vp。实验组2只设置左边内边距为25vp。
4.3 边框（border）
使用 { bottom: 8 } 来只设置底部边框宽度为 8，其他的边宽度保持默认。border 属性支持对不同边（如 top、bottom、left、right）进行单独设置。为每个组件的 border 设置添加了注释，以便更清楚地说明每个设置的作用。
4.3.1 源码3（边框）
typescript
@Entry
@Component
struct PageLayoutAttrivute {
build() {
Column({ space: 10 }) { // 设置组件之间的垂直间距为 10
// 组件1，设置边框样式
Text('组件1')
.width(150)
.height(60)
.backgroundColor('#ace')
.border({ width: 3, color: "#ff9d38c8", style: BorderStyle.Solid }) // 设置实线边框
// 组件2，设置虚线边框
Text('组件2')
.width(150)
.height(60)
.backgroundColor('#ffd7af59')
.border({ width: 3, color: "blue", style: BorderStyle.Dashed }) // 设置虚线边框
// 组件3，设置点状边框
Text('组件3')
.width(150)
.height(60)
.backgroundColor('#ff64a6ea')
.border({ width: 3, color: "red", style: BorderStyle.Dotted }) // 设置点状边框
// 组件4，底部设置特定边框宽度
Text('组件4')
.width(150)
.height(60)
// .backgroundColor('#ff75bfc6')
.border({ width: { bottom: 8 }, color: "green", style: BorderStyle.Solid }) // 仅设置底部边框宽度
// 组件5，多边框设置
Text('组件5')
.width(150)
.height(100)
.backgroundColor('#ff176cc3')
.border({
width: { top: 1, bottom: 5, left: 10, right: 3 }, // 各个边的不同宽度
color: '#f00', // 边框颜色为红色
style: { // 不同边使用不同的边框样式
top: BorderStyle.Solid,
bottom: BorderStyle.Dotted,
right: BorderStyle.Dashed
}
})
}
.width("100%") // 设置容器宽度为 100%
}
}4.3.2 源码3运行效果
4.4 圆角（borderRadius）
以下源码4演示了如何在 ArkUI 中使用 borderRadius 来设置组件的圆角效果，包含了文本、图片等不同元素的圆角设置。我们使用用 $r("app.media.xiaowoniu764") 来引用图片，确保这个路径正确，并且图片文件存在。一般来说，资源路径会根据项目的目录结构而有所不同。对于图片元素，设置 borderRadius 的效果会应用到图片的每个角，如果值足够大且图片本身是正方形，则会变成圆形。
4.4.1 源码4（圆角）
typescript
@Entry
@Component
struct PageLayoutAttrivute {
build() {
Column({ space: 10 }) { // 设置子组件之间的垂直间距为 10
// 第一个文本，具有圆角效果
Text('圆角') // 文本内容设置为 "圆角"
.padding(30) // 给文本添加 30 的内边距
.backgroundColor("#ff6adb3b") // 设置背景颜色
.borderRadius(10) // 设置圆角半径为 10
// 正方形，圆角的值大于宽度的一半时，变成圆形
Text('圆形') // 给文本组件添加内容，展示正方形的圆角
.width(60) // 宽度设置为 60
.height(60) // 高度设置为 60
.backgroundColor("#ffdd6363") // 设置背景颜色
.borderRadius(30) // 设置圆角半径为 30，大于宽度的一半，变为圆形
// 图片，也可以设置圆角
Image($r("app.media.xiaowoniu764")) // 加载图片
.width(100) // 设置宽度为 100
.height(100) // 设置高度为 100
.borderRadius(20) // 设置圆角半径为 20
// 更大的圆角，图片将变为圆形
Image($r("app.media.xiaowoniu764")) // 加载图片
.width(100) // 设置宽度为 100
.height(100) // 设置高度为 100
.borderRadius(50) // 设置圆角半径为 50，变为圆形
// 对照组，设置边框为 0 的圆角效果
Image($r("app.media.xiaowoniu764")) // 加载图片
.width(100) // 设置宽度为 100
.height(100) // 设置高度为 100
.borderRadius(0) // 设置圆角为 0，表示没有圆角，保持矩形
}
.width("100%") // 设置容器宽度为 100%
}
}2.4.1 源码6运行效果
5.结语
每个组件的常见用法都有必要记录一下，后续有不懂的可以回顾查看。毕竟官方文档，有些繁杂的。自己积累自己的文本库。碰到啥记录啥，这些都是经验的积累。没想到不难的内容，编写也要耗费这么多时间。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！
6.定位日期
2024-11-5；
23:50；