iPad端NavigationSplitView侧边栏切换按钮色调修改及自定义问题咨询

一、修改默认侧边栏切换按钮的色调 #

默认的sidebarToggle按钮不直接响应NavigationSplitView层级的.tint()修饰符，可通过以下两种方式调整：

方法1：在详情视图层级设置色调 #

将.tint()直接应用到详情视图的根元素上，让按钮继承该色调：

struct ContentView: View {
    var body: some View {
        NavigationSplitView() {
            List{
                Text("Menu1")
            }
        } detail: {
            Text("Detail")
                .tint(.red)
        }
    }
}

方法2：自定义侧边栏切换按钮（完全可控） #

通过ToolbarItem替换默认按钮，自由定义色调、图标等样式：

struct ContentView: View {
    @Environment(\.navigationSplitViewVisibility) private var splitViewVisibility
    
    var body: some View {
        NavigationSplitView() {
            List{
                Text("Menu1")
            }
        } detail: {
            Text("Detail")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button {
                            splitViewVisibility.toggle()
                        } label: {
                            Image(systemName: "sidebar.left")
                                .tint(.red)
                        }
                    }
                }
        }
    }
}

二、隐藏默认的侧边栏切换按钮 #

.navigationBarBackButtonHidden()仅对返回按钮生效，要隐藏侧边栏切换按钮，需用空视图覆盖默认按钮位置：

struct ContentView: View {
    var body: some View {
        NavigationSplitView() {
            List{
                Text("Menu1")
            }
        } detail: {
            Text("Detail")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        EmptyView()
                    }
                }
        }
    }
}

若需隐藏整个导航栏，可在详情视图添加.toolbar(.hidden, for: .navigationBar)。

补充全局设置 #

如果需要让所有导航栏按钮统一使用红色调，可在App入口设置全局色调：

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .tint(.red)
        }
    }
}

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