如何在 SwiftUI 中增加 navigationBarItem 的可点击区域？答案

【问题标题】：How to increase tappable area of navigationBarItem in SwiftUI?如何在 SwiftUI 中增加 navigationBarItem 的可点击区域？
【发布时间】：2019-11-23 20:43:59
【问题描述】：

我的view 有这个代码

struct ContentView: View {
    var body: some View {
        NavigationView{
            List{
                ForEach(0...5, id: \.self) { note in
                    VStack(alignment: .leading) {
                        Text("title")
                        Text("subtitle")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                }
            }
            .navigationBarItems(trailing: resetButton)
            .navigationBarTitle(Text("Notes"))
        }
    }

    var resetButton: some View {
        Button(action: {
            print("reset")
        }) {
            Image(systemName: "arrow.clockwise")
        }
        .background(Color.yellow)
    }
}

resetButton 看起来像这样：

当我点击resetButton 时，似乎只有黄色区域会响应触摸。

如何使此按钮的可点击区域更大？（让它表现得像普通的UIBarButtonItem）

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

您可以更改view 内按钮的框架：

var resetButton: some View {
    Button(action: {
        print("reset")
    }) {
        Image(systemName: "arrow.clockwise")
        .frame(width: 44, height: 44) // Or any other size you like
    }
    .background(Color.yellow)
}

【讨论】：

谢谢。然而，这并不能解决问题。即使黄色区域变得更大，它的角落仍然没有响应触摸。此外，图像变得更加向左偏移
哦，对不起，我的错。当我手动输入时，我错过了一行。我改变了答案。
不敢相信苹果公司没有关于如何做到这一点的例子。接受的答案有效（感谢@MojtabaHosseini），但感觉比它应该做的工作更多。

【解决方案2】：

This blog post 为我指明了正确的方向，我需要直接向图像添加一些填充。

Button(action: {
    // Triggered code
}) {
    Image(systemName: "plus")
        .font(.system(size: 22, weight: .regular))
        .padding(.vertical)
        .padding(.leading, 60)
}
.background(Color.red) // Not needed

【讨论】：