0Pricing
Android Academy · 课时

使用内边距调整间距

使用 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 反馈 — 无需本地设置。

此课程中的所有课时

  1. 设置文本样式
  2. 按钮与点击
  3. 使用内边距调整间距
  4. 颜色与 MaterialTheme
← 返回 Android Academy