見出し画像

SwiftUIでいこう! -UIVisualEffectView(new!)

モディファイアで文字の色調を調整します。

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        NavigationView{
            ZStack{
                Image(uiImage: UIImage(named: "sea.jpeg") ?? UIImage())
                    .resizable()
                    .padding()
                    .scaledToFit()
                
                Text("Hello")
                    .font(.largeTitle)
                    .foregroundColor(.secondary)
                    .padding()
                    .background(.thinMaterial)
            }
        }
    }
}

let host = UIHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = host

ZStack{}を使って画像の上に文字を

Text("Visit Singapore")

書いて修飾しています。
まず、文字については

.foregroundColor(.secondary)

背景の色調は、

.background(.ultraThinMaterial)

背景は以下のモディファイアーがあります。

.ultraThinMaterial
.thinMaterial
.regularMaterial
.thickMaterial
.ultraThickMaterial

Playgroundで実行しています。 NavigationView{}の中に入れないとうまく表示されません。

Apple公式サイトの例文でもう少し見てみます。

 var body: some View {
            NavigationView{
                ZStack {
                    Image(uiImage: UIImage(named: "sea.jpeg") ?? UIImage())
                        .resizable()
                        .padding()
                        .scaledToFit()

                    Label("Flag", systemImage: "flag.fill")
                        .padding()
                        .background(.ultraThinMaterial)
                }
            }
        }

.ultraThinMaterial

.regularMaterial

.ultraThickMaterial

文字の修飾をした

.foregroundColor(.secondary)

については


.primary と .secondary

テキストのデフォルト色で、外観モード(ライトorダーク)によって色が変わります。
secondaryの方はprimaryに比べて、わずかに透明で背後の色が少し透けて見えます。


この記事が気に入ったらサポートをしてみませんか?