SwiftUI：如何将滚动提示渐变正确放置在Tab View上方

我在Tab页面里展示了列表项，想在Tab View上方加渐变效果，提示用户列表还有更多内容可滚动（已隐藏滚动指示器）。我尝试通过获取Tab Bar的高度设置渐变的底部内边距，但渐变位置仍不正确，请问怎么把它移到截图里紫色高亮的位置？

代码：

import SwiftUI
import Foundation

struct ContentView: View {
    @State var activeTab = 1
    @State var tabBarHeight: CGFloat = 0.0
    
    var body: some View {
        TabView(selection: $activeTab) {
            Group {
                Text("profile")
                    .tabItem {
                        Label("profile", systemImage: "square.text.square.fill")
                    }
                    .tag(0)
                
                Text("search")
                    .tabItem {
                        Label("search", systemImage: "magnifyingglass")
                    }
                    .background(TabBarAccessor { tabBar in
                        tabBarHeight = tabBar.bounds.height
                    })
                    .tag(1)
            }
        }
        .background(Color(red: 0.98, green: 0.98, blue: 0.98).opacity(0.94))
        .onAppear {
            let appearance = UITabBarAppearance()
            UITabBar.appearance().scrollEdgeAppearance = appearance
        }
        .overlay {
            LinearGradient(gradient:
                            Gradient(
                                colors: [Color.gray.opacity(0.6), Color.gray.opacity(0)]),
                           startPoint: .top, endPoint: .bottom
            )
            // .frame(height: 20.0).offset(y:tabBarHeight)
            .frame(height: 20.0).padding(.bottom, -tabBarHeight)
        }
    }
}

// Helper bridge to UIViewController to access enclosing UITabBarController
// and thus its UITabBar
struct TabBarAccessor: UIViewControllerRepresentable {
    var callback: (UITabBar) -> Void
    private let proxyController = ViewController()

    func makeUIViewController(context: UIViewControllerRepresentableContext<TabBarAccessor>) ->
                              UIViewController {
        proxyController.callback = callback
        return proxyController
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<TabBarAccessor>) {
    }
    
    typealias UIViewControllerType = UIViewController

    private class ViewController: UIViewController {
        var callback: (UITabBar) -> Void = { _ in }

        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            if let tabBar = self.tabBarController {
                self.callback(tabBar.tabBar)
            }
        }
    }
}

截图：

解决方案 #

问题核心是渐变的容器位置逻辑错误，调整后可精准定位到Tab Bar上方，修改后的代码如下：

import SwiftUI
import Foundation

struct ContentView: View {
    @State var activeTab = 1
    @State var tabBarHeight: CGFloat = 0.0
    
    var body: some View {
        ZStack(alignment: .bottom) {
            TabView(selection: $activeTab) {
                Text("profile")
                    .tabItem {
                        Label("profile", systemImage: "square.text.square.fill")
                    }
                    .tag(0)
                
                // 用列表模拟可滚动内容
                List(0..<20) { item in
                    Text("列表项 \(item)")
                }
                .tabItem {
                    Label("search", systemImage: "magnifyingglass")
                }
                .tag(1)
            }
            .background(Color(red: 0.98, green: 0.98, blue: 0.98).opacity(0.94))
            .onAppear {
                let appearance = UITabBarAppearance()
                UITabBar.appearance().scrollEdgeAppearance = appearance
            }
            // 移到TabView背景，确保全局获取TabBar高度
            .background(TabBarAccessor { tabBar in
                tabBarHeight = tabBar.bounds.height
            })
            
            // 渐变放在ZStack底部，紧贴TabBar上方
            LinearGradient(gradient: Gradient(colors: [Color.gray.opacity(0.6), Color.gray.opacity(0)]),
                           startPoint: .bottom, endPoint: .top)
            .frame(height: 20)
            .padding(.bottom, tabBarHeight)
        }
    }
}

// 保持原TabBarAccessor逻辑
struct TabBarAccessor: UIViewControllerRepresentable {
    var callback: (UITabBar) -> Void
    private let proxyController = ViewController()

    func makeUIViewController(context: UIViewControllerRepresentableContext<TabBarAccessor>) -> UIViewController {
        proxyController.callback = callback
        return proxyController
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<TabBarAccessor>) {
    }
    
    private class ViewController: UIViewController {
        var callback: (UITabBar) -> Void = { _ in }

        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            if let tabBar = self.tabBarController?.tabBar {
                self.callback(tabBar)
            }
        }
    }
}

关键修改说明 #

• 用ZStack包裹TabView和渐变，直接控制渐变的底部对齐位置
• 将TabBarAccessor移到TabView的背景层，确保切换Tab时也能获取正确高度
• 反转渐变方向（从下到上），更符合“下方有更多内容”的视觉提示逻辑
• 通过padding(.bottom, tabBarHeight)让渐变刚好贴在TabBar顶部，对应截图中的紫色高亮区域

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