如何隐藏/移除WatchOS 9中.sheet的取消按钮？

watchOS 9之后，系统会自动为Sheet添加左上角的取消按钮，要移除这个默认按钮并实现自定义关闭逻辑，可以按以下步骤操作：

核心解决方案 #

1. 将Sheet的内容包裹在NavigationStack中（watchOS 9的Sheet依赖导航容器提供默认按钮）
2. 使用navigationBarBackButtonHidden(true)隐藏系统默认的取消按钮
3. 通过toolbar自定义关闭按钮，结合绑定的状态变量控制Sheet的显示/隐藏

修改后的代码示例 #

import SwiftUI

struct ContentView: View {
    @State var isShowingSheet = false
    
    var body: some View {
        VStack {
            Button("显示Sheet") {
                isShowingSheet.toggle()
            }
        }
        .sheet(isPresented: $isShowingSheet) {
            NavigationStack {
                Text("Sheet 1")
                    .navigationTitle("自定义Sheet") // 可选：添加导航标题
                    .navigationBarBackButtonHidden(true) // 隐藏系统默认取消按钮
                    .toolbar {
                        ToolbarItem(placement: .cancellationAction) {
                            Button("关闭") {
                                isShowingSheet.toggle()
                                // 在这里添加自定义关闭逻辑，比如保存数据、重置状态等
                            }
                        }
                    }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键细节说明 #

• NavigationStack的必要性：watchOS 9的Sheet默认嵌入了导航容器，只有在NavigationStack内才能控制导航栏按钮的显示/隐藏
• 自定义按钮位置：使用.cancellationAction的toolbar位置可以让自定义按钮和系统默认取消按钮保持相同的布局位置，也可以根据需求选择其他位置（比如.primaryAction）
• 自定义逻辑扩展：在关闭按钮的点击事件中，除了切换isShowingSheet状态，还可以添加任何你需要的业务逻辑，比如数据持久化、状态清理等

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