SwiftUI ZStack 第一个元素不显示

Question

我是 SwiftUI 的新手，我有一个带有 ZStack 的简单应用程序：

struct ContentView: View {
    @State var num : Int = 1
    
    var body: some View {
        NavigationView{
            ZStack{
                Text("asd")
                    .foregroundColor(.blue)
                    .frame(width: 400, height: 400, alignment: .center)
                    .background(.blue)
                VStack{
                    List{
                        ListItem()
                        ListItem()
                    }
                }
                .toolbar{
                    Button{
                        num+=1
                    } label: {
                        Label("Add", systemImage: "plus")
                    }
                }
            }
        }
    }
}

问题是没有显示带有文本的蓝框：

为什么会这样？

Answer 1

您正在使用 ZStack 来总结所有内容。

解决方案：从 ZStack 更改为 VStack。

NavigationView{
        VStack{ //this part

Answer 2

这是因为Text View在ZStack中的List下面。

如果将文本移动到列表之后，它将显示在顶部。

ZStack {
    VStack{
        List {
            ListItem()
            ListItem()
        }
        .listStyle(.insetGrouped)
    }
    .toolbar{
        Button{
            num+=1
        } label: {
            Label("Add", systemImage: "plus")
        }
    }
    
    Text("asd")
        .foregroundColor(.blue)
        .frame(width: 400, height: 400, alignment: .center)
        .background(.blue)
}