「SwiftUI」余白分の背景色を設定するサンプル

書式
.background(Color.色)
.padding()
Viewサイズで背景色が適用され、その後に外側に無色透明の余白が追加されます。
paddingを追加した後に、backgroundを追加して余白部分の背景色を設定します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
struct ContentView: View {
var body: some View {
Text("検証")
.font(.largeTitle)
.background(Color.red) // テキストの背景色
.padding() // 余白追加
.background(Color.green) // 余白分の背景色
}
}
struct ContentView: View { var body: some View { Text("検証") .font(.largeTitle) .background(Color.red) // テキストの背景色 .padding() // 余白追加 .background(Color.green) // 余白分の背景色 } }
struct ContentView: View {

    var body: some View {
        Text("検証")
            .font(.largeTitle)
            .background(Color.red) // テキストの背景色
            .padding() // 余白追加
            .background(Color.green)  // 余白分の背景色
    }
}

実行結果
「検証」文字に余白を追加します。余白分の背景色は「green」になります。

Swift

Posted by arkgame