SuperAPI AI 工具集

swiftui-layout-components

前端与建站

查看项目

更新于 10-15 23:34

技能介绍

该技能整理了 SwiftUI 应用的布局与组件写法,目标平台为 iOS 26+ 与 Swift 6.3,除特别说明外模式向后兼容 iOS 17。内容按用途分为:布局基础、网格布局、列表模式、ScrollView、表单与控件、搜索、浮层与展示、常见错误、评审清单和参考文档。

用途与主要能力:小规模固定内容用 VStack、HStack、ZStack;大或动态集合在 ScrollView 内用 LazyVStack、LazyHStack 按需创建子视图。网格用 LazyVGrid,列可配 .adaptive 或 .flexible,配合 .aspectRatio 控制单元格尺寸。列表用 List 与 Section,支持 .listStyle(.plain)(信息流)与 .insetGrouped(设置),可结合 ScrollViewReader、.refreshable、.listRowInsets、.listRowSeparator(.hidden)、.contentShape(Rectangle());iOS 26 可加 .scrollEdgeEffectStyle(.soft, for: .top)。表单用 Form 分 Section,控件包括 Toggle、Picker、Slider、DatePicker、TextField,绑定 @State、@Binding 或 @AppStorage,用 @FocusState 管理焦点。搜索用 .searchable,配合 .searchScopes 与 .task(id:) 做防抖异步查询。临时 UI 用 .overlay(alignment:) 加过渡与自动消失计时器;沉浸式展示用 .fullScreenCover(item:)。

限制与注意事项:不要在懒加载容器内放 GeometryReader,可用 .onGeometryChange(iOS 18+);ForEach 的 ID 须用稳定 Identifiable,勿用数组下标;不要嵌套同轴向滚动视图、混用 List 与 ScrollView;可点击行需加 .contentShape(Rectangle());大选项集不要用 .pickerStyle(.segmented);空查询需提前返回;Sheet 尺寸不要写死,改用 .presentationSizing;iOS 26 的 .backgroundExtensionEffect() 每屏最多用一次。具体代码示例见原文,参考文档包括 references/grids.md、list.md、scrollview.md、form.md。其他事实暂未提供。