SwiftUIでUICollectionViewのような表示をする

SwiftUIではUICollectionViewの代わりになるものがない??

どうやらSwiftUIではUICollectionViewの完全に代わりになるものはないそうだ...

UIKit	SwiftUI
UILabel	Text
UIImageView	Image
UITextField	TextField
UITextView	No equivalent (use Text/TextField
UISwitch	Toggle
UISlider	Slider
UIButton	Button
UITableView	List
UICollectionView	No equivalent (can be implemented by List)
UINavigationController	NavigationView
UITabBarController	TabbedView
UIAlertController with style .alert	Alert
UIAlertController with style .actionSheet	ActionSheet
UIStackView with horizontal axis	HStack
UIStackView with vertical axis	VStack
UISegmentedControl	SegmentedControl
UIStepper	Stepper
UIDatePicker	DatePicker
NSAttributedString	No equivalent (use Text)

• 引用
  • SwiftUI Cheat Sheet

Listで表現できると書いてあるが、HStackとVStackでUICollectionViewを表現してみた！

ソースコード

import SwiftUI

struct TopView: View {

  let fibonacci = [
    ["0", "0.5", "1", "2"],
    ["3", "5", "8", "13"],
    ["21", "34", "55", "89"]
  ]

  var body: some View {
    HStack {
      NavigationView {
        VStack(alignment: .center, spacing: 30.0) {
          ForEach(0 ..< self.fibonacci.count) { section in
            HStack(alignment: .center, spacing: 50.0) {
              ForEach(0 ..< self.fibonacci[section].count) { row in
                Text("\(self.fibonacci[section][row])")
                  .font(.largeTitle)
                  .fontWeight(.heavy)
                  .multilineTextAlignment(.center)
              }
            }
            .padding(.all)
          }
        }
        .navigationBarTitle("Fibonacci")
      }
      .padding(.all)
    }
  }

}

struct TopView_Previews: PreviewProvider {
  static var previews: some View {
    TopView()
  }
}

　実行結果

• 

• 

　結論

• HStackとVStackでViewを横と縦に繰り返し表示できれば、UICollectionViewのUIを表現することができそう...
• QGridというSwiftUIのライブラリを使えばもっと楽に表現できそう...
  • QGridについては後日追記します！

追記

2019-12-31

• QgridやStackをつかった構成で作成してみたが、UIKitのTableViewのようにCellを使いまわしてないので、1000件以上の表示になると重くなって全然ダメダメでした...
• やっぱりListをうまく利用してUICollectionViewを再現できないか試していきます！