【SwiftUI】overlayモディファイアの使い方

  • URLをコピーしました!
目次

説明

Viewの前に別Viewを重ねて表示するModifierです。

宣言

func overlay<V>(alignment: Alignment = .center, content: () -> V) -> some View where V : View

引数

alignment

Alignment構造体でViewの位置を指定します。

使用例1

struct ContentView: View {
    var body: some View {
        Rectangle()
            .frame(width:100, height: 100)
            .foregroundColor(.gray)
            .overlay(alignment: .topLeading) {
                Circle()
                    .frame(width: 30, height: 30)
                    .foregroundColor(.red)
            }
            .overlay(alignment: .topTrailing) {
                Circle()
                    .frame(width: 30, height: 30)
                    .foregroundColor(.blue)
            }
            .overlay(alignment: .bottomLeading) {
                Circle()
                    .frame(width: 30, height: 30)
                    .foregroundColor(.green)
            }
            .overlay(alignment: .bottomTrailing) {
                Circle()
                    .frame(width: 30, height: 30)
                    .foregroundColor(.yellow)
            }
    }
}

使用例2

struct ContentView: View {
    var body: some View {
        Image("animal_uma_horse_stand")
            .overlay() {
                Text("うま")
                    .font(.largeTitle)
            }
    }
}
  • URLをコピーしました!
目次