SwiftUI中点击Plus按钮后内容仅显示模拟器半屏问题求助

问题根源分析 #

1. HStack抢占垂直空间：原代码中HStack设置了frame(maxHeight: .infinity, alignment: .top)，导致HStack占据VStack内所有垂直空间，List被挤压到屏幕底部区域。
2. 导航栏标题位置错误：navigationBarTitle被错误附加在List上，而非NavigationView的直接子视图，引发布局偏移。
3. 弹窗内冗余视图：fullScreenCover中的Color.blue.ignoresSafeArea()属于冗余代码，无意义占据弹窗剩余空间。

修改后的完整代码 #

struct LandingView: View {
    @State private var newLandingName: String = ""
    @State private var isAddingLanding = false
    @State private var landings: [String] = []

    var body: some View {
        NavigationView {
            ZStack {
                Color.blue.ignoresSafeArea()
                Circle()
                    .scale(1.7)
                    .foregroundColor(.yellow.opacity(0.60))
                Circle()
                    .scale(1.3)
                    .foregroundColor(.blue.opacity(0.50))

                VStack {
                    HStack {
                        Text("Add Your Travels")
                            .bold()
                            .padding()
                        Spacer()
                        Button(action: {
                            isAddingLanding = true
                        }) {
                            Image(systemName: "plus")
                                .resizable()
                                .frame(width: 20, height: 20)
                                .foregroundColor(.white)
                        }
                        .frame(width: 40, height: 40)
                        .padding(.trailing, 10)
                    }
                    List(landings, id: \.self) { landing in
                        Text(landing)
                    }
                }
                .navigationBarTitle("Landings!")
                .fullScreenCover(isPresented: $isAddingLanding) {
                    VStack {
                        TextField("Where did you go?", text: $newLandingName)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .padding()
                        Button("Add") {
                            guard !newLandingName.isEmpty else {
                                isAddingLanding = false
                                return
                            }
                            landings.append(newLandingName)
                            newLandingName = ""
                            isAddingLanding = false
                        }
                    }
                    .padding()
                }
            }
        }
    }
}

关键修改说明 #

• 移除HStack中frame(maxHeight: .infinity, alignment: .top)和多余的alignmentGuide设置，让HStack仅占用自身内容高度，释放空间给List。
• 将navigationBarTitle移到VStack上（NavigationView的直接子视图），确保导航栏布局正确。
• 简化弹窗布局：移除冗余的颜色视图，优化TextField提示文本（改为固定提示更合理），用guard语句简化Add按钮逻辑。

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