Как использовать GeometryReader в LazyVGrid - PullRequest
Новая
       6

Как использовать GeometryReader в LazyVGrid

0 голосов
/ 11 июля 2020

Я создаю сетку из карточек, у которых есть изображение вверху и немного текста внизу. Вот быстрый код UI для компонента: 

struct Main: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: .init(repeating: .init(.flexible()), count: 2)) {
                ForEach(0..<6) { _ in
                    ZStack {
                        Rectangle()
                            .foregroundColor(Color(UIColor.random))
                        VStack {
                            Rectangle()
                                .frame(minHeight: 72)
                            Text(ipsum)
                                .fixedSize(horizontal: false, vertical: true)
                                .padding()
                        }
                    }.clipShape(RoundedRectangle(cornerRadius: 10))
                }
            }.padding()
        }.frame(width: 400, height: 600)
    }
}

Этот компонент выводит следующий макет:

enter image description here

This Looks great, but I want to add a Geometry reader into the Card component in order to scale the top image view according to the width of the enclosing grid column. As far as I know, that code should look like the following:

struct Main: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: .init(repeating: .init(.flexible()), count: 2)) {
                ForEach(0..

The trouble is that this renders as the following:

введите описание изображения здесь

Как видите, я даже не пытаюсь использовать GeometryReader, я просто добавил его. Если я добавлю считыватель геометрии на верхнем уровне, он будет правильно отображать сетку, однако это не очень полезно для меня, потому что я планирую абстрагировать компоненты в другие структуры, соответствующие View. Кроме того, GeometryReader кажется полезным с точки зрения контекста, и было бы бессмысленно делать кучу математических расчетов, чтобы сократить значение ширины вдвое, а затем делать свои вычисления оттуда, учитывая, что геометрия будет с верхнего уровня (полная ширина).

Я неправильно использую считыватель геометрии? Насколько я понимаю, его можно использовать в любом месте дерева компонентов, а не только на верхнем уровне.

Спасибо за внимание!

...