画面全体を使う

Published by @SoNiceInfo at 6/24/2020

画面全体を使う方法は主に2つあります。

VStackでframe()の横幅、縦幅を全体にする
ZStackで.edgesIgnoringSafeArea(.all)を適用する

`VStack`で`frame()`の横幅、縦幅を全体にする

frame()内のwidth, heightを.infinityにすると、上下のセーフエリアを残して縦横全体にViewが広がります。
下の例ではVStackで作成したテキスト入力・表示エリアを縦横全体に広げています。
画面全体に広がっていることがわかりやすいようにbackgound()に色をつけています。

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
    @State var name: String = ""

    var body: some View {
        VStack {
            Spacer()
            Text("Result: ") + Text(name)
            TextField("Placeholder", text: $name)
                .padding()
                .border(Color.green, width: CGFloat(2))
            Spacer()
        }
        // ここが大事
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
        .background(Color.yellow)
    }
}

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

`ZStack`で`.edgesIgnoringSafeArea(.all)`を適用する

.edgesIgnoringSafeArea(.all)をViewに適用するとノッチの部分までViewが広がります。
ZStackは先に記述したViewが下になり、後に記述したViewが上にきます。

.edgesIgnoringSafeArea(.all)の効果がわかりやすいように背景を黄色にします。(opacityで少し透明にしてますが意味はありません。)
ColorもViewなのでそのまま記述することができます。
背景の上にテキストの入力・表示エリアが来るようになっています。

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
    @State var name: String = ""

    var body: some View {
        ZStack {
            Color.yellow
                .opacity(0.4)
                // ここが大事
                .edgesIgnoringSafeArea(.all)

            VStack {
                Text("Result: ") + Text(name)
                TextField("Placeholder", text: $name)
                    .padding()
                    .border(Color.green, width: CGFloat(2))
            }
        }
    }
}

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