【SwiftUI】よく使う標準のモデファイア

前回のおさらい

【Swift】SwiftUIの記法・入門

Text("こんにちは")
    .font(.largeTitle)
    .foregroundColor(Color.red)

flame

フレームのサイズとビューの配置位置を指定

Text("こんにちは")
    .flame(
        width: 200,
        height: 150,
        alignment: .bottom
    )

alignmentのプロパティ

CSSのleftやrightと違うのだけ少し慣れが必要ですね。

その他の引数

minWidth, idealWidth, maxWidth, minHeight.idealHeight,maxHeight

fixedSize

フレームサイズに収まらないビューの場合、デフォルトではビューが切り捨てられるが、ビューの表示を変更したくない場合に使用。

Text("こんにちはこんにちはこんにちは")
    .fixedSize()
    .flame(
        width: 200,
        height: 150,
        alignment: .bottom
    )
    .font(.largeTitle)
    .foregroundColor(Color.red)
        }
    }
}

※flameよりも先に記述をしないといけない。

border

ビューに境界線を描画。

Text("こんにちは")
    .flame(
        width: 200,
        height: 150,
        alignment: .bottom
    )
    .border(Color.blue, width: 2)
    .font(.largeTitle)
    .foregroundColor(Color.red)
        }
    }
}

position

ビューの位置を座標で指定する

Text("こんにちは")
    .flame(
        width: 200,
        height: 150,
    )
    .position(x: 50, y: 100)
    .font(.largeTitle)

起点は親のビューを起点とする。

offset

元々の場所を基準に表示位置をずらしたい場合に使用

Text("こんにちは")
    .flame(
        width: 200,
        height: 150,
    )
    .offset(x: 50, y: 50)
    .font(.largeTitle)

edgesIgnoringSafeArea

これは知っておきたいモデファイア。
ビューをセーフエリアを拡張して表示したいときに使用。

Color(red: 0, green: 0, blue: 0)
  .edgesIgnoringSafeArea(.vertical)

edgesIgnoringSafeAreaのプロパティ

padding

cssでなじみ深い名称ですが、swiftでも同様の意味合いで使うことが可能

Text("こんにちは")
    .padding(15)

上下左右を個別に設定する際

Text("こんにちは")
    .padding(.init(
        top: 5,
        leading: 10,
        bottom: 5,
        trailing: 15
    ))

background

ビューの背景を指定

Text("こんにちは")
    .background(Image("sample"))

foregroundColor

ビューの前景要素に使う”色”を指定。(foregroundは色のみ)

Text("こんにちは")
    .foregroundColor(Color.red)

overlay

ビューを別のビューと重ねるときに使用

Image("sample")
    .overlay(
        Text("Overlay")
            .font(.largeTitle)
            .padding(10)
    )

画像のビューにキャプションを付ける際などに便利。

clipped

ビューをフレームサイズで切り取る

Textビューでははみ出た要素は切り捨てられるが、他のビューはフレームをはみ出して表示されるため、clippedを使用することができる。

Image("sample")
    .flame(width: 150, height: 150)
    .clipped()

clipShape

ビューを指定の形状で切り取る

Image("sample")
    .clipShape(Circle())

clipShapeのプロパティ

mask

ビューを他のビューで切り取ることができる

Image("sample")
    .mask(Image("sample"))

cornerRadius

指定した値でビューの角をまるめる
clipShapeと似ているが丸みを調整できる

Image("sample")
    .cornerRadius(10)