web-dev-qa-db-ja.com

UICollectionViewとSwiftUI？

SwiftUIで正方形のアイテムのグリッド（iOSフォトライブラリなど）を作成する方法は？

私はこのアプローチを試しましたが、うまくいきません：

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

リストはまだUITableViewスタイルを持っています：

enter image description here

iosuicollectionviewswiftuiios13
28
Evgeny Mikhaylov

多くの複雑なソリューションやGithubライブラリを見つけるのにうんざりして、私は自分で簡単で美しいMathematicalソリューションを実行することにしました。

  1. アイテムの配列があると思いますvar items : [ITEM] = [...YOUR_ITEMS...]
  2. Nx2のグリッドを表示したい

[〜＃〜] n [〜＃〜]が[〜＃〜]行の数[〜＃〜]および2は、[〜＃〜]列の数です[〜＃〜]

  1. すべてのアイテムを表示するには、2つのForEachステートメントを使用する必要があります。1つは列用、もう1つは行用です。

両方にForEach：（i）現在のインデックス[〜＃〜]行[〜＃〜]、および（j）現在のインデックス[〜＃〜]列[〜＃〜]

  1. 現在のアイテムをインデックスに表示します[（i * 2）+ j]
  2. 次にコードに行きましょう：

注：Xcode 11.3.1

var items : [ITEM] = [...YOUR_ITEMS...]
var body: some View {
VStack{
    // items.count/2 represent the number of rows
    ForEach(0..< items.count/2){ i in
        HStack(alignment: .center,spacing: 20){
            //2 columns 
            ForEach(0..<2){ j in
               //Show your custom view here
               // [(i*2) + j] represent the index of the current item 
                ProductThumbnailView(product: self.items[(i*2) + j])
            }
        }
        }.padding(.horizontal)
    Spacer()
   }
}
0
iGhost

ウィルの答えに基づいて、私はそれをすべてSwiftUI ScrollViewにラップしました。したがって、水平（この場合）または垂直スクロールを実現できます。

GeometryReaderも使用しているため、画面サイズで計算できます。

GeometryReader{ geometry in
 .....
 Rectangle()
    .fill(Color.blue)
    .frame(width: geometry.size.width/6, height: geometry.size.width/6, alignment: .center)
 }

これが実際の例です：

import SwiftUI

struct MaterialView: View {

  var body: some View {

    GeometryReader{ geometry in

      ScrollView(Axis.Set.horizontal, showsIndicators: true) {
        ForEach(0..<2) { _ in
          HStack {
            ForEach(0..<30) { index in
              ZStack{
                Rectangle()
                  .fill(Color.blue)
                  .frame(width: geometry.size.width/6, height: geometry.size.width/6, alignment: .center)

                Text("\(index)")
              }
            }
          }.background(Color.red)
        }
      }.background(Color.black)
    }

  }
}

struct MaterialView_Previews: PreviewProvider {
  static var previews: some View {
    MaterialView()
  }
}

enter image description here

0
Peter Pohlmann

VStackとHStackを使用してみてください

var body: some View {
    GeometryReader { geometry in
        VStack {
            ForEach(1...3) {_ in
                HStack {
                    Color.orange.frame(width: 100, height: 100)
                    Color.orange.frame(width: 100, height: 100)
                    Color.orange.frame(width: 100, height: 100)
                }.frame(width: geometry.size.width, height: 100)
            }
        }
    }
}

スクロールしたい場合は、ScrollViewでラップできます。

0
Krames