SwiftUI导航栏Toolbar中HStack内按钮点击无响应问题

问题根源 #

当ToolbarItemGroup使用.navigation布局位置时，它默认仅适配水平方向的内容，垂直方向超出Toolbar默认高度的部分会丢失交互响应——因为Toolbar的点击测试（hit test）区域没有覆盖到超出默认高度的内容。

解决方法 #

方法1：切换布局位置（推荐）

将ToolbarItemGroup的布局位置改为.principal，该位置专门支持导航栏中间区域的自定义垂直布局，会自动扩展Toolbar的交互范围：

修改后的searchNav代码：

@ToolbarContentBuilder var searchNav: some ToolbarContent {
    ToolbarItemGroup(placement: .principal) {
        VStack {
            HStack {
                TextField("", text: $searchQuery, prompt: Text("Search Cleo.").foregroundColor(.black))
                    .focused($searchInFocus)
                    .imageScale(.large)
                    .padding(.top, 20)
                Button {
                    searchQuery = ""
                    tabView = "home"
                } label: {
                    Image(systemName: "line.3.horizontal")
                        .foregroundColor(Color(.black))
                        .imageScale(.large)
                        .frame(width: 50)
                        .frame(height: 40)
                        .background(Color(#colorLiteral(red: 0.7750167251, green: 0.8043509126, blue: 0.8005430698, alpha: 0.7539859694)))
                        .cornerRadius(25)
                    
                }.padding(.top, 20)
            }
            
            HStack(spacing: 0) {
                ForEach(0..<4) {buttonType in
                    Button {
                        print("clicked \(String(buttonType))")
                    } label: {
                            Text(String(buttonType))
                    }
                }  
            }.padding(.vertical)
        }
        .frame(maxWidth: .infinity)
    }
}

方法2：手动扩展Toolbar交互区域

若需保留.navigation布局，可强制设置Toolbar高度并添加背景，确保点击测试覆盖整个VStack：

在NavigationStack内的TabView后添加配置：

.toolbarBackground(Color.white, for: .navigationBar)
.toolbarFrame(height: 120) // 根据实际内容调整高度

同时给VStack添加占满空间的设置：

VStack {
    // 原有内容
}
.frame(maxWidth: .infinity, maxHeight: .infinity)

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