SwiftUI中NavigationView内List外侧的Text视图无法显示如何解决

问题原因 #

你直接将List、Text作为NavigationView的同级子元素，SwiftUI默认会对多个未明确布局容器的子元素使用ZStack堆叠布局，Text会被覆盖在List下方，因此不可见。

解决方法 #

将NavigationView内的所有需要按垂直顺序排列的元素，统一包裹在VStack容器中即可，如果你还需要添加第二个List，直接放在Text下方即可，修改后参考代码如下：

var body: some View {
    NavigationView {
        // 增加VStack作为根布局容器，所有元素垂直排列
        VStack(spacing: 0) {
            List {
                Button(action: {}, label: {
                    Text("Name: \(name)")
                })
                
                Button(action: {}, label: {
                    Text("Description: \(description)")
                })
                
                Button(action: {}, label: {
                    Text("Numerical Target: \(numTarget)")
                })
                
                Picker(selection: $numUnitIndex, label: Text("Numerical Unit: \(numUnit)")) {
                    ForEach(0 ..< units.count) {
                        Text(self.units[$0]).tag($0).foregroundColor(.blue)
                    }
                }.pickerStyle(MenuPickerStyle())
                
                Button(action: {}, label: {
                    Text("Start date: \(startDate)")
                })
                
                Button(action: {}, label: {
                    Text("End date: \(endDate)")
                })
                
                Button(action: {}, label: {
                    Text("Category: \(category)")
                })
            }.onAppear() {
                setPickerValue()
            }
            .navigationBarTitleDisplayMode(.inline)
            .navigationTitle("Goal Details")
            .toolbar {
                Button("Add Step") {
                    print("Help tapped!")
                }
            }
            
            Text("Steps for this goal")
                .background(Color.black)
                .font(.system(size: 20))
                .foregroundColor(.white) // 建议补充白色文字，避免黑底看不清内容
            
            // 此处添加你的第二个List即可
            List {
                // 填写第二个List的业务内容
            }
        }
    }
}

额外提示 #

如果你的项目最低兼容iOS 16及以上版本，推荐替换已废弃的NavigationView为NavigationStack，二者基础用法完全一致。

内容的提问来源于stack exchange，提问作者George Sepetadelis