foregroundStyleにおけつ三つの応用

foregroundStyle()は、iOS15から導入される美しいカラー表示機能です。foregroundStyle()の()の中には、以下の四つのSemantic Colorを記入するのが最適です

foregroundStyle(.primary)
foregroundStyle(.secondary)
foregroundStyle(.tertiary)
foregroundStyle(.quaternary)

()の中には一般なSwift Colorを記入するのはもちろんOKですが、
上の四つ記入値でないと、様々な美しい効果が出ないらしいです。

応用１：そのままのカラー

VStack {
	Text("Primary")
	    .foregroundStyle(.primary)
	Text("Secondary")
	    .foregroundStyle(.secondary)
	Text("Tertiary")
	    .foregroundStyle(.tertiary)
	Text("Quaternary")
	    .foregroundStyle(.quaternary)
}

カラーをそのまま表示。使い方はforegroundColor()と同じです。

応用2：テーマカラー

 VStack {
	Text("Primary")
	.foregroundStyle(.primary)
	Text("Secondary")
	.foregroundStyle(.secondary)
	Text("Tertiary")
	.foregroundStyle(.tertiary)
	Text("Quaternary")
	.foregroundStyle(.quaternary)
 }
 .font(.largeTitle)
+.foregroundStyle(.purple)

一つのテーマカラーに対して、4つの子カラーとして表せます。

応用3:マテリアルデザイン

+ZStack {
+	Color.purple
	VStack {
		Text("Primary")
		    .foregroundStyle(.primary)
		Text("Secondary")
		    .foregroundStyle(.secondary)
		Text("Tertiary")
		    .foregroundStyle(.tertiary)
		Text("Quaternary")
		    .foregroundStyle(.quaternary)
+	}
+	.background(.thickMaterial)
+	.font(.largeTitle)
}

条件としては
① 文字の背景の何らかの色か画像があり（上図の紫の部分）
② 文字のコンテナにbackground(.thickMaterial)が指定

マテリアルデザインはかなり僅かなの効果で
対照図を比べなから見極めましょう

マテリアルデザインあり	マテリアルデザインなし

おまけ

親Viewを借りずにText()にbackground()とforegroundStyle()を指定して同じくマテリアルデザイン効果ができます。

ZStack {
	Image("image_name")
	Text(resort.imageCredit)
	    .background(.thinMaterial)
	    .foregroundStyle(.secondary)
}