如何使用NavigationStack阻止文本擦除背景颜色？

Question

刚接触Swift，卡在起跑线上...

我只是想使用渐变填充页面的整个背景。我已经看到使用

ContainerRelativeShape()

可以做到这一点，所以已经尝试过并且效果很好。我的问题是，当我输入文本或任何类似内容时，它会在其后面创建白色背景。

我尝试过在堆栈的开头简单地填充

Color.blue

，但似乎会发生同样的事情？

这是可重现的代码，用于显示我目前正在做什么来尝试填充颜色。

顺便说一下，我正在制作一个特定于 iPad 的应用程序，因此不确定这是否会对填充属性产生一些影响？我正在使用

NavigationStack

，因此整个 iPad 屏幕都在使用，而不是侧边栏。

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationStack {
            backgroundFillView()
            VStack {
                Text("HELLO")
            }
            .navigationBarTitle("TITLE")
        }
    }
}
struct backgroundFillView: View {
    var body: some View {
        ContainerRelativeShape()
            .fill(Color.blue.gradient)
            .ignoresSafeArea()
            
    }
}

任何帮助将不胜感激。

Answer 1

您使用的是

VStack

，这意味着所有子视图将从上到下对齐。包裹在

ZStack

内将解决此问题：

NavigationStack {
    ZStack {
        BackgroundFillView()
        VStack {
            TextField("Input hể", text: $text)
            Text("HELLO")
        }
    }
    .navigationBarTitle("TITLE")
}