If there are less than two images to be displayed, nothing will be displayed.

[taka84makiba]

Hi all, I have found a bug.

When using WaterdallGrid, if there are less than 2 data to display, nothing will be displayed.

Here is a piece of source code that reproduces the bug at my end

ScrollView {
                        WaterfallGrid(dataArray, id: \.self) { file in
                            VStack {
                                if let post = viewModel.posts.first(where: { $0.fileIds.contains(file.id) }) {
                                    NavigationLink(destination: ImageDetailView(item: post, file: file)) {
                                        // View to display images.
                                        ImageGridItem(url: file.url!)
                                    }
                                }
                            }
                        }
                    }

import SwiftUI
import Kingfisher

// View to display images.
struct ImageGridItem: View {
    
    private var url: String
    
    init(url: String) {
        self.url = url
    }
    
    var body: some View {
        KFImage.url(URL(string: url))
            .resizable()
            .placeholder{
                RoundedRectangle(cornerRadius: 30)
                    .fill(Color(0xe6e6e6))
            }
            .scaledToFit()
            .clipped()
            .cornerRadius(5)
            .aspectRatio(contentMode: .fit)
    }
}

3 or more	less than two data

Please some advice or fix

[xiaoxidong]

Have you find a solution?

[dongqingWang1968]

Hi

 @yamanetaisei.  It's not limited by the exact number (2). Such things happen when the number of items are less or equal than number of columns in your grid. I guess you saw 2 is making the difference just becasue the default number of columns is 2.  
Furthermore, I feel this bug should come from the logic how waterallgrid calcualtes the width of each item. @xiaoxidong  Then seems not easy to fix it. But a workaround is to add some blank item in your items to make its length larger than number of columns. 

  Thanks
  Dongqing

[bjeber]

hi. i used the following approach:

.gridStyle(
                columnsInPortrait: maxColumns(max: 2),
                columnsInLandscape: maxColumns(max: 3),
                spacing: 4
            )

func maxColumns(max: Int) -> Int {
       // images is an array holding the images and its data
        let highestMatchIndex = min(max, images.count - 1)
        return highestMatchIndex
    }