SwiftUI Text の結合

SwiftUI の Text は + 演算子で連結できます。これにより、異なるスタイルを持つテキストを一つの行として表示できます。

基本的な連結

複数の Text を + で繋げるだけです。

Text("Hello, ") + Text("World!")

異なるスタイルの組み合わせ

連結の真価は、部分ごとに異なるスタイルを適用できる点にあります。

Text("重要: ")
    .bold()
    .foregroundStyle(.red)
+ Text("この操作は取り消せません")

さらに複雑な組み合わせも可能です。

Text("価格: ")
    .foregroundStyle(.secondary)
+ Text("¥1,980")
    .font(.title2)
    .bold()
    .foregroundStyle(.primary)
+ Text(" (税込)")
    .font(.caption)
    .foregroundStyle(.secondary)

Image との連結

Text は SF Symbols の Image とも連結できます。

Text(Image(systemName: "star.fill"))
    .foregroundStyle(.yellow)
+ Text(" お気に入り")

複数のアイコンを含めることもできます。

Text(Image(systemName: "hand.thumbsup.fill"))
+ Text(" 123 ")
+ Text(Image(systemName: "message.fill"))
+ Text(" 45")

注意点

連結した Text 全体に対してモディファイアを適用すると、個別のスタイルが上書きされることがあります。

// 個別のスタイルが保持される
(Text("赤").foregroundStyle(.red) + Text("青").foregroundStyle(.blue))

// 全体に適用すると上書きされる
(Text("赤").foregroundStyle(.red) + Text("青").foregroundStyle(.blue))
    .foregroundStyle(.green)  // 全部緑になる

スタイルを保持したい場合は、連結前の各 Text にスタイルを適用しておくのがポイントです。