🙆‍♀️

【SwiftUI】scenePaddingについて（Apple Watch）

2023/12/04に公開

Swift

SwiftUI

tech

scenePaddingについてAppleのドキュメントで調べたところ少々分かりにくかったので備忘録としてここに残します。

scenePaddingはpaddingと同じようなものですが、特定の条件下でpaddingより優れた振る舞いをしてくれます。具体的には以下の例で示すApple Watchアプリのタイトルとコンテンツの先頭を揃えたい場合などに使用します。

まず最初にコードをご覧ください。(実際に自分で試してみたい方はプロジェクト作成画面からwatchOS>Appでプロジェクトを作成してください。)

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack(alignment: .leading, spacing: 10) {
                Text("🟥 with scenePadding")
                    .scenePadding(.horizontal)
                    .border(.red)
                Text("🟦 with padding")
                    .padding(.horizontal)
                    .border(.green)
                Text("🟨 without padding")
                    .border(.blue)
                Button("Button") {}
            }
            .navigationTitle("⬜️Title")
        }
    }
}

#Preview {
    ContentView()
}

実際にプレビューで画面を確認するのこのようになります。

確認しても少々分かりにくいですが、paddingを使用している時とは異なり、タイトルとコンテンツの先頭が同じ位置にあることが分かります。

Discussion