Вложенный ScrollView SwiftUI

Я пытаюсь разместить сетку (разработанную с помощью scrollview) внутри scrollview, но я не могу установить высоту сетки с высотой содержимого. Я не могу справиться с этой проблемой с .fixedsize()

GeometryReader{ reader in
        ScrollView{
            Text(reader.size.height.description)
            Text(reader.size.height.description)

                    FlowStack(columns: 3, numItems: 27, alignment: .leading) { index, colWidth in
                       if index == 0{
                           Text(" \(index) ").frame(width: colWidth).border(Color.gray)
                            .background(Color.red)

                       }
                       else if index == 1{
                           Text(" \(index) ").frame(width: colWidth).border(Color.gray)

                       }
                       else if index == 2{
                           Text(" \(index) ").frame(width: colWidth).border(Color.gray)


                       }
                       else{
                        Text(" \(index) ").frame(width: colWidth).border(Color.gray)


                       }
                    }
                    .background(Color.red)
            Text(reader.size.height.description)
            Text(reader.size.height.description)



        }.fixedSize(horizontal: false, vertical: false)

    }

Результат

Что я хочу


swift5 swiftui swiftui-list scrollview ios13
person Altern    schedule 13.11.2019    source источник
comment
Немного сложно повторить после того, как вы используете только этот фрагмент кода, вы можете указать хотя бы FlowStack struct?   -  person Александр Грабо&    schedule 14.11.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я не знаю, что вы написали в FlowStack struct, поэтому очень сложно дать правильный ответ. Вот как я решаю эту сетку:

struct GridScrollView: View {

    var body: some View {

        GeometryReader{ geometry in

            VStack {

                Text("height: \(geometry.size.height.description)")
                Text("width: \(geometry.size.width.description)")

                ScrollView{
                    FlowStack(columns: 3, numItems: 60, width: geometry.size.width, height: geometry.size.height)
                }
            }
        }

    }
}

мой FlowStack код:

struct FlowStack: View {

    var columns: Int
    var numItems: Int
    var width: CGFloat
    var height: CGFloat

    private var numberOfRows: Int {
        get {
            numItems / columns
        }
    }

    private var cellWidth: CGFloat {
        get {
            width / CGFloat(columns) - 4 // with padding
        }
    }

    private var cellHeight: CGFloat {
        get {
            height / CGFloat(numberOfRows) - 4 // with padding
        }
    }

    var body: some View {

        ForEach(0..<self.numberOfRows, id: \.self) { row in

            HStack {
                ForEach(1...self.columns, id: \.self) { col in
                    Text("\(row * self.columns + col)")
                        .frame(width: self.cellWidth, height: self.cellHeight, alignment: .center)
                        .background(Color.red)
                        .border(Color.gray)
                    .padding(2)
                }
            }

        }

    }

}

и результат:

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

P.S. это мое быстрое решение. Я думаю, вы также можете использовать эту сетку из github, она довольно массивная, но, на мой взгляд, гибкая

person Александр Грабо&    schedule 14.11.2019