Как анимировать представление за пределами родительского прокрутки

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 an 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 .