SwiftUI无法使用HStack的Spacer

Question

我有一个列表视图，列表的每一行都包含一个带有某些文本视图和图像的HStack，如下所示：

HStack{
    Text(group.name)
    Spacer()
    if (groupModel.required) { Text("Required").color(Color.gray) }
    Image("ic_collapse").renderingMode(.template).rotationEffect(Angle(degrees: 90)).foregroundColor(Color.gray)
}.tapAction { self.groupSelected(self.group) }

这似乎很好用，除了当我在文本和图像之间的空白区域（Spacer()是）轻拍时，tap动作未注册。仅当我在文本或图像上点击时，才会发生点击动作。

其他人是否遇到过此问题/知道解决方法？

Answer 1

在我看来，出于可访问性的原因，最好的方法是将标签包裹在标签HStack内部Button，为了解决Spacer无法点击的问题，您可以.contentShape(Rectangle())向HStack.

所以根据你的代码将是：

Button {
    self.groupSelected(self.group)
} label: {
    HStack {
        Text(group.name)
        Spacer()
        if (groupModel.required) {
            Text("Required").color(Color.gray)
        }
        Image("ic_collapse")
            .renderingMode(.template)
            .rotationEffect(Angle(degrees: 90))
            .foregroundColor(Color.gray)
    }
    .contentShape(Rectangle())
}

Answer 2

为什么不直接使用Button?

Button(action: { self.groupSelected(self.group) }) {
    HStack {
        Text(group.name)
        Spacer()
        if (groupModel.required) { Text("Required").color(Color.gray) }
        Image("ic_collapse").renderingMode(.template).rotationEffect(Angle(degrees: 90)).foregroundColor(Color.gray)
    }
}.foregroundColor(.primary)

如果您不希望按钮将强调色应用于Text(group.name)，则必须foregroundColor像我在示例中所做的那样设置。

Answer 3

据我最近了解，还有：

HStack {
  ...
}
.contentShape(Rectangle())
.onTapGesture { ... }

对我来说效果很好。

Answer 4

在每个视图上都像魔术一样工作：

extension View {
        func onTapGestureForced(count: Int = 1, perform action: @escaping () -> Void) -> some View {
            self
                .contentShape(Rectangle())
                .onTapGesture(count:count, perform:action)
        }
    }

Answer 5

我已经能够通过将 Spacer 包裹在 ZStack 中并添加具有非常低不透明度的纯色来解决此问题：

ZStack {
    Color.black.opacity(0.001)
    Spacer()
}

Answer 6

基于吉姆回答的简单扩展

extension Spacer {
    /// /sf/answers/4019173231/
    public func onTapGesture(count: Int = 1, perform action: @escaping () -> Void) -> some View {
        ZStack {
            Color.black.opacity(0.001).onTapGesture(count: count, perform: action)
            self
        }
    }
}

现在这有效

Spacer().onTapGesture {
    // do something
}