WenHaoFreeAPP布局术语大全：30个核心概念详细说明
APP布局术语大全：30个核心概念详细说明
本文系统梳理了移动应用（APP）开发中常见的布局术语，并结合实际效果进行详细解释，适用于 iOS（Swift/SwiftUI/UIKit）、Android 及跨平台开发者参考。
1. Frame
定义：
Frame 指视图（View）的绝对坐标和尺寸，包含 x、y（位置）和 width、height（宽高）。
效果：
元素固定在屏幕某一位置和大小，适合静态、简单布局。
类比：像把画钉在墙上，位置和大小都固定。
2. Auto Layout
定义：
iOS 自动布局系统，通过设置约束（Constraint），让 UI 元素自适应屏幕和内容变化。
效果：
支持多设备、多分辨率，界面随屏幕变化自动调整。
类比：可伸缩家具，空间变大变小都能适应。
3. Constraint（约束）
定义：
布局规则，限定元素间的位置、对齐、间距、比例等。
效果：
灵活组合，如“左对齐”、“宽度等于父视图一半”，实现复杂自适应界面。
类比：家具之间的距离、对齐方式。
4. Stack（VStack/HStack/ZStack）
定义：
SwiftUI/Flutter/Jetpack Compose 等现代框架的垂直（VStack）、水平（HStack）、层叠（ZStack）布局容器。
效果：
一行行、一列列、或重叠堆放视图，简化常见排列。
类比：一排排书、一摞摞盘子。
5. Grid（网格）
定义：
多行多列的表格式布局。
效果：
常用于图片墙、商品展示等需要规整排列的场景。
类比：瓷砖铺地，整齐划一。
6. List（列表）
定义：
纵向排列的内容块，每项为一个单元。
效果：
适合消息、菜单、新闻等信息流展示。
类比：书架上一排排书。
7. Section（分区）
定义：
列表或页面中的分组区块。
效果：
便于分类、分隔内容，提升可读性。
类比：书架上的隔板。
8. Spacer
定义：
弹性占位控件。
效果：
自动撑开或分隔元素，让布局更美观整齐。
类比：家具之间的空隙或走道。
9. Safe Area
定义：
屏幕中不会被刘海、底部条等遮挡的“安全区域”。
效果：
保证内容完整显示，适配全面屏、异形屏。
类比：房间里不被门窗挡住的空间。
10. ScrollView
定义：
可滚动的内容区域。
效果：
内容超出屏幕时可上下或左右滑动查看。
类比：带滑轨的书架。
11. Alignment（对齐）
定义：
控制元素的左、中、右或上下对齐方式。
效果：
提升界面整齐度和视觉美感。
类比：把桌椅摆成一条线。
12. Padding / Margin
定义：
Padding（内边距）：元素内容与边界的距离。
Margin（外边距）：元素与其他元素之间的距离。
效果：
调整元素间距，提升界面层次和可读性。
类比：家具与墙壁、家具之间留的空隙。
13. Aspect Ratio（宽高比）
定义：
元素宽度与高度的比例。
效果：
保持图片或视图不变形。
类比：电视、画框的长宽比例。
14. Container / ViewGroup
定义：
通用的容器视图，用于包裹和组织子元素。
效果：
统一管理、整体布局。
类比：房间、收纳盒。
15. TabBar
定义：
底部的标签栏，用于主页面切换。
效果：
一键切换不同功能区，如“首页-消息-我的”。
类比：抽屉柜的标签。
16. Navigation Bar
定义：
顶部导航栏，显示标题、返回、操作按钮。
效果：
管理页面层级，提供导航和操作入口。
类比：房间门牌和门把手。
17. Toolbar
定义：
顶部或底部的操作按钮集合。
效果：
常用于编辑、分享等功能。
类比：工具箱。
18. Segmented Control
定义：
横向分段按钮，切换不同内容区块。
效果：
常见于筛选、分类。
类比：一排开关。
19. Drawer / Side Bar
定义：
侧边滑出的导航菜单或功能区。
效果：
适合功能较多、需要分组的 App。
类比：侧柜、暗门。
20. PageView / Page Controller
定义：
滑动切换页面的控件。
效果：
常用于引导页、内容轮播。
类比：翻书。
21. Floating Action Button（悬浮按钮）
定义：
浮在界面上的主操作按钮。
效果：
快速触发核心操作。
类比：紧急按钮。
22. Alignment Guide
定义：
自定义对齐参考线。
效果：
精细控制元素对齐。
类比：拉一根绳子对齐家具。
23. Z-Index / ZStack
定义：
元素前后堆叠顺序。
效果：
决定哪个元素在上面、哪个在下面。
类比：堆叠的书本。
24. GridView / CollectionView
定义：
网格/集合视图，灵活展示多样内容。
效果：
适合多类型、可重用的内容展示。
类比：展览架。
25. Divider / Separator
定义：
分割线。
效果：
视觉分隔不同内容区块。
类比：隔断墙。
26. Card（卡片）
定义：
带圆角阴影的内容块。
效果：
突出展示信息，提升界面层次感。
类比：明信片、名片。
27. Modal / Sheet
定义：
弹出层或底部滑出的面板。
效果：
临时展示重要内容或操作。
类比：弹窗、抽屉。
28. Overlay
定义：
覆盖在主界面上的内容层。
效果：
用于提示、引导、遮罩等。
类比：透明膜。
29. Badge
定义：
小圆点或数字，显示通知数量。
效果：
提示有新消息或待办事项。
类比：未读信号灯。
30. Banner
定义：
顶部或底部的横幅通知。
效果：
用于展示重要信息或广告。
类比：横幅标语。
结语
APP布局术语丰富多样，每一项都是实现高效、美观、易用界面的基础。了解并善用这些术语和概念，能让你的界面开发如同高效收纳师，空间利用合理，功能分区清晰，用户体验极佳。
如需某项术语的详细代码示例或平台适配方案，欢迎继续交流！