SwiftUI：添加ScrollView不遮挡表单且避免键盘上推按钮

我来帮你搞定这个问题！你遇到的核心矛盾是添加ScrollView后布局空间分配混乱，导致表单内容被挤压得完全看不到，同时还要保留键盘不推高底部按钮的需求。下面是具体的分析和修改方案：

问题根源 #

你原来用的List本身会自动抢占可用空间，但换成ScrollView后，它默认会根据内部内容的高度自适应尺寸。再加上外层VStack没有明确的空间分配规则，就会让ScrollView被底部按钮挤到屏幕外，导致表单内容无法显示。而.ignoresSafeArea(.keyboard)的作用是让整个视图忽略键盘安全区，确保底部按钮固定在原位，这部分逻辑是对的，只是布局结构需要调整。

解决方案 #

我们需要重构布局，让ScrollView占据标题和底部按钮之间的所有可用空间，同时保持按钮固定在屏幕底部：

1. 给ScrollView添加.frame(maxHeight: .infinity)，强制它填充剩余空间
2. 将原来的List替换为ScrollView内部的VStack（如果需要类似List的分隔线，可以添加Divider）
3. 保留外层VStack的.ignoresSafeArea(.keyboard)，确保按钮不会被键盘推高

修改后的完整代码 #

import SwiftUI

struct NewEventView: View{
    
    @State private var newEventName: String = ""
    @State private var newEventAddress: String = ""
    @State private var newEventPrivacy: String = ""
    @State private var newEventMaxAttendents: String = ""
    @State private var newEventPrice: String = ""
    @State private var newEventNotes: String = ""
    @State private var newEventStartTime = Date.now
    @State private var newEventEndTime = Date()
    @State private var newEventStartDate = Date.now
    @State private var newEventEndDate = Date()
    @State private var newEventType: String = ""
    
    var body: some View{
        VStack{
            // 页面标题
            Text("New Event")
                .font(.title)
                .fontWeight(.bold)
                .padding(.top)
            
            // 可滚动的表单区域
            ScrollView {
                VStack(spacing: 16) {
                    HStack{
                        Text("Event Name:   ")
                        TextField("Name", text: $newEventName)
                    }
                    
                    Divider() // 添加分隔线模拟List原生样式
                    
                    HStack{
                        Text("Address:         ")
                        TextField("Address", text: $newEventAddress)
                    }
                    
                    Divider()
                    
                    HStack{
                        Picker(selection: $newEventPrivacy, label: Text("Privacy:         ")) {
                            Text("Public ").tag("1")
                            Text("Private").tag("2")
                        }
                        .fixedSize()
                        .scaledToFit()
                    }
                    
                    Divider()
                    
                    HStack{
                        Text("Attendance:    ")
                        TextField("Max Attendents", text: $newEventMaxAttendents)
                    }
                    
                    Divider()
                    
                    HStack{
                        DatePicker("Start Date    ", selection: $newEventStartDate, displayedComponents: [.date])
                    }
                    .scaledToFit()
                    
                    Divider()
                    
                    HStack{
                        DatePicker("Start Time    ", selection: $newEventStartTime, displayedComponents: [.hourAndMinute])
                    }
                    .scaledToFit()
                    
                    Divider()
                    
                    HStack{
                        DatePicker("End Date      ", selection: $newEventEndDate, displayedComponents: [.date])
                    }
                    .scaledToFit()
                    
                    Divider()
                    
                    HStack{
                        DatePicker("End Time      ", selection: $newEventEndTime, displayedComponents: [.hourAndMinute])
                    }
                    .scaledToFit()
                    
                    Divider()
                    
                    HStack{
                        Text("Price               ")
                        TextField("Price", text: $newEventPrice)
                    }
                    
                    Divider()
                    
                    HStack{
                        Picker(selection: $newEventType, label: Text("Type            ")) {
                            Text("Private   ").tag("1")
                            Text("Education ").tag("2")
                            Text("Concert   ").tag("3")
                            Text("Festival  ").tag("4")
                            Text("Food      ").tag("5")
                            Text("Religious ").tag("6")
                            Text("Attraction").tag("7")
                            Text("Business  ").tag("8")
                        }
                        .fixedSize()
                    }
                }
                .padding()
            }
            .frame(maxHeight: .infinity) // 关键设置：让ScrollView占据剩余所有空间
            
            // 底部固定按钮栏
            HStack{
                Button(action: {
                    print("Confirm")
                }, label: {
                    Text("Confirm")
                        .font(.headline)
                        .fontWeight(.semibold)
                        .foregroundColor(.white)
                        .padding()
                        .padding(.horizontal, 20)
                        .background{
                            Color.red
                                .cornerRadius(10)
                                .shadow(radius: 5)
                        }
                })
                
                Button(action: {
                    print("Back")
                }, label: {
                    Text("  Back   ")
                        .font(.headline)
                        .fontWeight(.semibold)
                        .foregroundColor(.white)
                        .padding()
                        .padding(.horizontal, 20)
                        .background{
                            Color.red
                                .cornerRadius(10)
                                .shadow(radius: 5)
                        }
                })
            }
            .padding(.vertical)
        }
        .ignoresSafeArea(.keyboard) // 保留键盘不推高按钮的效果
    }
}

额外补充 #

• 如果你还是想保留List的原生交互（比如滑动删除），其实不需要额外嵌套ScrollView，直接给原List添加.frame(maxHeight: .infinity)，再保持外层的.ignoresSafeArea(.keyboard)也能解决问题。
• 当键盘弹出时，虽然按钮不会被推高，但ScrollView的部分内容可能会被键盘挡住，这时候用户可以通过滚动ScrollView来查看被遮挡的字段，完全不影响填写体验。

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