🟪

LazyVGridを使ってみた!

2024/02/27に公開

iOS

Swift

SwiftUI

tech

📕Overview

LazyVGrid
子ビューを垂直方向に成長するグリッドに配置し、必要なときだけアイテムを作成するコンテナビュー。

2次元のレイアウトで配置されたビューのコレクションを縦方向にスクロール可能に大きく表示したい場合は、遅延垂直グリッドを使用してください。グリッドのコンテンツクロージャーに提供する最初のビューは、グリッドの前端にある列の一番上の行に表示されます。追加のビューは、グリッドの連続するセルを占有し、前縁から後縁まで最初の行を埋め、次に2番目の行を埋め、といった具合です。行の数は無制限に増やすことができますが、列の数はグリッドのイニシャライザに対応する数のGridItemインスタンスを与えることで指定します。

次の例のグリッドは、2つの列を定義し、ForEach構造体を使用して、各行の列のテキストビューのペアを繰り返し生成します：

struct VerticalSmileys: View {
    let columns = [GridItem(.flexible()), GridItem(.flexible())]


    var body: some View {
         ScrollView {
             LazyVGrid(columns: columns) {
                 ForEach(0x1f600...0x1f679, id: \.self) { value in
                     Text(String(format: "%x", value))
                     Text(emoji(value))
                         .font(.largeTitle)
                 }
             }
         }
    }


    private func emoji(_ value: Int) -> String {
        guard let scalar = UnicodeScalar(value) else { return "?" }
        return String(Character(scalar))
    }
}

グリッドの各行について、最初の列は「Smileys」グループのUnicodeコードポイントを示し、2番目は対応する絵文字を示す：

公式のサンプルだと、横２列、縦に複数のテキストと絵文字が表示されます。

🧷summary

FlutterのGridViewのようなものがないかな〜と探していたら、LazyVGridが似たような機能だったので、配列を使って、ダミーのデータを丸いオブジェクトにして表示するUI作ってみました!

import SwiftUI

struct ContentView: View {
    var items: Array<String> = [
        "家具", "PC", "スマホ", "本",
        "家電", "ゲーム", "おもちゃ", "ベビー",
        "メンズ", "レディース", "ギフトカード", "その他",
    ]
    
    var body: some View {
        ScrollView {
                    LazyVGrid(columns: Array(repeating: .init(), count: 4), spacing: 20) {
                        ForEach(items, id: \.self) { item in
                            Text(item)
                                .font(.system(size: 14))
                                .foregroundColor(.white)
                                .frame(width: 70, height: 70)
                                .background(Color.green)
                                .clipShape(Circle())
                        }
                    }
                    .padding(.horizontal)
                }
    }
}

#Preview {
    ContentView()
}

こんな感じになります。見た目はカッコよくないですが作り方知らなかった私としては「わ〜できた！」と感動しておりました🙌

🧑‍🎓thoughts

今回は、丸いオブジェクトを３行３列に並べるレイアウトをやってみました。Storyboardと違ってすぐに画面作れるSwiftUI便利だな〜と思いつつ画面によっては、「あれ難しいな...」という場面もあります。

📕Overview

🧷summary

🧑‍🎓thoughts

Discussion