SwiftUI中如何调整隐藏侧边栏按钮的位置?
SwiftUI 调整侧边栏切换按钮位置的方法
要实现将侧边栏切换按钮移至侧边栏内部、移除红绿灯旁默认按钮的需求,可以按以下步骤操作:
隐藏默认的侧边栏切换按钮
在NavigationSplitView上添加.toolbar(.hidden, for: .navigationBar),即可移除红绿灯旁的默认按钮。如果详情页面需要保留导航栏标题,可在详情视图中自定义标题栏。在侧边栏内添加自定义切换按钮
通过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) // 隐藏默认导航栏(含默认侧边栏按钮) } }
- 适配不同显示状态
上述代码中,点击自定义按钮会切换侧边栏的显示状态(双列/仅侧边栏)。你可以根据需求调整按钮图标和切换逻辑,比如用sidebar.left.slash图标表示隐藏状态。
若使用旧版NavigationView(iOS 14及更早版本),思路一致:通过.navigationBarHidden(true)隐藏默认导航栏,在侧边栏内添加自定义按钮,利用NavigationView的侧边栏状态控制显示。
内容的提问来源于stack exchange,提问作者WilliamD47
相关产品推荐
相关产品推荐

