ios - 如何确定当前在 SwiftUI 中是否选择了 View

Question

我想知道我的 View 当前是否被选中。我有一个代表一张卡片的矩形。一旦我点击卡片，卡片就会进入选定状态并更改颜色等属性。

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

到目前为止，当我尝试使用 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
        }
    }
}

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

<小时/>

包含此矩形的 View :

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

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

View 的实际位置并不重要 - 我想知道该 View 周围的空间是否被利用。因此，如果它位于模态框内，或者 ZStack 上的顶 View ，则行为应该是相同的。

Answer 1

实现此目的的方法是让父 View 管理选择和手势。

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
                }
        }
    }
}