macOS SwiftUI实现Finder风格侧边栏折叠问题求助

我在SwiftUI开发macOS应用时，尝试用DisclosureGroup实现类似Finder和SF Symbols的侧边栏折叠效果，但目前仅能完成基础折叠功能，视觉外观和交互逻辑都和系统原生效果不符。

当前代码：

import SwiftUI

struct SidebarView: View {
    @State private var companiesExpanded = false
    
    var body: some View {
        VStack{
            DisclosureGroup(isExpanded: $companiesExpanded) {
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Water", systemImage: "drop")
                }
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Sewage", systemImage: "toilet")
                }
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Electricity", systemImage: "bolt")
                }
            } label: {
                Text("Companies")
                    .font(.subheadline)
                    .fontWeight(.semibold)
            }
        }
    }
}

效果对比 #

• Finder预期效果：折叠项有清晰的层级缩进，点击标题或箭头都能切换展开/折叠状态，子项展开时平滑显示，标题文字样式符合系统侧边栏规范
• SF Symbols预期效果：箭头样式与系统完全一致，子项选中状态和父项区分明确，整体视觉统一
• 当前实际效果：DisclosureGroup样式过于基础，无系统侧边栏的层级感和原生视觉质感，交互反馈不符合macOS用户习惯

解决方案代码 #

要实现系统级的侧边栏折叠效果，核心是利用List的.sidebar样式，配合自定义缩进和样式调整：

import SwiftUI

struct SidebarView: View {
    @State private var companiesExpanded = false
    
    var body: some View {
        List {
            DisclosureGroup(isExpanded: $companiesExpanded) {
                // 子项设置缩进，匹配系统侧边栏层级
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Water", systemImage: "drop")
                }
                .listRowInsets(EdgeInsets(top: 4, leading: 32, bottom: 4, trailing: 16))
                
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Sewage", systemImage: "toilet")
                }
                .listRowInsets(EdgeInsets(top: 4, leading: 32, bottom: 4, trailing: 16))
                
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Electricity", systemImage: "bolt")
                }
                .listRowInsets(EdgeInsets(top: 4, leading: 32, bottom: 4, trailing: 16))
            } label: {
                // 匹配系统侧边栏分组标题样式
                Label("Companies", systemImage: "")
                    .font(.subheadline)
                    .fontWeight(.semibold)
                    .foregroundColor(.secondary)
            }
            .listRowInsets(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
        }
        .listStyle(.sidebar) // 启用macOS原生侧边栏样式
        .frame(minWidth: 200)
    }
}

struct CompaniesLibraryView: View {
    var body: some View {
        Text("Companies Library")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

关键调整说明 #

1. 改用List+.sidebar样式：这是实现原生视觉的核心，自动获得系统级的选中高亮、滚动行为和布局规范
2. 自定义listRowInsets：给父分组和子项设置不同的缩进值，模拟Finder的层级结构
3. 分组标题样式优化：使用secondary颜色匹配系统侧边栏分组标题的视觉风格
4. 移除VStack：List自带macOS侧边栏的布局优化，比VStack更适合该场景

进阶优化：自定义折叠箭头 #

如果需要完全匹配SF Symbols的箭头样式，可以隐藏系统默认箭头，自定义交互逻辑：

// 在DisclosureGroup的label中替换为自定义箭头
Label("Companies", systemImage: companiesExpanded ? "chevron.down" : "chevron.right")
    .font(.subheadline)
    .fontWeight(.semibold)
    .foregroundColor(.secondary)
.disclosureGroupStyle(CustomDisclosureGroupStyle())

// 自定义样式隐藏系统默认箭头
struct CustomDisclosureGroupStyle: DisclosureGroupStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.label
            Spacer()
        }
        .contentShape(Rectangle())
        .onTapGesture {
            configuration.isExpanded.toggle()
        }
        .overlay(
            configuration.content
                .frame(maxWidth: .infinity, alignment: .leading)
        )
    }
}

内容的提问来源于stack exchange，提问作者Wesley