Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
372 lines (358 loc) · 32.3 KB
/
Copy pathindex.html
File metadata and controls
372 lines (358 loc) · 32.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>布局 API - PythonIDE Docs</title>
<meta name="description" content="Stack、ScrollView、List/Form、Grid 和 GeometryReader。">
<link rel="icon" href="../../assets/brand-mark.svg" type="image/svg+xml">
<link rel="stylesheet" href="../../assets/docs-v2.css">
<script>window.PYTHONIDE_DOCS_PREFIX = "../../";</script>
<script defer src="../../assets/docs-v2.js"></script>
</head>
<body class="article-page">
<header class="topbar">
<button class="icon-button menu-toggle" type="button" aria-label="打开目录">☰</button>
<a class="brand" href="../../"><img class="brand-mark" src="../../assets/brand-mark.svg" alt="" width="30" height="30"><span class="brand-text">PythonIDE Docs</span></a>
<nav class="top-nav" aria-label="主导航">
<a class="" href="../../">文档</a>
<a class="" href="../../pages/agent-development-index/">Agent</a>
<a class="active" href="../../pages/widget-api-reference/">API 参考</a>
<a class="" href="../../pages/appui-cookbook-index/">示例</a>
</nav>
<details class="language-menu">
<summary>中文</summary>
<div class="language-panel">
<span class="active">简体中文</span>
<button type="button" disabled>English <em>准备中</em></button>
</div>
</details>
<button class="theme-toggle" type="button" aria-label="切换主题">◐</button>
</header>
<div class="shell">
<aside class="sidebar">
<nav class="sidebar-nav" aria-label="Docs navigation">
<button class="sidebar-search search-trigger" type="button"><span>搜索...</span><kbd>⌘K</kbd></button>
<details class="nav-collection" open>
<summary><a href="../../collections/appui/">appui</a></summary>
<div class="nav-group">
<div class="nav-group-title">开始</div>
<a class="nav-link" href="../../pages/appui-module/">appui 概览</a>
<a class="nav-link" href="../../pages/appui-quickstart/">快速上手</a>
<a class="nav-link" href="../../pages/miniapp-choose-runtime/">运行时选择</a>
<a class="nav-link" href="../../pages/miniapp-appui-ui-patterns/">AppUI UI 模式</a>
<a class="nav-link" href="../../pages/miniapp-appui-api-index/">AppUI API 地图</a>
<a class="nav-link" href="../../pages/miniapp-dev-troubleshooting/">MiniApp 开发排错</a>
</div>
<div class="nav-group">
<div class="nav-group-title">指南</div>
<a class="nav-link" href="../../pages/appui-guide-thinking/">appui 思维方式</a>
<a class="nav-link" href="../../pages/appui-guide-state/">状态管理</a>
<a class="nav-link" href="../../pages/appui-guide-layout/">布局系统</a>
<a class="nav-link" href="../../pages/appui-guide-lists/">列表与表单</a>
<a class="nav-link" href="../../pages/appui-guide-navigation/">导航与页面结构</a>
<a class="nav-link" href="../../pages/appui-guide-interaction/">交互与回调</a>
<a class="nav-link" href="../../pages/appui-guide-media/">媒体与系统集成</a>
<a class="nav-link" href="../../pages/appui-guide-charts/">图表与绘图</a>
<a class="nav-link" href="../../pages/appui-guide-darkmode/">深色模式与语义色</a>
<a class="nav-link" href="../../pages/appui-guide-animation/">动画</a>
<a class="nav-link" href="../../pages/appui-guide-hotreload/">热重载</a>
<a class="nav-link" href="../../pages/appui-guide-realtime/">实时快路径</a>
<a class="nav-link" href="../../pages/appui-guide-performance/">性能与实时界面</a>
</div>
<div class="nav-group">
<div class="nav-group-title">API 参考</div>
<a class="nav-link" href="../../pages/appui-ref-functions/">入口函数</a>
<a class="nav-link" href="../../pages/appui-ref-state/">状态 API</a>
<a class="nav-link active" href="../../pages/appui-ref-layout/">布局 API</a>
<a class="nav-link" href="../../pages/appui-ref-layout-stacks/">堆叠布局 API</a>
<a class="nav-link" href="../../pages/appui-ref-layout-scroll/">滚动 API</a>
<a class="nav-link" href="../../pages/appui-ref-layout-grids/">网格 API</a>
<a class="nav-link" href="../../pages/appui-ref-layout-geometry/">几何与特殊布局 API</a>
<a class="nav-link" href="../../pages/appui-ref-controls/">控件 API</a>
<a class="nav-link" href="../../pages/appui-ref-navigation/">导航 API</a>
<a class="nav-link" href="../../pages/appui-ref-data/">数据展示 API</a>
<a class="nav-link" href="../../pages/appui-ref-presentation/">呈现 API</a>
<a class="nav-link" href="../../pages/appui-ref-modifiers/">修饰符 API</a>
<a class="nav-link" href="../../pages/appui-ref-environment/">环境值 API</a>
<a class="nav-link" href="../../pages/appui-ref-media/">媒体 API</a>
<a class="nav-link" href="../../pages/appui-ref-charts/">图表与画布 API</a>
<a class="nav-link" href="../../pages/appui-ref-shapes/">形状 API</a>
</div>
<div class="nav-group">
<div class="nav-group-title">示例</div>
<a class="nav-link" href="../../pages/appui-cookbook-index/">示例索引</a>
<a class="nav-link" href="../../pages/appui-cookbook-todo/">示例:待办列表</a>
<a class="nav-link" href="../../pages/appui-cookbook-settings/">示例:设置表单</a>
<a class="nav-link" href="../../pages/appui-cookbook-dashboard/">示例:紧凑仪表盘</a>
<a class="nav-link" href="../../pages/appui-cookbook-native-list-detail/">示例:原生列表详情</a>
<a class="nav-link" href="../../pages/appui-cookbook-network-list/">示例:网络列表</a>
<a class="nav-link" href="../../pages/appui-cookbook-table-data-review/">示例:表格数据审核</a>
<a class="nav-link" href="../../pages/appui-cookbook-chat/">示例:聊天界面</a>
<a class="nav-link" href="../../pages/appui-cookbook-media-capture-gallery/">示例:媒体采集相册</a>
<a class="nav-link" href="../../pages/appui-cookbook-gallery/">示例:相册浏览器</a>
<a class="nav-link" href="../../pages/appui-cookbook-form-settings-controls/">示例:原生表单设置</a>
<a class="nav-link" href="../../pages/appui-cookbook-chart-canvas-lab/">示例:图表与画布实验室</a>
<a class="nav-link" href="../../pages/appui-cookbook-location-map/">示例:定位地图</a>
<a class="nav-link" href="../../pages/appui-cookbook-motion-haptics-dashboard/">示例:运动传感器仪表盘</a>
<a class="nav-link" href="../../pages/appui-cookbook-notification-reminder/">示例:通知提醒</a>
<a class="nav-link" href="../../pages/appui-cookbook-health-blood-pressure/">示例:血压分析</a>
<a class="nav-link" href="../../pages/appui-cookbook-secure-vault/">示例:安全凭据库</a>
<a class="nav-link" href="../../pages/appui-cookbook-live-activity-background/">示例:实时活动与后台任务</a>
<a class="nav-link" href="../../pages/appui-cookbook-shortcuts-launcher/">示例:快捷指令启动器</a>
<a class="nav-link" href="../../pages/appui-cookbook-video-player/">示例:视频播放器</a>
<a class="nav-link" href="../../pages/appui-cookbook-webview-share-export/">示例:WebView 与系统分享</a>
</div>
<div class="nav-group">
<div class="nav-group-title">速查</div>
<a class="nav-link" href="../../pages/appui-appendix-colors/">颜色参考</a>
<a class="nav-link" href="../../pages/appui-appendix-symbols/">SF Symbols</a>
<a class="nav-link" href="../../pages/appui-appendix-migration/">从 ui 迁移到 appui</a>
</div>
</details>
<details class="nav-collection">
<summary><a href="../../collections/widget/">widget</a></summary>
<div class="nav-group">
<div class="nav-group-title">小组件</div>
<a class="nav-link" href="../../pages/widget-module/">widget</a>
<a class="nav-link" href="../../pages/widget-quickstart-publish/">widget 从脚本到桌面</a>
<a class="nav-link" href="../../pages/widget-layout/">widget 布局与尺寸</a>
<a class="nav-link" href="../../pages/widget-parameters/">widget 参数面板</a>
<a class="nav-link" href="../../pages/widget-interaction/">widget 状态和交互</a>
<a class="nav-link" href="../../pages/widget-timeline/">widget 时间线和动画</a>
<a class="nav-link" href="../../pages/widget-appearance-assets/">widget 资源与外观</a>
<a class="nav-link" href="../../pages/widget-troubleshooting/">widget 排错</a>
<a class="nav-link" href="../../pages/widget-api-index/">widget API 地图</a>
<a class="nav-link" href="../../pages/widget-api-reference/">widget API 参考</a>
</div>
</details>
<details class="nav-collection">
<summary><a href="../../collections/ui/">ui</a></summary>
<div class="nav-group">
<div class="nav-group-title">快速上手</div>
<a class="nav-link" href="../../pages/ui-module/">ui 概览</a>
</div>
<div class="nav-group">
<div class="nav-group-title">API 参考</div>
<a class="nav-link" href="../../pages/ui-api-index/">ui API 索引</a>
<a class="nav-link" href="../../pages/ui-api-reference/">ui API 参考</a>
</div>
<div class="nav-group">
<div class="nav-group-title">实时能力</div>
<a class="nav-link" href="../../pages/aurora-system/">系统实时能力</a>
<a class="nav-link" href="../../pages/aurora-toolkit/">实时更新工具</a>
</div>
</details>
<details class="nav-collection">
<summary><a href="../../collections/scene/">scene</a></summary>
<div class="nav-group">
<div class="nav-group-title">快速上手</div>
<a class="nav-link" href="../../pages/scene-module/">scene</a>
<a class="nav-link" href="../../pages/turtle-module/">turtle</a>
</div>
<div class="nav-group">
<div class="nav-group-title">API 参考</div>
<a class="nav-link" href="../../pages/scene-api-index/">scene API 索引</a>
<a class="nav-link" href="../../pages/scene-api-reference/">scene API 参考</a>
</div>
</details>
<details class="nav-collection">
<summary><a href="../../collections/ios-native/">iOS 原生模块</a></summary>
<div class="nav-group">
<div class="nav-group-title">快速上手</div>
<a class="nav-link" href="../../pages/ios-native/">iOS 原生能力</a>
</div>
<div class="nav-group">
<div class="nav-group-title">基础与权限</div>
<a class="nav-link" href="../../pages/permission-module/">permission</a>
<a class="nav-link" href="../../pages/storage-module/">storage</a>
<a class="nav-link" href="../../pages/database-module/">database</a>
<a class="nav-link" href="../../pages/archive-module/">archive</a>
<a class="nav-link" href="../../pages/keychain-module/">keychain</a>
<a class="nav-link" href="../../pages/clipboard-module/">clipboard</a>
<a class="nav-link" href="../../pages/console-module/">console</a>
<a class="nav-link" href="../../pages/dialogs-module/">dialogs</a>
</div>
<div class="nav-group">
<div class="nav-group-title">设备与传感器</div>
<a class="nav-link" href="../../pages/device-module/">device</a>
<a class="nav-link" href="../../pages/location-module/">location</a>
<a class="nav-link" href="../../pages/motion-module/">motion</a>
<a class="nav-link" href="../../pages/haptics-module/">haptics</a>
<a class="nav-link" href="../../pages/biometric-module/">biometric</a>
<a class="nav-link" href="../../pages/health-module/">health</a>
</div>
<div class="nav-group">
<div class="nav-group-title">界面与系统</div>
<a class="nav-link" href="../../pages/file-picker-module/">file_picker</a>
<a class="nav-link" href="../../pages/share-module/">share</a>
<a class="nav-link" href="../../pages/font-picker-module/">font_picker</a>
<a class="nav-link" href="../../pages/notification-module/">notification</a>
<a class="nav-link" href="../../pages/live-activity-module/">live_activity</a>
<a class="nav-link" href="../../pages/contacts-module/">contacts</a>
<a class="nav-link" href="../../pages/calendar-events-module/">calendar_events</a>
</div>
<div class="nav-group">
<div class="nav-group-title">媒体</div>
<div class="nav-subgroup-title">采集</div>
<a class="nav-link" href="../../pages/photos-module/">photos</a>
<a class="nav-link" href="../../pages/camera-module/">camera</a>
<a class="nav-link" href="../../pages/video-recorder-module/">video_recorder</a>
<a class="nav-link" href="../../pages/audio-recorder-module/">audio_recorder</a>
<div class="nav-subgroup-title">播放</div>
<a class="nav-link" href="../../pages/sound-module/">sound</a>
<a class="nav-link" href="../../pages/avplayer-module/">avplayer</a>
<a class="nav-link" href="../../pages/music-player-module/">music_player</a>
<a class="nav-link" href="../../pages/music-module/">music</a>
<a class="nav-link" href="../../pages/now-playing-module/">now_playing</a>
<a class="nav-link" href="../../pages/audio-session-module/">audio_session</a>
<div class="nav-subgroup-title">语音</div>
<a class="nav-link" href="../../pages/speech-module/">speech</a>
<a class="nav-link" href="../../pages/speech-recognition-module/">speech_recognition</a>
<a class="nav-link" href="../../pages/shazam-module/">shazam</a>
<div class="nav-subgroup-title">合成</div>
<a class="nav-link" href="../../pages/media-composer-module/">media_composer</a>
</div>
<div class="nav-group">
<div class="nav-group-title">视觉与文档</div>
<a class="nav-link" href="../../pages/native-image-module/">native_image</a>
<a class="nav-link" href="../../pages/vision-module/">vision</a>
<a class="nav-link" href="../../pages/vision-helper-module/">vision_helper</a>
<a class="nav-link" href="../../pages/coreml-module/">coreml</a>
<a class="nav-link" href="../../pages/qrcode-module/">qrcode</a>
<a class="nav-link" href="../../pages/pdf-module/">pdf</a>
</div>
<div class="nav-group">
<div class="nav-group-title">连接与后台</div>
<div class="nav-subgroup-title">联网</div>
<a class="nav-link" href="../../pages/network-module/">network</a>
<a class="nav-link" href="../../pages/websocket-module/">websocket</a>
<a class="nav-link" href="../../pages/weather-module/">weather</a>
<div class="nav-subgroup-title">近场</div>
<a class="nav-link" href="../../pages/bluetooth-module/">bluetooth</a>
<a class="nav-link" href="../../pages/ble-peripheral-module/">ble_peripheral</a>
<div class="nav-subgroup-title">后台</div>
<a class="nav-link" href="../../pages/background-module/">background</a>
<a class="nav-link" href="../../pages/background-download-module/">background_download</a>
<div class="nav-subgroup-title">本地服务</div>
<a class="nav-link" href="../../pages/http-server-module/">http_server</a>
<a class="nav-link" href="../../pages/ssh-module/">ssh</a>
</div>
<div class="nav-group">
<div class="nav-group-title">通信与智能</div>
<a class="nav-link" href="../../pages/mail-module/">mail</a>
<a class="nav-link" href="../../pages/message-module/">message</a>
<a class="nav-link" href="../../pages/translation-module/">translation</a>
<a class="nav-link" href="../../pages/nfc-module/">nfc</a>
<a class="nav-link" href="../../pages/alarm-module/">alarm</a>
<a class="nav-link" href="../../pages/storekit-module/">storekit</a>
<a class="nav-link" href="../../pages/foundation-models-module/">foundation_models</a>
<a class="nav-link" href="../../pages/assistant-module/">assistant</a>
</div>
</details>
<details class="nav-collection">
<summary><a href="../../collections/automation-extension/">自动化与扩展</a></summary>
<div class="nav-group">
<div class="nav-group-title">快速上手</div>
<a class="nav-link" href="../../pages/shortcuts-guide/">快捷指令</a>
<a class="nav-link" href="../../pages/js-api/">JS API 说明</a>
</div>
<div class="nav-group">
<div class="nav-group-title">模块</div>
<a class="nav-link" href="../../pages/shortcuts-module/">shortcuts</a>
<a class="nav-link" href="../../pages/keyboard-module/">keyboard</a>
<a class="nav-link" href="../../pages/objc-util-module/">objc_util</a>
<a class="nav-link" href="../../pages/c-extensions-module/">c_extensions</a>
</div>
<div class="nav-group">
<div class="nav-group-title">参考</div>
<a class="nav-link" href="../../pages/modules-index/">全部模块总览</a>
<a class="nav-link" href="../../pages/miniapp-native-capabilities/">原生能力入口</a>
</div>
</details>
<details class="nav-collection">
<summary><a href="../../collections/agent-development/">Agent 开发</a></summary>
<div class="nav-group">
<div class="nav-group-title">开始</div>
<a class="nav-link" href="../../pages/agent-development-index/">Agent Skills 安装与说明</a>
</div>
</details>
</nav>
</aside>
<main class="content">
<article class="article" style="--page-accent:#2563eb">
<header class="article-intro">
<div class="breadcrumb">appui / API 参考</div>
<h1>布局 API</h1>
<p>Stack、ScrollView、List/Form、Grid 和 GeometryReader。</p>
</header>
<div class="markdown-body">
<p>本页查 Stack、ScrollView、List/Form、Grid、GeometryReader 和数据展示容器的签名。怎么选择布局结构见 <a href="../../pages/appui-guide-layout/">布局系统</a>。</p>
<h2 id="分篇速查"><a class="heading-anchor" href="#分篇速查">#</a>分篇速查</h2>
<div class="table-scroll"><table><thead><tr><th>分篇</th><th>适合查询</th></tr></thead><tbody><tr><td><a href="../../pages/appui-ref-layout-stacks/">堆叠布局 API</a></td><td><code>VStack</code>、<code>HStack</code>、<code>ZStack</code>、<code>LazyVStack</code>、<code>LazyHStack</code>、<code>Spacer</code>、<code>Divider</code>。</td></tr><tr><td><a href="../../pages/appui-ref-layout-scroll/">滚动 API</a></td><td><code>ScrollView</code>、<code>ScrollViewReader</code>、滚动方向、初始定位和锚点。</td></tr><tr><td><a href="../../pages/appui-ref-layout-grids/">网格 API</a></td><td><code>LazyVGrid</code>、<code>LazyHGrid</code>、<code>Grid</code>、<code>GridRow</code>、<code>flexible</code>、<code>fixed</code>、<code>adaptive</code>、<code>grid_item</code>。</td></tr><tr><td><a href="../../pages/appui-ref-layout-geometry/">几何与特殊布局 API</a></td><td><code>GeometryReader</code>、<code>ViewThatFits</code>、<code>Group</code>、<code>Overlay</code>、<code>SafeAreaInset</code>。</td></tr><tr><td><a href="../../pages/appui-ref-environment/">环境值 API</a></td><td><code>environment_value</code>、<code>preferred_color_scheme</code>、<code>locale</code>、<code>layout_direction</code>、动态字体和文本环境。</td></tr></tbody></table></div>
<h2 id="什么时候用"><a class="heading-anchor" href="#什么时候用">#</a>什么时候用</h2>
<div class="table-scroll"><table><thead><tr><th>目标</th><th>API</th></tr></thead><tbody><tr><td>纵向/横向组合</td><td><code>VStack</code>、<code>HStack</code></td></tr><tr><td>层叠覆盖</td><td><code>ZStack</code>、<code>Overlay</code></td></tr><tr><td>自定义滚动内容</td><td><code>ScrollView</code>、<code>LazyVStack</code></td></tr><tr><td>程序化滚动</td><td><code>ScrollViewReader</code></td></tr><tr><td>卡片网格</td><td><code>LazyVGrid</code>、<code>LazyHGrid</code>、<code>Grid</code></td></tr><tr><td>原生动态列表</td><td><code>List</code>、<code>ForEach</code></td></tr><tr><td>设置和编辑页</td><td><code>Form</code>、<code>Section</code></td></tr><tr><td>空状态和进度</td><td><code>ContentUnavailableView</code>、<code>ProgressView</code></td></tr><tr><td>大屏表格</td><td><code>Table</code></td></tr></tbody></table></div>
<h2 id="容器组合示例"><a class="heading-anchor" href="#容器组合示例">#</a>容器组合示例</h2>
<p>同一页面可以同时使用 <code>Form</code>、<code>List</code>、<code>LazyVGrid</code>,但要让每个容器负责自己擅长的结构。</p>
<figure class="code-block" data-code-id="faa01341287c">
<figcaption>
<span>python</span>
<div class="code-copy-actions"><button class="copy-code" type="button" data-copy-code="faa01341287c" aria-label="复制"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/><rect x="4" y="4" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/></svg></button><span class="copy-code-toast" role="status" aria-live="polite" hidden>已复制</span></div>
</figcaption>
<pre><code id="code-faa01341287c" class="language-python">import appui
cards = [
{"id": "a", "title": "Alpha"},
{"id": "b", "title": "Beta"},
{"id": "c", "title": "Gamma"},
]
def card_key(item):
return item["id"]
def card_view(item):
return (
appui.Text(item["title"])
.frame(max_width=appui.infinity, min_height=72)
.background("secondarySystemBackground", corner_radius=8)
)
def body():
grid = appui.LazyVGrid(
columns=[appui.adaptive(minimum=120)],
spacing=12,
content=[appui.ForEach(cards, row_builder=card_view, key=card_key)],
)
return appui.NavigationStack(
appui.Form([
appui.Section("Form", [
appui.LabeledContent("Container", value="Form"),
]),
appui.Section("Grid", [
grid,
]),
]).navigation_title("Layout")
)
appui.run(body)</code></pre>
</figure>
<h2 id="布局签名"><a class="heading-anchor" href="#布局签名">#</a>布局签名</h2>
<div class="table-scroll"><table><thead><tr><th>API</th><th>签名</th><th>分类</th></tr></thead><tbody><tr><td><code>VStack</code></td><td><code>VStack(content: Optional[Sequence[View]] = None, alignment: str = 'center', spacing: Optional[float] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>HStack</code></td><td><code>HStack(content: Optional[Sequence[View]] = None, alignment: str = 'center', spacing: Optional[float] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>ZStack</code></td><td><code>ZStack(content: Optional[Sequence[View]] = None, alignment: str = 'center')</code></td><td><code>layout</code></td></tr><tr><td><code>LazyVStack</code></td><td><code>LazyVStack(content: Optional[Sequence[View]] = None, alignment: str = 'center', spacing: Optional[float] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>LazyHStack</code></td><td><code>LazyHStack(content: Optional[Sequence[View]] = None, alignment: str = 'center', spacing: Optional[float] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>ScrollView</code></td><td><code>ScrollView(content: Optional[ViewChild] = None, axes: str = 'vertical', shows_indicators: bool = True, showsIndicators: Optional[bool] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>ScrollViewReader</code></td><td><code>ScrollViewReader(content: Optional[ViewChild] = None, axes: str = 'vertical', shows_indicators: bool = True, scroll_to: Optional[str] = None, anchor: str = 'top', showsIndicators: Optional[bool] = None, scrollTo: Optional[str] = None, children: Optional[ViewChild] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>LazyVGrid</code></td><td><code>LazyVGrid(columns: Optional[Sequence[dict]] = None, content: Optional[Sequence[View]] = None, spacing: Optional[float] = None, children: Optional[Sequence[View]] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>LazyHGrid</code></td><td><code>LazyHGrid(rows: Optional[Sequence[dict]] = None, content: Optional[Sequence[View]] = None, spacing: Optional[float] = None, children: Optional[Sequence[View]] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>Grid</code></td><td><code>Grid(content: Optional[Sequence[View]] = None, alignment: str = 'center', horizontal_spacing: Optional[float] = None, vertical_spacing: Optional[float] = None, horizontalSpacing: Optional[float] = None, verticalSpacing: Optional[float] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>GridRow</code></td><td><code>GridRow(content: Optional[Sequence[View]] = None, alignment: Optional[str] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>GeometryReader</code></td><td><code>GeometryReader(content: Optional[ViewChild] = None, on_change: Optional[Callable] = None, onChange: Optional[Callable] = None, children: Optional[ViewChild] = None, on_geometry: Optional[Callable] = None, onGeometry: Optional[Callable] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>ViewThatFits</code></td><td><code>ViewThatFits(content: Optional[Sequence[View]] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>Group</code></td><td><code>Group(content: Optional[Sequence[View]] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>Overlay</code></td><td><code>Overlay(content: Optional[View] = None, overlay: Optional[View] = None, alignment: str = 'center')</code></td><td><code>layout</code></td></tr><tr><td><code>SafeAreaInset</code></td><td><code>SafeAreaInset(edge: str = 'bottom', content: Optional[View] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>Spacer</code></td><td><code>Spacer(min_length: Optional[float] = None, minLength: Optional[float] = None)</code></td><td><code>layout</code></td></tr><tr><td><code>Divider</code></td><td><code>Divider()</code></td><td><code>layout</code></td></tr></tbody></table></div>
<h2 id="数据容器"><a class="heading-anchor" href="#数据容器">#</a>数据容器</h2>
<div class="table-scroll"><table><thead><tr><th>API</th><th>签名</th><th>分类</th></tr></thead><tbody><tr><td><code>List</code></td><td><code>List(content: Optional[Sequence[View]] = None, selection: Optional[Union[str, Sequence[str]]] = None, on_change: Optional[Callable] = None, edit_mode: Optional[Union[str, bool]] = None, onChange: Optional[Callable] = None, editMode: Optional[Union[str, bool]] = None)</code></td><td><code>collection</code></td></tr><tr><td><code>ForEach</code></td><td><code>ForEach(data: Any, row_builder: Optional[Callable] = None, key: Optional[Callable] = None, rowBuilder: Optional[Callable] = None, content: Optional[Callable] = None, edit_actions: Optional[Union[str, Sequence[str]]] = None, on_move: Optional[Callable] = None, editActions: Optional[Union[str, Sequence[str]]] = None, onMove: Optional[Callable] = None)</code></td><td><code>collection</code></td></tr><tr><td><code>Form</code></td><td><code>Form(content: Optional[Sequence[View]] = None)</code></td><td><code>collection</code></td></tr><tr><td><code>Section</code></td><td><code>Section(content: Optional[ViewChild] = None, *, header: Optional[Union[str, View]] = None, footer: Optional[Union[str, View]] = None, children: Optional[ViewChild] = None, key: Optional[str] = None)</code></td><td><code>collection</code></td></tr><tr><td><code>GroupBox</code></td><td><code>GroupBox(label: Optional[str] = None, content: Optional[ViewChild] = None, children: Optional[Sequence[View]] = None)</code></td><td><code>collection</code></td></tr><tr><td><code>DisclosureGroup</code></td><td><code>DisclosureGroup(label: str = '', is_expanded: Optional[bool] = None, content: Optional[ViewChild] = None, isExpanded: Optional[bool] = None, children: Optional[ViewChild] = None, on_change: Optional[Callable[[bool], None]] = None, onChange: Optional[Callable[[bool], None]] = None)</code></td><td><code>collection</code></td></tr><tr><td><code>LabeledContent</code></td><td><code>LabeledContent(label: str = '', value: Optional[str] = None, content: Optional[View] = None)</code></td><td><code>collection</code></td></tr><tr><td><code>Table</code></td><td><code>Table(data: Optional[Sequence[Dict[str, Any]]] = None, columns: Optional[Sequence[Dict[str, str]]] = None, on_select: Optional[Callable] = None, onSelect: Optional[Callable] = None)</code></td><td><code>collection</code></td></tr><tr><td><code>ControlGroup</code></td><td><code>ControlGroup(label: str = '', content: Optional[Sequence[View]] = None, children: Optional[Sequence[View]] = None)</code></td><td><code>control</code></td></tr><tr><td><code>ContentUnavailableView</code></td><td><code>ContentUnavailableView(title: str = '', system_image: Optional[str] = None, description: Optional[str] = None, systemImage: Optional[str] = None)</code></td><td><code>presentation</code></td></tr><tr><td><code>ProgressView</code></td><td><code>ProgressView(label: Optional[str] = None, value: Optional[float] = None, total: float = 1.0)</code></td><td><code>feedback</code></td></tr><tr><td><code>Link</code></td><td><code>Link(title: str = '', url: str = '')</code></td><td><code>control</code></td></tr><tr><td><code>Gauge</code></td><td><code>Gauge(value: float = 0.0, min_value: float = 0.0, max_value: float = 1.0, label: str = '', minValue: Optional[float] = None, maxValue: Optional[float] = None)</code></td><td><code>feedback</code></td></tr><tr><td><code>ShareLink</code></td><td><code>ShareLink(item: str = '', subject: Optional[str] = None, message: Optional[str] = None)</code></td><td><code>control</code></td></tr><tr><td><code>Badge</code></td><td><code>Badge(count: Optional[int] = None, text: Optional[str] = None)</code></td><td><code>presentation</code></td></tr><tr><td><code>TimelineView</code></td><td><code>TimelineView(interval: float = 1.0, content: Optional[View] = None)</code></td><td><code>feedback</code></td></tr></tbody></table></div>
<h2 id="相邻-api-区别"><a class="heading-anchor" href="#相邻-api-区别">#</a>相邻 API 区别</h2>
<div class="table-scroll"><table><thead><tr><th>API</th><th>用法边界</th></tr></thead><tbody><tr><td><code>List</code> vs <code>ScrollView</code></td><td>动态行列表用 <code>List</code>;完全自定义滚动视觉才用 <code>ScrollView</code>。</td></tr><tr><td><code>Form</code> vs <code>VStack</code></td><td>设置和编辑页用 <code>Form</code>;普通局部排列用 <code>VStack</code>。</td></tr><tr><td><code>LazyVGrid</code> vs <code>Grid</code></td><td>卡片网格用 <code>LazyVGrid</code>;需要严格行列对齐用 <code>Grid</code>。</td></tr><tr><td><code>Overlay</code> vs <code>.overlay(...)</code></td><td>简单叠加优先用修饰符;需要显式节点时用 <code>Overlay</code>。</td></tr><tr><td><code>ContentUnavailableView</code> vs 空 <code>Text</code></td><td>空状态用 <code>ContentUnavailableView</code>,不要让列表区域空白。</td></tr></tbody></table></div>
<h2 id="常见错误"><a class="heading-anchor" href="#常见错误">#</a>常见错误</h2>
<div class="table-scroll"><table><thead><tr><th>错误</th><th>后果</th><th>修正</th></tr></thead><tbody><tr><td><code>VStack(children=[...])</code></td><td>构造参数不匹配</td><td><code>VStack([...], spacing=...)</code>。</td></tr><tr><td><code>Section(content=List(...))</code></td><td>嵌套滚动容器</td><td><code>List([Section("Title", rows)])</code>。</td></tr><tr><td>动态列表没有 key</td><td>搜索、删除后行身份不稳</td><td><code>ForEach(data, row_builder=..., key=...)</code>。</td></tr><tr><td>用自绘卡片模拟设置页</td><td>信息密度低,键盘和辅助功能差</td><td><code>Form + Section</code>。</td></tr><tr><td>把重型媒体放进列表行</td><td>滚动后可能空白或状态丢失</td><td>媒体放稳定区域,控制项放 <code>Form/List</code>。</td></tr></tbody></table></div>
<h2 id="相关示例"><a class="heading-anchor" href="#相关示例">#</a>相关示例</h2>
<div class="table-scroll"><table><thead><tr><th>文档</th><th>用途</th></tr></thead><tbody><tr><td><a href="../../pages/appui-guide-layout/">布局系统</a></td><td>Stack、ScrollView、Grid、List/Form 的选择。</td></tr><tr><td><a href="../../pages/appui-cookbook-todo/">示例:待办列表</a></td><td>完整 List、ForEach、搜索和稳定 id。</td></tr><tr><td><a href="../../pages/appui-cookbook-dashboard/">示例:仪表盘</a></td><td>LazyVGrid 和卡片布局。</td></tr></tbody></table></div>
</div>
</article>
</main>
<aside class="toc"><div class="toc-title">本页目录</div><a class="toc-link" href="#分篇速查">分篇速查</a><a class="toc-link" href="#什么时候用">什么时候用</a><a class="toc-link" href="#容器组合示例">容器组合示例</a><a class="toc-link" href="#布局签名">布局签名</a><a class="toc-link" href="#数据容器">数据容器</a><a class="toc-link" href="#相邻-api-区别">相邻 API 区别</a><a class="toc-link" href="#常见错误">常见错误</a><a class="toc-link" href="#相关示例">相关示例</a></aside>
</div>
<div class="mobile-backdrop"></div>
<div class="search-panel" role="dialog" aria-modal="true" aria-label="搜索">
<div class="search-box">
<input id="docs-search-input" type="search" placeholder="搜索 API、模块、指南..." autocomplete="off">
<button class="search-close" type="button">Close</button>
</div>
<div id="docs-search-results" class="search-results"></div>
</div>
</body>
</html>