SwiftUI マージンの指定方法、Viewのwidthを端末幅に合わせる方法

2020/11/24

マージンの指定方法

Spacerのframeを指定する事によって、ViewとViewの間を任意の間隔にあけることができます。水平方向にマージンを取る場合は、widthを指定し、垂直方向にマージンを取る場合は、heightを指定します。

Spacer().frame(width: 50, height: 100)

HStackで間隔をViewごとに分けたい場合は、下記のようにSpacerのframeをそれぞれ指定します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Button("Button1") {
            }
            
            Spacer().frame(width: 50)
            
            Button("Button2") {
            }
            
            Spacer().frame(width: 100)
            
            Button("Button3") {
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Viewのwidthを端末幅に合わせる方法

Viewのwidthを端末幅にあわせるには、maxWidthを.infinityに指定すると表示できる最大幅になります。

heightの場合も同様にmaxHeightを.infinityに指定すると縦方向に最大限広がります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Text("hello")
        }.frame(maxWidth: .infinity)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}