使用内边距调整间距
使用 Modifier 设置间距。
使用内边距调整间距 是 CoddyKit 上的免费 Android Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Android Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 4 节课。
什么是 Padding?
Padding 是添加在可组合项内容周围的空白区域。它会让内容远离边缘,避免布局显得拥挤。
在 Compose 中,您可以通过 Modifier 添加 padding。
Text(
text = "Hello",
modifier = Modifier.padding(16.dp)
)dp 单位
Padding 的大小使用 dp 表示,即与密度无关的像素。无论屏幕是什么尺寸,dp 的实际物理大小都保持一致。
写一个数字,后面加上 .dp,例如 8.dp 或 24.dp。
Modifier.padding(8.dp)什么是 Modifier?
Modifier 描述可组合项的外观和行为,例如大小、padding、背景等。
您可以用点号将多个函数连接起来,逐步构建修饰符。
Modifier
.padding(16.dp)
.background(Color.Yellow)为四边添加 Padding
使用一个值调用 padding(16.dp),会在四边添加相同的空白:上、下、起始和末尾。
这是让内容获得舒适留白的最快方式。
Box(
modifier = Modifier.padding(16.dp)
) {
Text("Inside")
}水平和垂直 Padding
您可以通过 horizontal 和 vertical 参数分别设置不同方向的边。
Horizontal 覆盖起始和末尾,vertical 覆盖顶部和底部。
Modifier.padding(
horizontal = 24.dp,
vertical = 8.dp
)为单边添加 Padding
要针对单个边缘设置间距,请指定它的名称:start、top、end 或 bottom。
这样可以在需要的位置精确调整间距。
Modifier.padding(
start = 16.dp,
top = 4.dp
)顺序很重要
Modifier 的顺序会改变结果。将 padding 放在 background 之前,padding 区域不会被绘制;放在 background 之后,背景就会填满 padding 区域。
请像阅读图层一样,从上到下阅读修饰符。
Modifier
.background(Color.Cyan)
.padding(16.dp)项目之间的间距
在 Column 或 Row 内部,可以使用 Arrangement.spacedBy 自动在子项之间添加相等的间隔。
这比手动为每个子项添加 padding 更简洁。
Column(
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
Text("One")
Text("Two")
}使用 Spacer 添加间隔
Spacer 是一种用于推开项目的空白可组合项。请使用 Modifier 为它设置大小。
它很适合在两个元素之间创建固定间隔。
Column {
Text("Top")
Spacer(Modifier.height(16.dp))
Text("Bottom")
}Padding 与 Margin
Compose 没有单独的 margin。您可以将 padding 放在修饰符链的前面、size 或 background 之前,从而创建外部空白。
因此,根据排列顺序,同一个工具 padding 既可以处理内部间距,也可以处理外部间距。
Modifier
.padding(16.dp)
.background(Color.LightGray)
.padding(8.dp)保持间距一致
优秀的应用通常会重复使用少数几种数值,例如 4、8、16 和 24 dp。这样可以让布局整洁且易于预测。
请避免使用随意的数字,而应从一组较小的间距刻度中选择。
Modifier.padding(16.dp)快速检查
检验您对 padding 的理解。
回顾
您已经学会了使用带 dp 值的 Modifier.padding 在内容周围添加空白。您可以为四边、水平和垂直方向,或单个边缘添加 padding。
Modifier 的顺序很重要,Arrangement.spacedBy 或 Spacer 可以处理项目之间的间隔。
接下来,您将探索颜色和 MaterialTheme。
常见问题解答
「使用内边距调整间距」课时是免费的吗?
是的 — 「使用内边距调整间距」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Android Academy 课程的其余内容,请升级到 CoddyKit PRO。 Android Academy 课程共包含 4 节课。
「使用内边距调整间距」这节课中我会学到什么?
使用 Modifier 设置间距。 你通过在浏览器中直接运行的动手代码来练习 Android Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Android Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。
「使用内边距调整间距」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 Android Academy 课中编写并运行代码吗?
能。每节 Android Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 设置文本样式
- 按钮与点击
- 使用内边距调整间距
- 颜色与 MaterialTheme