如何在SwiftUI中自定义带标题的NavigationSplitView

要实现完全自定义的侧边栏（包括用ScrollView替代List并匹配参考样式），可以通过以下步骤实现：

核心思路 #

默认的List带有内置的分隔线、内边距和行样式，难以完全自定义。改用ScrollView可以让你从头构建布局，完全控制每个元素的样式、间距和排列。

实现代码 #

首先创建一个自定义的侧边栏项视图，用来匹配参考图中的样式：

import SwiftUI

struct SidebarItem: View {
    let title: String
    let icon: String
    
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: icon)
                .foregroundColor(.blue) // 可根据参考图调整颜色
            Text(title)
                .font(.headline)
        }
        .padding(.vertical, 12)
        .padding(.horizontal)
        .hoverEffect(.highlight) // 添加hover交互效果
        .background(Color.white)
    }
}

然后修改ContentView，使用ScrollView构建侧边栏，并添加自定义标题：

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            VStack(alignment: .leading, spacing: 0) {
                // 自定义侧边栏标题
                Text("Caixa de Entrada")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding(.vertical, 16)
                    .padding(.horizontal)
                
                // 可滚动的自定义内容区域
                ScrollView {
                    VStack(alignment: .leading, spacing: 0) {
                        SidebarItem(title: "Item 1", icon: "envelope")
                        SidebarItem(title: "Item 2", icon: "tray")
                        // 按需添加更多项
                    }
                }
                .background(Color(UIColor.systemGray6)) // 滚动区域背景色
            }
            .background(Color.white)
            .navigationBarHidden(true) // 隐藏默认导航栏，使用自定义标题
        } detail: {
            Text("Detail view")
                .navigationTitle("Titulo do detail view")
        }
    }
}

关键调整说明 #

1. 替代List为ScrollView：完全摆脱List的默认样式限制，自由控制布局。
2. 自定义侧边栏项：通过SidebarItem视图统一设置图标、文字样式、内边距和交互效果。
3. 自定义标题：直接添加文本并设置字体和padding，替代默认的navigationTitle以获得更灵活的样式控制。
4. 背景色调整：分别设置侧边栏整体和滚动区域的背景色，匹配参考图的视觉层次。

进一步自定义 #

• 根据参考图调整图标、文字颜色、字体大小等样式。
• 添加选中状态：绑定一个选中项变量，给选中的SidebarItem添加高亮背景。
• 调整间距：修改VStack和HStack的spacing参数，匹配参考图的布局密度。

内容的提问来源于stack exchange，提问作者Lucas Buchalla Sesti