如何找出当前是否在 SwiftUI 中选择了视图

Question

我想知道我的视图当前是否被选中。 我有一个代表卡片的矩形。点按卡片后，卡片应进入选中状态并更改颜色等属性。

但是一旦我点击其他地方，卡片就不会再处于那种状态了。

到目前为止，当我尝试使用 onTapGesture 属性时，我没有设法解决这个问题，但是我遇到了一个问题，即当我在该卡之外点击时，该卡不会将状态更改为 false，除非我再次点击卡片，这是有道理的，但在这种情况下似乎是错误的选择。

import SwiftUI

struct CardView: View {
    @State var selected = false
    let rectangle = Rectangle()
    @State var rectangleColor: Color = .purple


    var body: some View {
        GeometryReader { g in
            self.rectangle
                .foregroundColor(self.rectangleColor)
                .frame(width: g.size.width / 2, height: g.size.width / 2)
                .onTapGesture {
                    self.selected.toggle()
                    self.modifyColors()
                }
        }
    }

    func modifyColors() {
        if selected {
            rectangleColor = .red
        } else {
            rectangleColor = .purple
        }
    }
}

选中状态为红色，未选中状态为紫色。 所以我希望当我点击矩形时颜色变为红色，但如果我点击它外部则不会。 只有当我在矩形外部而不是在矩形内部点击时，它才会再次变为紫色。 示例：卡片是紫色的。我选择它，它变成红色。当我再次点击它时，它应该保持红色。当我点击卡片外部而不是卡片内部的某个位置时，它应该只变成紫色（未选中）。

---

包含此矩形的视图：

import SwiftUI
struct ContentView: View {
    var body: some View {
        CardView()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

视图实际上在哪里并不重要 - 我想知道该视图周围的空间是否被挖掘。因此，如果它位于模态框或 ZStack 的顶视图中，则行为应该是相同的。

Answer 1

实现这一点的方法是让父视图同时管理选择和手势。

CardView 只需要一个 @Binding 到 isSelected 并相应地更改颜色：

struct CardView: View {

    @Binding var isSelected: Bool

    var body: some View {
        Rectangle()
            .fill(self.isSelected ? Color.red : Color.purple)
            .aspectRatio(1.0, contentMode: .fit)
    }
}

虽然父级管理@State 并使用手势更新它。

struct ContentView: View {

    @State var isCardSelected = false

    var body: some View {
        ZStack {
            Color.white
                .onTapGesture {
                    self.isCardSelected = false
                }
            CardView(isSelected: $isCardSelected)
                .onTapGesture {
                    self.isCardSelected = true
                }
        }
    }
}