iOS SwiftUI键盘弹出致文本折叠：如何让内容上移不折叠

要实现键盘弹出时将文本框上方内容推至顶部且不出现折叠，可通过滚动容器包裹内容+键盘自适应配置解决，具体修改如下：

核心调整点 #

• 用ScrollView包裹原VStack内容，让内容可滚动，避免被键盘挤压折叠
• 移除VStack底部的Spacer()，防止内容被向上压缩
• 添加键盘交互配置，让滚动视图随键盘自动调整位置

修改后的完整代码 #

var body: some View {
    ZStack(alignment: .top) {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 24) {
                if DeviceUtil.getDeviceType() != .smallPhone {
                    Image(systemName: "sun.min.fill")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 220, height: 46)
                    Image(systemName: "building.2")
                        .resizable()
                        .scaledToFit()
                        .frame(width: DeviceUtil.getDeviceType() == .iPad ? 350 : 200, height: DeviceUtil.getDeviceType() == .iPad ? 240 : 150)
                        .padding(.top, 24)
                } else {
                    Image("bLogo")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 100, height: 34)
                    
                    Image("companyIntro")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 100, height: 140)
                        .padding(.top, 12)
                }
                
                Text("One place\nfor all your work.")
                    .font(.titilliumWebRegular(size: DeviceUtil.getDeviceType() == .smallPhone ? 16 :  24))
                    .multilineTextAlignment(.center)
                
                Text("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.")
                    .font(.titilliumWebRegular(size: 15))
                    .multilineTextAlignment(.center)
                
                HStack {
                    Rectangle()
                        .frame(height: 1)
                        .foregroundColor(.black)
                }
                .background(Color.gray.opacity(0.1))
                .padding(.horizontal, DeviceUtil.getDeviceType() == .normalPhone ? 64 : 34)
                
                mainContent
            }
            .padding()
        }
        .scrollDismissesKeyboard(.interactively) // 可选：允许拖动滚动视图关闭键盘
        .ignoresSafeArea(.keyboard, edges: .bottom) // 让滚动视图随键盘调整高度
    }
    .background {
        Image("companyLaunch")
            .resizable()
            .scaledToFill()
            .ignoresSafeArea()
    }
}

逻辑说明 #

1. ScrollView将所有内容置于可滚动容器内，键盘弹出时系统会自动调整滚动视图的可视区域，确保焦点文本框不被遮挡，上方内容会被推至顶部而非折叠
2. 移除Spacer()是因为原布局中Spacer会占据剩余空间，键盘弹出时空间被压缩，导致上方内容被挤压折叠
3. .ignoresSafeArea(.keyboard, edges: .bottom)确保滚动视图底部不会被键盘覆盖，配合ScrollView的自动调整逻辑，实现内容的正确偏移

内容的提问来源于stack exchange，提问作者Zin Win Htet