Question

我想增加一个圆角矩形的大小，以便在点击屏幕时将其填充，但它位于滚动视图的内部。

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

我的代码的问题是所有矩形都延伸。我应该如何获取特定的矩形并将其扩展到滚动视图之外的视图大小？

修改：

我尝试将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)]

然后使用上述数组调用该视图：

ReviewView(ratings: ratingsExample)

如何更改结构的isZoomed属性的值，并使其在更改后再次呈现视图（就像状态一样）？这可能吗？

编辑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)]

在视图中将状态变量添加为布尔数组：

@State var isZoomed: [Bool]

添加了计算当前收视率数量的功能，并将其作为Bool添加到false数组中：

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

使用函数调用视图，并将其分配为@State，然后可以在视图中对其进行更改：

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

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

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

我不确定是否有更好的方法可以做到这一点，但是效果很好。

仍然无法正常工作的是，矩形仍然仅在滚动视图中扩展，看起来像这样：

如何在滚动视图之外扩展到屏幕上方？

Answer 1

每个矩形均独立于其水龙头。但是，您对所有矩形都使用isZoomed State var。因此，每当您点击一个矩形isZoomed时，isZoomed就会被所有矩形使用，因此它们将相应地更改其框架。解决方案是您需要保留一个isZoomed State var数组，并更新被点击的特定矩形。这将足以扩展唯一的特定矩形。

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（不要忽略安全区域）。您正在将矩形扩展到UIScreen.main.bounds，这是 scrollView框架的边界。

如何为父级滚动视图之外的视图设置动画

仍然无法正常工作的是，矩形仍然仅在滚动视图中扩展，看起来像这样：

如何在滚动视图之外扩展到屏幕上方？

1 个答案: