SwiftUI中ZStack首个元素无法显示的原因咨询

核心原因 #

• ZStack的渲染逻辑是后添加的视图层级更高，你代码中先放置了蓝色背景的Text，随后添加的List位于顶层。而iOS默认的List带有不透明的白色背景，完全遮挡了底层的蓝色视图，导致背景无法显示。
• 额外问题：toolbar附加位置错误，它应该绑定到NavigationView的直接子视图上，当前绑定到VStack会导致工具栏无法正常加载。

修正方案 #

1. 隐藏List的默认白色背景，让底层视图透出；
2. 调整toolbar的位置到正确的视图上；
3. 修正文字颜色（原代码中蓝色文字+蓝色背景，即使背景显示也看不到文字）。

修正后的完整代码 #

struct ContentView: View {
    @State var num : Int = 1
    
    var body: some View {
        NavigationView{
            ZStack{
                Text("asd")
                    .foregroundColor(.white)
                    .frame(width: 400, height: 400, alignment: .center)
                    .background(.blue)
                VStack{
                    List{
                        ListItem()
                        ListItem()
                    }
                    .scrollContentBackground(.hidden) // 隐藏List默认背景
                }
            }
            .toolbar{ // 将toolbar绑定到NavigationView的直接子视图ZStack上
                Button{
                    num+=1
                } label: {
                    Label("Add", systemImage: "plus")
                }
            }
        }
    }
}

// 补充ListItem实现（原代码未提供，用于测试运行）
struct ListItem: View {
    var body: some View {
        Text("List Item")
    }
}

补充说明 #

• .scrollContentBackground(.hidden)是iOS 16及以上的API，如果你需要兼容iOS 15或更低版本，可以通过以下方式设置List背景透明：

  List{
      // ...
  }
  .background(Color.clear)
  .onAppear {
      UITableView.appearance().backgroundColor = .clear
  }
  .onDisappear {
      UITableView.appearance().backgroundColor = .systemBackground
  }
  

• 调整文字颜色为白色是为了在蓝色背景上保证文字可见，你可以根据需求修改为其他颜色。

内容的提问来源于stack exchange，提问作者Nadav Holtzman