将 SwiftUI 按钮点击区域扩展到按钮框架上

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()
    }
}

这会生成一个按钮，该按钮具有您需要的任何大小的填充，并且可以在其边界内的任何位置点击。