SwiftUI中VStack布局下TextField获焦时下方ScrollView消失如何解决？

问题原因 #

TextField聚焦弹出系统键盘时，会改变页面底部安全区域Insets，你的布局使用了GeometryReader获取父视图尺寸，键盘弹出会压缩GeometryReader的可用高度，同时ScrollView没有明确高度约束，最终导致ScrollView布局溢出不可见。

修复步骤 #

1. 为GeometryReader添加忽略键盘安全区域的修饰符，避免键盘挤压整体布局高度
2. 为ScrollView设置固定高度，占用标题栏、搜索栏之外的剩余区域
3. 将列表过滤逻辑抽为独立计算属性，降低布局刷新时的计算复杂度，避免SwiftUI布局判定异常
4. 替换动态计算图标宽度的逻辑为固定值，避免动态计算触发不必要的布局重绘

修改后完整代码 #

struct AllPdfListView: View {
    @Environment(\.presentationMode) var mode: Binding<PresentationMode>
    
    @ObservedObject var pdfsFetcher = PDFsFetcher()
    
    @State var searchString = ""
    
    @State var backButtonHidden: Bool = false
    
    // 移除动态计算宽度的state，替换为固定宽度
    private let iconWidth: CGFloat = 30
    
    // 过滤逻辑抽为计算属性，此处PDF替换为你自己的PDF数据模型类名
    var filteredPDFs: [PDF] { 
        searchString.isEmpty ? pdfsFetcher.pdfs : pdfsFetcher.pdfs.filter { pdf in
            pdf.internalName.lowercased().contains(searchString.lowercased())
        }
    }
    
    var body: some View {
        GeometryReader { geo in
            VStack(alignment: .leading, spacing: 1) {
                // 顶部返回标题栏
                HStack(alignment: .center) {
                    Image(systemName: "chevron.left")
                    Text("All PDFs")
                        .font(.largeTitle)
                    Spacer()
                }
                .padding(.leading)
                .frame(width: geo.size.width, height: geo.size.height / 10, alignment: .leading)
                .background(Color(uiColor: UIColor.systemGray4))
                .onTapGesture {
                    self.mode.wrappedValue.dismiss()
                }
                
                // 搜索栏
                HStack(alignment: .center) {
                    Image(systemName: "magnifyingglass")
                        .padding([.leading, .top, .bottom])
                    TextField ("Search All Documents", text: $searchString)
                        .textFieldStyle(PlainTextFieldStyle())
                        .autocapitalization(.none)
                    Image(systemName: "slider.horizontal.3")
                        .padding(.trailing)
                }
                .overlay(RoundedRectangle(cornerRadius: 10).stroke(.black, lineWidth: 1))
                .padding([.leading, .top, .bottom])
                .frame(width: geo.size.width / 1.05 )
                
                // 列表区域，固定高度为剩余可用空间
                ScrollView {
                    ForEach(filteredPDFs, id: \._id) { pdf in
                        if let parsedString = pdf.file?.split(separator: "-") {
                            let request = URLRequest(url: URL(string: "https://mylink/\(parsedString[1]).pdf")!)
                            
                            NavigationLink(destination: WebView(request: request)
                                            .navigationBarBackButtonHidden(backButtonHidden)
                                            .navigationBarHidden(backButtonHidden)
                                            .onTapGesture(perform: {
                                backButtonHidden.toggle()
                            })) {
                                HStack(alignment: .center) {
                                    Image(systemName: "doc")
                                        .padding()
                                        .frame(width: iconWidth, alignment: .leading)
                                        .lineLimit(1)
                                                            
                                    Text(pdf.internalName)
                                        .padding()
                                        .multilineTextAlignment(.leading)
                                        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                }
                                .padding(.leading)
                            }
                        }
                    }
                    .navigationBarHidden(true)
                }
                // 80为搜索栏的近似高度，可根据实际布局自行调整
                .frame(height: geo.size.height - geo.size.height/10 - 80) 
                .accentColor(Color.black)
                .onAppear{
                    pdfsFetcher.pdfs.isEmpty ? pdfsFetcher.fetchPDFs() : ()
                }
            }
        }
        // 忽略键盘弹出带来的底部安全区域变化
        .ignoresSafeArea(.keyboard, edges: .bottom) 
    }
}

界面参考 #

正常状态下的PDF列表与搜索栏：

修复前搜索栏聚焦后的异常界面：

内容的提问来源于stack exchange，提问作者signal.space