我用 ButtonStyle 创建了一个有样式的按钮。 我在我的视图中使用此按钮，如下所示：
Button("取消", action: onCancel).buttonStyle(FormButtonStyle(mode: .normal)
在某些地方，我会在按钮上方添加 padding：
.padding(.init(arrayLiteral: .trailing, .leading), 16)
但是，这些按钮响应超出其绘制范围的触摸事件。 我该如何防止这种情况发生？ 在下面的示例中，点击 Cancel 按钮将触发 Save 按钮。 即使添加了padding，也会发生这种情况。 大多数这些按钮位于用于选择多个项目的 List 的底部。例如，在我的应用程序中，我有一个 Save 和 Cancel 按钮。
private var actionBtns: some View {
VStack(spacing: 8){
Divider().foregroundColor(Color.veryLightPinkThree)
Button("Save", action: onSave).buttonStyle(CustomButtonStyle(mode: .normal))
.padding(.init(arrayLiteral: .trailing, .leading), 16)
Button("Cancel", action: onCancel).buttonStyle(CustomButtonStyle(mode: .success))
.padding(.init(arrayLiteral: .trailing, .leading), 16)
}
.backgroundColor(.offWhite)
}
这个actionsBtns视图被添加到了我 SwiftUI 视图的主体中。
import PureSwiftUI
import SwiftUI
struct CustomButtonStyle: ButtonStyle {
enum Weight {
case normal
case compact
func fontSize() -> Double {
switch self {
default:
return 16.0
}
}
func hPadding() -> CGFloat {
switch self {
case .normal:
return 16.0
case .compact:
return 16.0
}
}
func height() -> CGFloat {
switch self {
case .normal:
return 56.0
case .compact:
return 40.0
}
}
func width() -> CGFloat {
switch self {
case .normal:
return 150.0
case .compact:
return 75.0
}
}
}
enum Mode {
case normal
case success
case destroy
case greenOutline
case dark
func foregroundColor(isEnabled: Bool = true) -> Color {
switch self {
case .success, .dark, .destroy:
return Color.white
case .greenOutline:
return isEnabled ? .mediumGreen : .veryLightPinkFour
default:
return isEnabled ? Color.greyishBrown : Color.white
}
}
func backgroundColor(isEnabled: Bool = true) -> Color {
switch self {
case .destroy:
return isEnabled ? Color.pinkishOrange : Color.veryLightPinkThree
case .success:
return isEnabled ? Color.mediumGreen : Color.veryLightPinkThree
case .greenOutline:
return .white
case .dark:
return Color.greyishBrown
default:
return isEnabled ? Color.offWhite : Color.veryLightPinkThree
}
}
func strokeColor(isEnabled: Bool = true) -> Color {
switch self {
case .normal:
return isEnabled ? Color.veryLightPinkThree: Color.veryLightPinkTwo
case .greenOutline:
return .mediumGreen
default:
return Color.clear
}
}
}
var mode: Mode = .normal
var weight: Weight = .normal
func makeBody(configuration: ButtonStyle.Configuration) -> some View {
CustomButton(configuration: configuration, mode: mode, weight: weight)
}
struct CustomButton: View {
@SwiftUI.Environment(\.isEnabled) var isEnabled: Bool
var configuration: ButtonStyle.Configuration
var mode: FormButtonStyle.Mode
var weight: FormButtonStyle.Weight
init(configuration: ButtonStyle.Configuration, mode: FormButtonStyle.Mode, weight: FormButtonStyle.Weight) {
self.configuration = configuration
self.mode = mode
self.weight = weight
}
var body: some View {
configuration.label
.lineLimit(1)
.greedyWidth()
.height(weight.height())
.padding(.horizontal, weight.hPadding())
.fontSize(weight.fontSize(), weight: .bold)
.foregroundColor(mode.foregroundColor(isEnabled: isEnabled))
.backgroundColor(mode.backgroundColor(isEnabled: isEnabled))
.clipRoundedRectangleWithStroke(weight.height() / 2.0, mode.strokeColor(isEnabled: isEnabled), lineWidth: 1)
.compositingGroup()
}
}
.contentShape()是你需要的工具。 - undefined