UICollectionView and SwiftUI?

Question

How to create grid of square items (for example like in iOS Photo Library) with SwiftUI?

I tried this approach but it doesn't work:

var body: some View {     List(cellModels) { _ in         Color.orange.frame(width: 100, height: 100)     } } 

List still has UITableView style:

Answer 1

iOS 14 and XCode 12

SwiftUI for iOS 14 brings a new and nativ grid view that is easy to use, its called LazyVGrid: https://developer.apple.com/documentation/swiftui/lazyvgrid

You can start with defining an array of GridItem's. GridItems are used to specify layout properties for each column. In this case all GridItems are flexible.

LazyVGrid takes an array of GridItem's as its parameter and displays the containing views according to the defined GridItems.

import SwiftUI  struct ContentView: View {          let columns = [         GridItem(.flexible()),         GridItem(.flexible()),         GridItem(.flexible()),         GridItem(.flexible())     ]          var body: some View {         ScrollView {             LazyVGrid(columns: columns) {                 ForEach(0...100, id: \.self) { _ in                     Color.orange.frame(width: 100, height: 100)                 }             }         }     } } 

Answer 2

One of the possible solutions is to wrap your UICollectionView into UIViewRepresentable. See Combining and Creating Views SwiftUI Tutorial, where they wrap the MKMapView as an example.

By now there isn’t an equivalent of UICollectionView in the SwiftUI and there’s no plan for it yet. See a discussion under that tweet.

To get more details check the Integrating SwiftUI WWDC video (~8:08).

Update:

Since iOS 14 (beta) we can use Lazy*Stack to at least achieve the performance of the collection view in the SwiftUI. When it comes to the layout of cells I think we still have to manage it manually on a per-row/per-column basis.