TabView SwiftUI中TabItem上的LinearGradient

Posted 2023-03-08

【中文标题】TabView SwiftUI中TabItem上的LinearGradient

【英文标题】：LinearGradient on TabItem in TabView SwiftUI

【发布时间】：2020-12-16 13:58:38

【问题描述】：

是否可以将 LinearGradient 应用于 TabItem？ AccentColor 只需要一种颜色，我还没有找到另一种将任何颜色应用于 TabItem 的方法。 有什么想法吗？ （例如，这是从蓝色到绿色的渐变）

【问题讨论】：

你能展示一些你想要达到什么目的的演示，比如截图、模型等吗？

也许这会有所帮助：***.com/questions/61509167/…

@koen 因为 SwiftUI 只显示不超过一个图像和文本视图，我们不能使用渐变蒙版。

@Yodagama 感谢您澄清这一点。

【参考方案1】：

没有机会在 SwiftUI 中为强调颜色应用渐变。因此，在您的情况下，您必须使用渐变创建自己的标签栏项目图像并将它们保存为 png。您必须匹配大小，因为您无法在 tabItem 内调整 Image 的大小。有关尺寸，请参阅this 答案

您将需要一个带有渐变的活动图像和一个可能是灰色的非活动图像，就像默认的 TabBar 行为一样。然后只需在 TabView 中加载您的图像并根据选择..

这是一个例子

struct ContentView: View 
    @State var selection = 0
    var body: some View 
        TabView(selection: $selection) 
            Text("First")
                .tabItem 
                    Image(selection == 0 ? "home_active" : "home_inactive") //<< here you load your different images 

                    Text("Home")
                        .colorMultiply(Color.yellow)
                

            Text("Second")
                .tabItem 
                    Image(selection == 1 ? "setting_active" : "setting_inactive")
                    Text("Setting")
                
        
    

【参考方案2】：

是的，我们不能在 SwiftUI 中的 tabItem 上应用渐变。它只显示不超过一个 Image 和一个 Text 视图，尽管我们在 .tabItem 中放置了更多视图。

所以你必须制作自定义标签栏。