SwiftUI技术问题：滚动时TabBar为何无法保持透明？

要解决这个问题，核心是正确配置TabBar的外观样式，并调整ScrollView的安全区域设置，具体步骤如下：

1. 配置TabBar的透明外观 #

默认情况下，ScrollView滚动到边缘时，系统会自动切换TabBar的显示样式。你需要统一设置TabBar的标准样式和滚动边缘样式为透明：

init() {
    let tabBarAppearance = UITabBarAppearance()
    // 设置透明背景并去掉阴影
    tabBarAppearance.configureWithTransparentBackground()
    tabBarAppearance.shadowColor = .clear
    
    UITabBar.appearance().standardAppearance = tabBarAppearance
    // iOS 15+ 必须设置滚动边缘样式，确保滚动时保持透明
    if #available(iOS 15.0, *) {
        UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
    }
}

2. 调整ScrollView的安全区域设置 #

让ScrollView延伸到底部安全区域之外，避免系统因内容滚动触发TabBar的样式切换：

修改你的ScrollView代码，添加.edgesIgnoringSafeArea(.bottom)：

ScrollViewReader { scroll in
    ScrollView {
        // 你的消息气泡内容
    }
    .padding(.bottom, 70)
    .scrollDismissesKeyboard(.interactively)
    .edgesIgnoringSafeArea(.bottom) // 关键设置
}

3. 完整修改后的代码示例 #

struct ChatView: View {
    @State private var newMessage = ""
    
    init() {
        let tabBarAppearance = UITabBarAppearance()
        tabBarAppearance.configureWithTransparentBackground()
        tabBarAppearance.shadowColor = .clear
        
        UITabBar.appearance().standardAppearance = tabBarAppearance
        if #available(iOS 15.0, *) {
            UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
        }
    }
    
    var body: some View {
        VStack {
            ZStack(alignment: .bottomTrailing) {
                ScrollViewReader { scroll in
                    ScrollView {
                        // 示例消息内容，替换成你自己的气泡
                        ForEach(0..<20) { index in
                            Text("Message \(index)")
                                .padding()
                                .background(Color.blue.opacity(0.2))
                                .cornerRadius(10)
                                .padding(.horizontal)
                                .id(index)
                        }
                    }
                    .padding(.bottom, 70)
                    .scrollDismissesKeyboard(.interactively)
                    .edgesIgnoringSafeArea(.bottom)
                }
            
                ZStack {
                    HStack {
                        TextField("Type your message", text: $newMessage)
                            .padding(9)
                            .background(
                                RoundedRectangle(cornerRadius: 19)
                                    .foregroundColor(Color(.systemGray6))
                            )
                        // 可添加发送按钮
                        Button(action: {}) {
                            Image(systemName: "paperplane.fill")
                                .padding()
                        }
                    }
                    .padding()
                    .background(Color(.systemBackground))
                }
            }
        }
    }
}

原理说明 #

• 系统默认在ScrollView滚动时，会根据内容位置切换TabBar的scrollEdgeAppearance，如果未设置该样式，会使用默认的不透明样式。
• 让ScrollView忽略底部安全区域，确保内容可以覆盖到TabBar所在区域，避免系统触发样式切换逻辑。

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