间隔布局
同一个容器里，相邻项目之间由容器统一留出的空隙。
- 两个东西中间的空
- 列表项之间的距离
- 一排按钮彼此隔开的空隙
- 间隔
- 栅格间距
- 项目间距
示例
gap: 16px;
Web / iOS / Android 对照
Web原生支持
平台通用范围
gap
也叫 gutter
CSS: gap
只在多列、弹性盒和网格容器上生效，普通块级布局没有这个属性。
iOS原生支持
平台通用范围
spacing
SwiftUI: HStack/VStack 的 spacing:
不是独立属性，而是排布容器的初始化参数。
Android原生支持
平台通用范围
spacedBy
也叫 Arrangement.spacedBy
Compose: Arrangement.spacedBy(space)
官方描述是「使相邻两项在主轴上相隔一段固定距离」。它由 Row / Column 的 arrangement 参数发放，不是挂在子项上的属性。
使用规范
什么时候用
- 一组同级项目需要等距分开时
- 希望间距由容器统一控制、不逐个设置时
什么时候别用
- 只想推开其中某一个元素时——那是外边距
- 要在容器与内容之间留空时——那是内边距
容易混淆
跨端框架实现
- Flutter
Flex.spacingRow(spacing: …) / Column(spacing: …)Row 与 Column 都继承 Flex 的 spacing 属性。
给 AI 的提示词
这条词条还没有经过验证的实现提示词。