You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何调整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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 12:50:14