SwiftUI自定义导航栏返回按钮：如何实现屏幕边缘触控优化

自定义导航按钮会限制按钮的触控区域，增加按压难度，降低UX。我希望Chevron图标左侧留有空间，但不希望该空间延伸至leading margin，同时也不想通过添加padding让Chevron图标右移。

以下是我已尝试的方法详情...

内置返回按钮 #

• 可延伸至屏幕边缘
• 带有文字（不符合需求）

通过Toolbar Item实现自定义返回按钮 #

已设置灰色背景以高亮触控区域

• 无法延伸至屏幕边缘
• 触控区域缩小，按压左侧边缘时常无法触发

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        AppBackButton(action: {
            self.dismiss()
        })
        .background(.gray)
    }
}

通过带负padding的Toolbar Item实现自定义返回按钮 #

• 视觉上延伸至屏幕边缘
• 仍无法识别leading安全区外的触控事件

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        AppBackButton(action: {
            self.dismiss()
        })
        .background(.gray)
        .padding(.leading, -16)
    }
}

我不仅想移除文字，理想状态是让按钮图标贴合边框，同时触控区域像默认返回按钮一样延伸至边距，该如何实现？

方案1：隐藏系统返回按钮文字（最简单） #

系统默认返回按钮的触控区域本来就符合需求，只需把文字移出屏幕即可，无需自定义按钮：

struct TargetView: View {
    init() {
        // 将返回按钮文字偏移到屏幕外，视觉上隐藏
        UIBarButtonItem.appearance().setBackButtonTitlePositionAdjustment(UIOffset(horizontal: -1000, vertical: 0), for: .default)
    }
    
    var body: some View {
        NavigationStack {
            // 页面内容
        }
    }
}

此方法保留系统默认的宽触控区域，同时去掉文字，图标位置与系统一致，左侧自然留有合适空间，不会延伸到leading margin外。

方案2：SwiftUI自定义按钮扩展触控区域 #

如果必须用自定义按钮，可通过contentShape和offset扩展触控区域，同时保持图标位置：

struct AppBackButton: View {
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            // Chevron图标左侧留8pt空间，避免图标右移
            Image(systemName: "chevron.left")
                .frame(width: 24, height: 24)
                .padding(.leading, 8)
        }
        // 让整个frame范围都能接收点击事件
        .contentShape(Rectangle())
        // 设置和系统默认按钮相近的触控区域尺寸
        .frame(width: 60, height: 44)
        // 向左偏移，让触控区域延伸到屏幕边缘
        .offset(x: -16)
    }
}

// 使用示例
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        AppBackButton(action: { dismiss() })
            .background(.gray) // 调试时可查看触控区域范围
    }
}

方案3：桥接UIKit的UIBarButtonItem（最贴合系统行为） #

直接复用UIKit组件，系统会自动处理触控区域，完美还原默认返回按钮的交互体验：

struct SystemBackButton: UIViewRepresentable {
    let action: () -> Void
    
    func makeUIView(context: Context) -> UIButton {
        let button = UIButton(type: .system)
        button.setImage(UIImage(systemName: "chevron.left"), for: .normal)
        button.addTarget(context.coordinator, action: #selector(Coordinator.tapHandler), for: .touchUpInside)
        return button
    }
    
    func updateUIView(_ uiView: UIButton, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(action: action)
    }
    
    class Coordinator: NSObject {
        private let action: () -> Void
        
        init(action: @escaping () -> Void) {
            self.action = action
        }
        
        @objc func tapHandler() {
            action()
        }
    }
}

// 使用示例
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        SystemBackButton(action: { dismiss() })
    }
}

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