SwiftUI实现TikTok风格评论弹窗：需求与背景偏移问题排查

需求说明 #

• 背景内容保持固定位置
• 弹窗从底部向上滑入
• 底部设置评论输入框
• 点击评论框唤起键盘时，输入框随之上滑

当前问题 #

运行提供的代码点击蓝色方块唤起评论区时，红色背景会随键盘弹出向上滑动，不符合背景固定的需求。

修复方案及代码 #

通过调整布局结构、移除多余的键盘忽略设置，实现符合需求的弹窗效果：

import SwiftUI

struct TikTokView: View {
  
  @State var isPresented: Bool = false
  
  var body: some View {
    ZStack {
      // 固定位置的背景内容
      Color.red
      
      VStack {
        RoundedRectangle(cornerRadius: 15)
          .fill(Color.blue)
          .frame(width: 50, height: 50)
          .onTapGesture {
            isPresented.toggle()
          }
      }
      // 移除此处的键盘忽略设置，避免背景随键盘上移
      CommentsSheetView(isPresented: $isPresented)
    }
  }
}

struct CommentsSheetView: View {
  
  @Binding var isPresented: Bool
  @State private var text: String = ""
  
  private let transition: AnyTransition = .move(edge: .bottom)
  
  var body: some View {
    ZStack(alignment: .bottom) {
      if isPresented {
        // 半透明遮罩，点击可关闭弹窗
        Color.black.opacity(0.5)
          .ignoresSafeArea()
          .onTapGesture {
            isPresented.toggle()
          }
        
        VStack(spacing: 0) {
          // 评论列表区域
          ScrollView(.vertical) {
            LazyVStack(spacing: 16) {
              ForEach(0...50, id: \.self) { i in
                Text("评论 \(i+1)")
                  .foregroundStyle(.pink)
                  .frame(maxWidth: .infinity, alignment: .leading)
                  .padding(.horizontal)
              }
            }
            .padding(.top)
          }
          .frame(maxHeight: .infinity)
          .background(.white.opacity(0.9))
          
          // 评论输入框区域
          HStack(spacing: 12) {
            Text("LOREM")
              .foregroundStyle(.gray)
            
            TextField("说点什么...", text: $text, axis: .vertical)
              .keyboardType(.asciiCapable)
              .autocorrectionDisabled(true)
              .foregroundStyle(.pink)
              .padding(12)
              .background(.green.opacity(0.1))
              .cornerRadius(8)
          }
          .padding()
          .background(.white)
        }
        .frame(height: UIScreen.main.bounds.height * 0.7) // 弹窗高度占屏幕70%
        .transition(transition)
      }
    }
    .animation(.easeInOut, value: isPresented)
  }
}

#Preview {
  TikTokView()
}

关键修改点 #

1. 背景固定：移除TikTokView中VStack的.ignoresSafeArea(.keyboard)，确保红色背景不会随键盘弹出移动。
2. 统一弹窗布局：将评论列表和输入框整合到同一个VStack中，保证两者同步从底部滑入，布局逻辑更清晰。
3. 自动键盘适配：弹窗容器未添加键盘忽略设置，输入框会自动跟随键盘上移，无需额外处理。
4. 性能优化：使用LazyVStack加载大量评论，提升列表滚动性能。
5. 交互完善：给半透明遮罩添加点击关闭手势，贴合TikTok的交互习惯。

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