【SwiftUI】文字の色をprimaryとsecondaryで指定するように、文字の大きさもdefaultとsecondaryで指定する（iOS17）

はじめに

タイトルは黒文字で大きめに、説明文は灰色文字で小さめになっているUIをよく見かけます。
これをフォントサイズを指定せずに実装することができるようになりました。

今回はサンプルアプリを作成するために、ChatGPTを使って、飲料水の新商品名とキャッチフレーズを考えてもらいました。

サンプルアプリ

実装

import SwiftUI

struct NewProduct {
    let name: String
    let catchphrase: String
}

struct ContentView: View {
    @State private var newProducts: [NewProduct] = [
        .init(name: "クリスタルドリーム", catchphrase: "純粋な夢の味わい、毎日の活力をクリスタルクリアに。"),
        .init(name: "フルーツエーテル", catchphrase: "宇宙的な果実のエネルギーが広がる、新しいフルーツの次元へ。"),
        .init(name: "アクアブリスト", catchphrase: "自然の恵みが凝縮された、究極の水。日常に輝きをプレゼント。"),
        .init(name: "インフィニティサラス", catchphrase: "限りない清涼感と未知の美味しさ。未来への一口、インフィニティの中で感じて。"),
        .init(name: "エレメンタルフュージョン", catchphrase: "自然の要素が融合した至福の一滴。五感で感じる、新しい次元の調和。"),
        .init(name: "セレスティアルミスト", catchphrase: "空から舞い降りた神秘的な水。心地よい霧のような口当たりでリフレッシュを体感。"),
    ]
    
    var body: some View {
        VStack {
            ForEach(newProducts, id: \.name) { newProduct in
                GroupBox {
                    Text(newProduct.name)
                        .foregroundStyle(.primary)
                        .textScale(.default) // これ
                        .frame(maxWidth: .infinity, alignment: .leading)
                    Text(newProduct.catchphrase)
                        .foregroundStyle(.secondary)
                        .textScale(.secondary) // これ
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
            }
        }
        .padding(20)
    }
}

おわり

Text.Scaleを拡張してオリジナルのText.Scaleを定義できるようになると嬉しいですね
多分今は出来なさそう

公式ドキュメント