WidgetのレイアウトのTips〜四隅編〜

iOS のWidgetでは四隅に角丸が付いています。
この四隅のエリアも描画領域になっており、注意が必要です。
例えば以下のようなコードでレイアウトを組んでみます。

struct WidgetContentView: View {
    var body: some View {
        VStack() {
            Text("吾輩は猫である。名前はまだない。")
            Spacer()
            Text("どこで生れたか頓と見当がつかぬ。")
        }
    }
}

すると、SmallサイズのWidgetは以下のようになります。

Textの一部が見切れてしまいました

これを解決するために .padding() を付けましょう。

struct WidgetContentView: View {
    var body: some View {
        VStack() {
            Text("吾輩は猫である。名前はまだない。")
            Spacer()
            Text("どこで生れたか頓と見当がつかぬ。")
        }
	.padding()
    }
}

すると、SmallサイズのWidgetは以下のようになります。

Widgetでは四隅も描画領域になることを意識して、レイアウトを組むようにしましょう。