【知見メモ】SwiftUIでグラデーションを背景色にした時にキーボードの表示でレイアウトが崩れる問題の対処法

概要

本記事では、SwiftUIでグラデーションを背景色にした時、キーボードの表示でレイアウトが崩れる問題の対処法を紹介します。

問題の挙動

キーボードを表示した時にグラデーションの適用領域が縮んでしまいます。

実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("これはテキストです")
            TextField("text", text: .constant("test"))
                .textFieldStyle(.roundedBorder)
        }
        .padding()
        .frame(maxHeight: .infinity)
        .background(
            LinearGradient(
                colors: [.pink, .purple, .black],
                startPoint: .top,
                endPoint: .bottom
            )
        )
    }
}

#Preview {
    ContentView()
}

対処法

理想はキーボードの表示でグラデーションの適用領域を縮めることなく、背景色を維持できることです。

選択肢の一つとして、.ignoresSafeArea(.keyboard)のmodifier使うことで解決できます。

拡張範囲をキーボードのみに限定することができます。
この特徴を使って、キーボードが表示されても画面がずれないようにすることが可能です。

実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("これはテキストです")
            TextField("text", text: .constant("test"))
                .textFieldStyle(.roundedBorder)
        }
        .padding()
        .frame(maxHeight: .infinity)
        .background(
            LinearGradient(
                colors: [.pink, .purple, .black],
                startPoint: .top,
                endPoint: .bottom
            )
        )
+       .ignoresSafeArea(.keyboard)
    }
}

#Preview {
    ContentView()
}

しかし、TextFieldが固定で配置されてしまうため、デザインによっては改善する必要があるので注意してください。

以上です。