我已经使用ButtonStyle创建了样式按钮。我在视图中使用此按钮是这样的。
Button("Cancel", action: onCancel).buttonStyle(FormButtonStyle(mode: .normal)
在某些地方，我在上面的按钮上添加了填充
.padding(.init(arrayLiteral: .trailing, .leading), 16)
但是，这些按钮会在其绘制的边界之外响应触摸事件。我如何防止这种情况发生？在下面的示例中，触摸cancel将触发save按钮。无论有无填充，都会发生这种情况。这些按钮大多数位于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()
}
}