SwiftUI中按钮与navigationTitle同行时无法点击的问题求助

你的按钮无法点击的核心原因是：导航栏的视图层级在ScrollView内容之上。你通过负padding把按钮挪到了导航栏的视觉区域，但导航栏的容器视图会拦截该区域的点击事件，导致按钮的交互被上层的导航栏挡住，无法触发action。这不是SwiftUI的限制，而是布局方式不正确导致的。

下面是几种可行的解决方案：

方案一：使用系统Toolbar添加导航栏按钮（推荐） #

这是最符合SwiftUI设计规范的方式，直接将按钮作为导航栏的一部分添加，不会出现遮挡问题：

import SwiftUI

struct TestView: View {
    @State var isPresented = false
    var body: some View {
        NavigationStack {
            ScrollView {
                Text("Main Body")
            }
            .navigationBarTitle("Title", displayMode: .large)
            .toolbar {
                // 将按钮放在导航栏右侧
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        print("tapped")
                    }) {
                        Text("XX") 
                            .foregroundColor(.black)
                            .font(.system(size: 20, weight: .bold))
                            .frame(width: 40, height: 40)
                            .background(Circle().strokeBorder(.blue, lineWidth: 4))
                            .background(Circle().foregroundColor(Color.white))
                    }
                }
            }
        }
    }
}

方案二：自定义完整导航栏（适合复杂布局） #

如果需要更灵活的布局（比如按钮和标题在同一行的自定义位置），可以隐藏系统默认导航栏，自己实现一个导航栏区域：

import SwiftUI

struct TestView: View {
    @State var isPresented = false
    var body: some View {
        NavigationStack {
            ScrollView {
                // 自定义导航栏
                VStack(spacing: 0) {
                    HStack {
                        Text("Title")
                            .font(.largeTitle)
                            .fontWeight(.bold)
                        Spacer()
                        Button(action: {
                            print("tapped")
                        }) {
                            Text("XX") 
                                .foregroundColor(.black)
                                .font(.system(size: 20, weight: .bold))
                                .frame(width: 40, height: 40)
                                .background(Circle().strokeBorder(.blue, lineWidth: 4))
                                .background(Circle().foregroundColor(Color.white))
                        }
                    }
                    .padding(.horizontal)
                    .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)
                    .padding(.bottom, 16)
                    .background(Color.white)
                    
                    // 主内容区域
                    Text("Main Body")
                        .padding()
                }
            }
            .toolbar(.hidden, for: .navigationBar) // 隐藏系统导航栏
        }
    }
}

方案三：强制提升按钮交互优先级（临时hack，不推荐） #

如果一定要保留你原有的布局逻辑，可以通过highPriorityGesture强制按钮优先响应点击事件，但这种方法属于hack，可能在系统版本更新后失效：

Button(action: {
    print("tapped")
}) {
    Text("XX") 
        .foregroundColor(.black)
        .font(.system(size: 20, weight: .bold))
        .frame(width: 40, height: 40)
        .background(Circle().strokeBorder(.blue, lineWidth: 4))
        .background(Circle().foregroundColor(Color.white))
        .padding()
}
.padding(.top, -80)
.highPriorityGesture(TapGesture().onEnded {
    print("tapped")
})

关于健康App的实现逻辑 #

健康App的按钮是系统导航栏的原生组件，通过Toolbar或导航栏自定义接口添加，并非将内容视图的按钮挪到导航栏区域，因此不会出现点击遮挡的问题。

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