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")
書いて修飾しています。
まず、文字については
背景の色調は、
背景は以下のモディファイアーがあります。
.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)
}
}
}
.regularMaterial
.ultraThickMaterial
文字の修飾をした
については
.primary と .secondary
テキストのデフォルト色で、外観モード(ライトorダーク)によって色が変わります。
secondaryの方はprimaryに比べて、わずかに透明で背後の色が少し透けて見えます。
この記事が気に入ったらサポートをしてみませんか?