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

SwiftUI中如何调整隐藏侧边栏按钮的位置?

SwiftUI 调整侧边栏切换按钮位置的方法

要实现将侧边栏切换按钮移至侧边栏内部、移除红绿灯旁默认按钮的需求,可以按以下步骤操作:

  1. 隐藏默认的侧边栏切换按钮
    在NavigationSplitView上添加.toolbar(.hidden, for: .navigationBar),即可移除红绿灯旁的默认按钮。如果详情页面需要保留导航栏标题,可在详情视图中自定义标题栏。

  2. 在侧边栏内添加自定义切换按钮
    通过NavigationSplitViewVisibility状态变量控制侧边栏的显示与隐藏,在侧边栏顶部添加自定义按钮:

struct ContentView: View {
    @State private var splitViewVisibility: NavigationSplitViewVisibility = .automatic
    
    var body: some View {
        NavigationSplitView(columnVisibility: $splitViewVisibility) {
            // 侧边栏内容
            VStack(alignment: .leading, spacing: 16) {
                // 自定义侧边栏切换按钮
                Button {
                    // 切换侧边栏显示状态
                    splitViewVisibility = splitViewVisibility == .doubleColumn ? .primaryOnly : .doubleColumn
                } label: {
                    Image(systemName: "sidebar.left")
                        .font(.title)
                }
                .padding(.leading)
                
                // 侧边栏列表内容
                List {
                    Text("项目 1")
                    Text("项目 2")
                    Text("项目 3")
                }
                .listStyle(.plain)
            }
        } detail: {
            // 详情页面内容
            Text("详情内容")
                .toolbar {
                    // 自定义详情页标题
                    ToolbarItem(placement: .principal) {
                        Text("详情")
                            .font(.title)
                    }
                }
        }
        .toolbar(.hidden, for: .navigationBar) // 隐藏默认导航栏(含默认侧边栏按钮)
    }
}
  1. 适配不同显示状态
    上述代码中,点击自定义按钮会切换侧边栏的显示状态(双列/仅侧边栏)。你可以根据需求调整按钮图标和切换逻辑,比如用sidebar.left.slash图标表示隐藏状态。

若使用旧版NavigationView(iOS 14及更早版本),思路一致:通过.navigationBarHidden(true)隐藏默认导航栏,在侧边栏内添加自定义按钮,利用NavigationView的侧边栏状态控制显示。

内容的提问来源于stack exchange,提问作者WilliamD47

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.07 13:42:18