Q-Mobile / QGrid

🎛 QGrid: The missing SwiftUI collection view.
MIT License
1.64k stars 104 forks source link

Unexpected behaviour with empty initial value #26

Open brandFromNSK opened 4 years ago

brandFromNSK commented 4 years ago

Hello! Here is an example where I expect the grid appears after button tap, but I got empty grid

struct ContentView: View {

    @ObservedObject var viewModel = ContentViewModel()

    var body: some View {
        VStack {
            Button("Get all values") {
                self.viewModel.tap()
            }
            Text(String(self.viewModel.models.count))
            QGrid(self.viewModel.models, columns: 3) {
                GridCell(value: $0)
            }
        }
    }
}

class ContentViewModel: ObservableObject {

    @Published var models: [String] = [ ]

    func tap() {
        self.models = ["1", "2", "3"]
    }
}

extension String: Identifiable {
    public var id: String {
        return self
    }
}

struct GridCell: View {
    var value: String

    var body: some View {
        Text(self.value)
    }
}

However it works correctly if models value has at least one initial element. Can you explain what should I do in this case? Or is it a bug?

stefangerard commented 4 years ago

I had the same issue. It's because of the ScrollView inside the Grid. ScrollView can not be initialized with an empty array. In my opinion it is a bug and Apple should fix it.

A workaround is to check if the data are empty or not. See following link. https://forums.raywenderlich.com/t/swiftui-dont-update-scrollview-content-via-api/88875/4

For now I am using a copy of QGrid in my Project and I modified it like this (see 3rd line):


    public var body: some View {
        GeometryReader { geometry in
            if !self.data.isEmpty {
                ScrollView(showsIndicators: false) {
                    VStack(spacing: self.vSpacing) {
                        ForEach((0..<self.rows).map { JGridIndex(id: $0) }) { row in
                            self.rowAtIndex(row.id * self.cols,
                                            geometry: geometry)
                        }
                        // Handle last row
                        if self.data.count % self.cols > 0 {
                            self.rowAtIndex(self.cols * self.rows,
                                            geometry: geometry,
                                            isLastRow: true)
                        }
                    }
                }
                .padding(.horizontal, self.hPadding)
                .padding(.vertical, self.vPadding)
            }
        }
    }
brandFromNSK commented 4 years ago

Anyway, I think QGrid should have any workaround

Svantulden commented 4 years ago

Somehow, adding .id(UUID() to the QGrid view worked for me 🤔. Don't know why, because the empty scrollview would be the logical explanation for my case too, as I also load the data asynchronously, so the array is empty as first.

mightyquinn408 commented 4 years ago

@Svantulden Where did you add .id(UUID() to the QGrid?

Svantulden commented 4 years ago

If I take the example from the first post here:

struct ContentView: View {

    @ObservedObject var viewModel = ContentViewModel()

    var body: some View {
        VStack {
            Button("Get all values") {
                self.viewModel.tap()
            }
            Text(String(self.viewModel.models.count))
            QGrid(self.viewModel.models, columns: 3) {
                GridCell(value: $0)
            }.id(UUID())
        }
    }
}

This seemed to work for me

chabose commented 4 years ago

WA mentioned above leads unpredicted behavior on tap gestures for me Also, I found It can be avoided by checking if data is empty on the library. I will send a pull request shortly.