在按钮框架上展开SwiftUI按钮点击区域

Question

我读过类似的question关于该问题。但这只能使用.padding()来扩大按钮的大小。快照中的红色区域是可点击区域。

SwiftUI.framework插入到屏幕边缘的尾随填充无法删除（我认为）。这导致在屏幕右边缘的任何轻击都无法触发按钮动作。如何使可点击区域超出按钮大小？这样用户可以更轻松地点击该按钮。

谢谢。

.navigationBarItems(trailing:
    Button(action: {
        self.context.isSheetDisplay = true
    }, label: {
        Image(systemName: "square.and.pencil")
            .font(.system(size: 20))
    })
    .padding([.leading, .top, .bottom])
    .background(Color.red)
)

---

更新：

例如 模拟器中的Photos.app可能会在边缘触发点击。

Answer 1

我针对iOS的此问题的解决方案是向按钮中添加几乎透明的背景色ViewModifier作为ButtonStyle的一部分：

import SwiftUI

struct ExampleBigPaddedButton: View {
    var body: some View {
        Button("Tap anywhere inside") {
            print("Tapped")
        }.buttonStyle(BigPaddedButtonStyle())
    }
}

struct BigPaddedButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        return configuration
            .label
            .foregroundColor(configuration.isPressed ? .gray : .black)
            .padding(EdgeInsets(top: 75, leading: 25, bottom: 75, trailing: 25))
            .background(Color(red: 1, green: 1, blue: 1, opacity: 0.01))
            .background(Rectangle().stroke(Color.gray))
    }
}

struct ExampleBigPaddedButton_Previews: PreviewProvider {
    static var previews: some View {
        ExampleBigPaddedButton()
    }
}

这会产生一个具有所需填充大小的按钮，可以在其范围内的任意位置轻按。