在 SwiftUI 中为 TabView 添加顶部阴影

Question

我有以下内容：

我使用的是原生 TabView。我可以更改背景，但无法在 UITabBar 的顶部添加一点阴影，我尝试创建一个函数并在 onAppear 中调用它，如下所示：

func setupTabBar() {
//        UITabBar.appearance().barTintColor = UIColor(named: "tabBarBackground")
//        UITabBar.appearance().scrollEdgeAppearance = UITabBarAppearance()
    
    UITabBar.appearance().backgroundColor = UIColor(named: "ThemeBackground2")
    UITabBarAppearance().shadowColor = .white
}

它适用于背景但不是我需要的顶线。

这是基本的 TabView：

TabView(selection: $selectedTab) {
        MarketsTabBarView()
            .tag(HostingBarCategories.market)
            .tabItem {
                Image(systemName: "chart.xyaxis.line")
                Text("Market")
            }
        
        PortfolioTabBarView()
            .tag(HostingBarCategories.portfolio)
            .tabItem {
                Image(systemName: "bitcoinsign.square.fill")
                Text("Portfolio")
            }
            
        SettingsTabBarView()
            .tag(HostingBarCategories.settings)
            .tabItem {
                Image(systemName: "gearshape.fill")
                Text("Settings")
            }
}

如何在顶部添加阴影以标记分离？

Answer 1

shadowColor 应用于当前不存在的默认选项卡阴影，因此我们需要一个自定义模板图像（例如具有渐变透明度）以便 shadowColor 对其进行着色。

这是工作方法 (Xcode 13.3 / iOS 15.4)

主要部分：

appearance.shadowColor = .white
appearance.shadowImage = UIImage(named: "tab-shadow")?.withRenderingMode(.alwaysTemplate)

Complete findings and code

在 SwiftUI 中为 TabView 添加顶部阴影

Add top shadow to TabView in SwiftUI

swift

swiftui