【SwiftUI】SwiftUIで要素をN個づつ改行したい

よっしゃ、みんな!今日はSwiftUIでSwiftUIで要素をN個づつ改行する方法を教えてやるぜ!
最終的には以下の画像みたいになったぜ!

まず、こんな感じのコードがあるとするよな

let colors: [Color] = [.red, .blue, .green, .yellow, .orange, .pink, .purple, .gray, .black, .white]

HStack(spacing: 8) {
    ForEach(colors, id: \.self) { color in
        Circle()
            .fill(color)
            .frame(width: 8, height: 8)
            .tag(color)
            .onTapGesture {
                self.selectedColor = color
            }
    }
}
.pickerStyle(.segmented)

このコードで、色を一列に並べてるだけだけど、これを複数行に分けたいとき、どうすればいいかって話だ。

それには、以下のようにすればいいんだよ

let colors: [Color] = [.red, .blue, .green, .yellow, .orange, .pink, .purple, .gray, .black, .white]

let itemsPerRow = 4

VStack {
    ForEach(0..<(colors.count + itemsPerRow - 1) / itemsPerRow, id: \.self) { row in
        HStack(spacing: 8) {
            ForEach(0..<itemsPerRow, id: \.self) { item in
                let index = row * itemsPerRow + item
                if index < colors.count {
                    let color = colors[index]
                    Circle()
                        .fill(color)
                        .frame(width: 8, height: 8)
                        .tag(color)
                        .onTapGesture {
                            self.selectedColor = color
                        }
                }
            }
        }
    }
}
.pickerStyle(.segmented)

このコードで、行ごとの項目数(itemsPerRow)を設定して、それぞれの行と項目に対してForEachループを使って、
各項目のインデックスをrow * itemsPerRow + itemで計算して、そのインデックスが色の配列の範囲内にある場合にだけ、対応する色の円を表示してるんだ。

これで、色の配列を任意の数の項目ごとに分けて表示できるぜ!

ただし、最後の行は他の行よりも項目数が少ない場合があるから、それが問題なら適切に調整してみてくれよな。

また、spacingframeの値も必要に応じて調整してくれ。このコードはあくまで一例だからな!

以上、SwiftUIでN個の要素を並べる方法の紹介だったぜ!お前らもぜひ試してみてくれよな!

coiai.netでは案件受付中です。
Vtuber、建築モデリング、EC構築、ネイティブアプリ制作、制服の制作(実は縫製業もメイン)、Vision Pro向けアプリ etc…
様々な制作開発を行っています。

ご気軽にご相談ください!

コイアイちゃんのアバター

この記事を書いたのは


Comments

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


Top
Blog
Works
contact