为什么SwiftUI中ToolbarItem内的Button无法正常响应点击？

问题描述 #

我在NavigationView中添加了带按钮的ToolbarItem，该按钮无法正常响应点击，必须点击按钮偏下的位置才能触发操作跳转到下一页，Debug View Hierarchy 截图如下：

我的toolbar按钮添加代码如下：

var body: some View {
    ZStack { ... }
    .navigationBarTitle(Text("Format"), displayMode: .inline)
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("Next") {
                setCanvas()
            }
        }      
    }
}

当前视图是通过NavigationLink 推入导航栈的。

解决方案 #

这个问题是SwiftUI导航栏按钮的常见异常，核心原因是按钮的点击响应区域和可视区域错位，或者被下层视图的手势拦截，可以按以下步骤排查修复：

• 第一步：给ToolbarItem内的Button添加.contentShape(Rectangle())修饰符，强制SwiftUI将按钮的整个可视矩形区域识别为可点击范围，修改后代码如下：

  ToolbarItem(placement: .navigationBarTrailing) {
      Button("Next") {
          setCanvas()
      }
      .contentShape(Rectangle())
  }
  

• 第二步：如果第一步无效，检查ZStack是否设置了包含顶部边的ignoresSafeArea，或是ZStack内部存在带点击手势的可交互视图，侵入了导航栏区域拦截了点击事件。如果ZStack内的内容不需要响应点击，可以直接给ZStack添加.allowsHitTesting(false)修饰符；如果需要保留ZStack内的交互，可给ZStack添加.zIndex(0)确保导航栏的响应层级高于下层内容。
• 第三步：如果是兼容iOS 14及更低版本的项目，可以尝试替换为旧版的navigationBarItems修饰符添加按钮，避免ToolbarItem的布局适配问题。

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