Swift 如何在父滚动视图之外设置视图动画

我想增加一个圆角矩形的大小，当它被点击时填充屏幕，但它在滚动视图中

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

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

---

编辑：

我已尝试将

iszomed

属性添加到我的ratings结构中，结果如下：

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

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

然后我有一系列的评分如下：

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

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

并使用上述数组调用该视图：

ReviewView(ratings: ratingsExample)

如何更改结构的

iszomed

属性的值，并使其在更改视图时再次呈现视图，就像状态一样？这可能吗

---

编辑2:

我已经成功地解决了如何只缩放一个矩形。为此，我将

id

设置为

Int

，并在测试数据中按如下顺序排序：

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

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]

添加了一个计算当前评级数的函数，将它们作为

false

添加到

Bool

数组中：

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

使用函数调用视图并将其指定为

@状态

，然后可以在视图中更改：

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

现在，

.tapAction

只通过指定

id

来更改特定的矩形：

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

我不确定是否有更好的方法，但效果很好

仍然不起作用的是，矩形仍然只在滚动视图中展开，如下所示：

---

如何在滚动视图之外的屏幕上延伸？每个矩形都独立于它们的点击。但是您正在对所有矩形使用

isZoomed

State变量。因此，每当你点击一个矩形时，

iszomed

被切换，所有矩形都会使用这个

iszomed

，因此它们会相应地改变帧。 解决方案是您需要保留一个

iszomed

State变量数组，并更新被点击的特定矩形。这将足以扩展唯一的特定矩形

var评级：[Int]=[0,1,2,3]
@状态变量被放大：[Bool]=[false，false，false，false]
var body：一些观点{
滚动视图{
HStack{
ForEach（评级）{在
ZStack（对齐：。顶部引导）{
圆角转角（拐角半径：10）
.foregroundColor（颜色.绿色）
.frame（宽度：self.iszomed[rating]？UIScreen.main.bounds.width:200，高度：self.iszomed[rating]？UIScreen.main.bounds.height:150）
.edgesIgnoringSafeArea（.all）
.animation（.spring（））
}.tapAction{self.iszomed[rating].toggle（）}
}
}.padding（）
}

---

关于第二个查询，据我所知（如果我错了，请纠正我），默认情况下，scrollView的框架设置为

UIScreen.main.bounds

（不要忽略安全区域）。您正在将矩形扩展为

UIScreen.main.bounds

，这是滚动视图框的边界线

每个矩形都独立于它们的点击。但是您正在对所有矩形使用

IsZomed

状态变量。因此，每当您点击一个矩形时

IsZomed

都会被切换，而这

将被禁用所有矩形都使用缩放的

，因此它们将相应地更改帧。 解决方案是您需要保留一个

isZoomed

State变量数组，并更新被点击的特定矩形。这将足以扩展唯一的特定矩形

var评级：[Int]=[0,1,2,3]
@状态变量被放大：[Bool]=[false，false，false，false]
var body：一些观点{
滚动视图{
HStack{
ForEach（评级）{在
ZStack（对齐：。顶部引导）{
圆角转角（拐角半径：10）
.foregroundColor（颜色.绿色）
.frame（宽度：self.iszomed[rating]？UIScreen.main.bounds.width:200，高度：self.iszomed[rating]？UIScreen.main.bounds.height:150）
.edgesIgnoringSafeArea（.all）
.animation（.spring（））
}.tapAction{self.iszomed[rating].toggle（）}
}
}.padding（）
}

关于第二个查询，据我所知（如果我错了，请纠正我），默认情况下，scrollView的框架设置为

UIScreen.main.bounds

（不要忽略安全区域）。您正在将矩形扩展为

UIScreen.main.bounds

，这是滚动视图框的边界线