【SwiftUI】「edgesIgnoringSafeArea」と「ignoresSafeArea」の併用について

Question

前提・実現したいこと

子ビューで「edgesIgnoringSafeArea」を使ってセーフエリアまで背景色を出し、
親ビューでは「ignoresSafeArea」を使ってキーボードの影響を制御した際、ビュー全体を見るとおかしな挙動になってしまいます。この挙動を無くし、レイアウトを維持したままビューを動かさずにキーボードを出し入れさせたいです。

発生している問題・エラーメッセージ

イメージ画像（Before　→ After）

該当のソースコード

※元ソースコードは量が多い為、似たような構造のコードを記載しております。

import SwiftUI
struct ContentView: View {
    @State private var offset = CGFloat.zero
    @State private var closeOffset = CGFloat.zero
    @State private var openOffset = CGFloat.zero
    @State var text: String = ""
    var body: some View {
        VStack{
            //
            // (例)子ビュー START
            ZStack{
                Color.gray
                VStack{
                    Text("キーボードが出現するとビューが下に下がってしまう。")
                        .padding(.all)
                    TextField("Text", text: $text)
                        .padding(.horizontal)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
            }
            .edgesIgnoringSafeArea(.vertical)
            Spacer()
            Image(systemName: "rectangle.and.pencil.and.ellipsis")
                .font(.system(size: 100))
            // (例)子ビュー END
            //
        }.ignoresSafeArea(.keyboard, edges: .bottom)
    }
}

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

試したこと

どのように対応すれば良いか分からない状態です。
知見がある方ご教授頂けますと幸いです。よろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

Xcode 12.5.1
iOS 14.0向け

Answer 1

.edgesIgnoringSafeArea(.vertical)

の行が余計なだけな気がします。これをコメントアウトして試してみてください。

ステータスバーの背景まで表示を拡張するには、.container の .top に対する除外指定を追加します。

.ignoresSafeArea(.container, edges: .top)
.ignoresSafeArea(.keyboard, edges: .bottom)

---

あと、ご存知かも知れませんが .edgesIgnoringSafeArea(_:)（公式リファレンス）は iOS 15 を最後に廃止されるそうなので、使わないほうがいいと思います。

Comments

[Jene]

ご回答ありがとうございます。
「.edgesIgnoringSafeArea(.vertical)」はグレーの背景エリアをセーフエリアまで広げる為に設けておりました。ご指摘頂いた通りコメントアウトしたところ、求めている動きになるのですが、セーフエリアまでの表示が取れてしまいます。何か良い改善方法はありますでしょうか。

「.edgesIgnoringSafeArea(_:)」についての情報ありがとうございます。お恥ずかしながら存じ上げていなかったので、参考にさせて頂きます。

[退会済みユーザー]

あー、コメントアウトありとなしでステータスバーの背景まで伸びている違いを見落としてました。そういうことですね。

回答に追記しておきました。コンテナ基準のセーフエリア外に表示を伸ばしたい場合は `.container` オプションを指定できます。`.keyboard` に対する指定と共に書いてください。

[Jene]

ありがとうございます！無事望んでいた動作に辿り着きました。
もっと勉強したいと思います。