swift - SwiftUI Button 对超出其绘制范围的触摸做出响应
问题描述
我已经使用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()
}
}
解决方案
推荐阅读
- c# - 如何在 c# 中实现 (WaitUntilEvent)?
- php - 如何从 laravel 中的远程服务器下载视频文件?
- nginx - 将 Nginx 配置为转发所有请求的反向代理
- python - 将函数应用于带有一些参数的 pandas grouby
- python - 网络抓取无序表
- php - PHP代码将访问者的IP地址保存在访问我网站网页上的excel文件中
- android - Nordic PCA 10040 nRF52 DK 与安卓通信
- vue.js - 错误的 Dropone autoProcessQueue 不起作用
- python - 标记数据时出错。C 错误:第 7 行中应有 1 个字段,看到 2
- push - 用武力或不用力推动 gerrit 改变?