HStack の要素を Flexbox のようにうまいこと改行させたい

HStack に並べている要素を下の画像のように、上手いこと改行させたい (要素毎に改行させるのではなく、最後の要素のみ改行させたい) 場合のやり方。

SwiftUI の標準の HStack では上手いこと改行されないので、自分でコードを書くか、ライブラリを使う必要がある。 そこで都合の良いライブラリを探したところ、 WrappingHStack というライブラリが使えた。

github.com

使い方は以下のように第一引数に配列を渡すと良い。

WrappingHStack(views, spacing: .constant(4)) { element in
    switch element {
        // ...
    }
}

ただし、このままでは要素が ほにゃら... という風にクリッピングされてしまうことがある。 もしそうなった場合は、次のように各要素に fixedSize(horizontal: false, vertical: true) モディファイアを付与することで回避することができる。

WrappingHStack(views, spacing: .constant(4)) { entity in
    switch entity {
    case let entity as TwtrPlainTextEntity:
        Text(entity.text.trimmingCharacters(in: .whitespacesAndNewlines))
            .font(.subheadline)
            .foregroundColor(.primary)
            .fixedSize(horizontal: false, vertical: true) // HACK

    default:
        EmptyView()
    }
}

詳しくは、 次の Issue のコメントにかいてあるが、 SwiftUI のバグの可能性もあるとのこと。悲しい。

github.com

ということで、良い感じに改行する方法でした。ではでは。