swift - 如何为父 ScrollView 之外的 View 设置动画

Question

我想增加圆角矩形的大小以在它被点击时填满屏幕但它在 ScrollView 内。

struct ReviewView : View {
    var ratings: [Rating] = []
    @State var isZoomed = false

    var body: some View {
        return ScrollView {
            HStack {
                ForEach(ratings) { rating in
                    ZStack(alignment: .topLeading) {
                        RoundedRectangle(cornerRadius: 10)
                            .foregroundColor(Color.gray.opacity(0.5))
                            .frame(width: self.isZoomed ? UIScreen.main.bounds.width : 200)
                            .animation(.spring())
                        VStack(alignment: .leading) {
                            Text(String(repeating: "☆", count: 5-rating.rating) + String(repeating: "★", count: rating.rating))
                                .font(.body)
                                .frame(minWidth: 0, maxWidth: 150, maxHeight: 40, alignment: .topLeading)
                                .padding(.top, 5)
                            Text(rating.ratingTitle)
                                .font(.callout).bold()
                                .lineLimit(2)
                                .multilineTextAlignment(.leading)
                                .frame(minWidth: 0, maxWidth: 150, minHeight: 0, maxHeight: 45, alignment: .topLeading)
                            Text(rating.ratingDescription)
                                .font(.footnote)
                                .lineLimit(3)
                                .multilineTextAlignment(.leading)
                                .frame(minWidth: 0, maxWidth: 150, alignment: .topLeading)

                        }.padding(.leading, 10)
                         .padding(.top, 5)
                         .tapAction { self.isZoomed.toggle() }
                    }
                }
                PresentationButton(destination: RatingsView()) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 10)
                            .foregroundColor(Color.gray.opacity(0.5))
                            .frame(width: 100, height: 150)
                        Text("View More")
                    }
                }
            }.padding()
        }
    }
}

我的代码的问题是所有的矩形都扩展了。我应该如何获取特定的矩形并将其扩展到 ScrollView 之外的 View 大小？

---

编辑:

我已经尝试将 isZoomed 属性添加到我的评级结构中，因此它看起来像这样:

struct Rating : Identifiable {
    let id = UUID()
    let ratingTitle, ratingDescription: String
    let rating: Int
    var isZoomed: Bool = false
}

然后我有一系列这样的评分:

let ratingsExample = [Rating(ratingTitle: "Great!", ratingDescription: "example", rating: 4), Rating(ratingTitle: "Bad!", ratingDescription: "example", rating: 1)]

然后用上面的数组调用 View :

ReviewView(ratings: ratingsExample)

如何更改我的结构的 isZoomed 属性的值，并使其在更改时再次呈现 View ，就像状态一样？这可能吗？

---

编辑 2:

我已经成功解决了如何只缩放一个矩形的问题。为此，我将 id 设为 Int 并在测试数据中对评分进行排序，如下所示:

struct Rating : Identifiable {
    let id: Int
    let ratingTitle, ratingDescription: String
    let rating: Int
}

let ratingsExample = [Rating(id: 0, ratingTitle: "Good", ratingDescription: "good example", rating: 5), Rating(id: 1, ratingTitle: "bad", ratingDescription: "bad example", rating: 1)]

在 View 中添加一个状态变量作为 bool 数组:

@State var isZoomed: [Bool]

添加了计算当前评分数的函数，将它们作为 false 添加到 Bool 数组中:

func isZoomedList(ratings: [Rating]) -> [Bool] {
    var isZoomed: [Bool] = []
    for _ in ratings {
        isZoomed.append(false)
    }
    return isZoomed
}

使用函数调用 View 并将其分配为 @State，然后可以在 View 中更改它:

ReviewView(ratings: ratingsExample, isZoomed: isZoomedList(ratings: ratingsExample))

现在 .tapAction 仅通过指定 id 来更改特定的矩形:

.tapAction { self.isZoomed[rating.id].toggle() }

我不确定是否有更好的方法来做到这一点，但它工作得很好。

仍然不起作用的是矩形仍然只在 ScrollView 中扩展并且看起来像这样:

如何在 ScrollView 之外的屏幕上扩展？

Answer 1

每个矩形都独立于它们的抽头。但是您正在为所有矩形使用 isZoomed State var。因此，每当您点击一个矩形时，isZoomed 就会被切换，并且所有矩形都使用此 isZoomed，因此它们将相应地更改它们的框架。解决方案是您需要保留一组 isZoomed 状态变量，并更新被点击的特定矩形。这足以扩展唯一的特定矩形。

var ratings: [Int] = [0, 1, 2, 3]
    @State var isZoomed: [Bool] = [false, false, false, false]
    var body: some View {
        ScrollView {
            HStack {
                ForEach(ratings) { rating in
                    ZStack(alignment: .topLeading) {
                        RoundedRectangle(cornerRadius: 10)
                            .foregroundColor(Color.green)
                            .frame(width: self.isZoomed[rating] ? UIScreen.main.bounds.width : 200, height: self.isZoomed[rating] ? UIScreen.main.bounds.height : 150)
                            .edgesIgnoringSafeArea(.all)
                            .animation(.spring())
                        }.tapAction { self.isZoomed[rating].toggle() }
                }
            }.padding()
        }

关于第二个查询，据我所知(如果我错了请纠正我)，默认scrollView的框架设置为UIScreen.main.bounds(doesn '忽略安全区域)。您正在将矩形扩展到 UIScreen.main.bounds，这是 scrollView frame 的边界线。