【SwiftUI】HStackを使用した画面レイアウトにおける自動的な改行について【WrappingHStack】

複数のText項目を並べて画面幅に合わせて改行したい場合がありました。
WrappingHStackというコードを使用すると実現することができましたので紹介します。

実現したかったレイアウト
WrappingHStackについて
1. インストール方法
2. 使用方法
コード例
ライセンスについて

実現したかったレイアウト

下記のようなレイアウトを作成する際、HStackをForEachで回して実装できないか検討しました。

しかし、HStackを使用して、文字列などの項目をレイアウトすると、以下画面のように意図しない位置に（自動的に）改行が入ってしまいます。

import SwiftUI

struct RepeatView2: View {
    let textArray = ["テキスト１", "テキスト２", "テキスト３","テキスト４", "テキスト５"]
    
    var body: some View {
        VStack {
            HStack {
                ForEach(textArray, id: \.self) { text in
                    Text(text)
                }
            }
        }
    }
}

WrappingHStackについて

githubで公開されているコードです。
画面内に収まらないような要素を自動的に次の行に配置してくれます。

GitHub - dkk/WrappingHStack: A SwiftUI HStack with the ability to wrap contained elements

A SwiftUI HStack with the ability to wrap contained elements - dkk/WrappingHStack

インストール方法

[File] → [Add Packages…]でパッケージのインストール画面を開きます。

画面右上の検索フォームに、リポジトリのURLを入力します。
URL:https://github.com/dkk/WrappingHStack

WrappingHStackが見つかると思いますので、画面右下の「Add Package」ボタンを押します。

使用方法

使用したいソースにimportします。

import WrappingHStack

コード例

上記に記載したコードのForEachをWrappingHStackに置き換えるだけです。

import SwiftUI
import WrappingHStack

struct WrapingHStackView: View {
    let textArray = ["テキスト１", "テキスト２", "テキスト３","テキスト４", "テキスト５"]
    var body: some View {
        WrappingHStack(textArray, id:\.self) { text in
            Text(text)
        }
    }
}