如何调整sidebar样式List列表项的高度?
减小SwiftUI侧边栏列表项高度的可行方案
由于.sidebar样式的List受系统导航布局逻辑管控,controlSize(.mini)无法直接生效,以下是几种符合SwiftUI规范的简洁实现方式:
方法1:自定义行边距与元素内边距(通用方案)
通过缩小列表项的listRowInsets和行内元素的垂直padding,快速实现紧凑效果:
List { Label("项目1", systemImage: "folder") .padding(.vertical, 4) Label("项目2", systemImage: "doc") .padding(.vertical, 4) } .listStyle(.sidebar) .listRowInsets(EdgeInsets(top: 2, leading: 12, bottom: 2, trailing: 12))
方法2:使用系统原生配置(iOS 16+/macOS 13+)
利用UIListConfiguration自定义侧边栏行的布局参数,完全贴合系统原生的紧凑样式:
struct CompactSidebarItem: View { let title: String let iconName: String var body: some View { UIListConfiguration.sidebarCell() .title(title) .image(UIImage(systemName: iconName)) .imageToTitlePadding(8) .listRowInsets(EdgeInsets(top: 0, leading: 12, bottom: 0, trailing: 12)) } } // 调用示例 List { CompactSidebarItem(title: "项目1", iconName: "folder") CompactSidebarItem(title: "项目2", iconName: "doc") } .listStyle(.sidebar)
补充说明
.sidebar样式的设计初衷是统一导航区域的视觉层级,因此默认不响应controlSize调整。上述两种方法均通过调整布局参数实现紧凑效果,既符合SwiftUI的布局规范,也能达到类似Xcode侧边栏的视觉表现。
内容的提问来源于stack exchange,提问作者Poulposaure
相关产品推荐
相关产品推荐

