TabView 的 TabItem 的选定选项卡图像在 SwiftUI 中始终为蓝色答案

【问题标题】：Selected tab image for a TabView's TabItem is always blue in SwiftUITabView 的 TabItem 的选定选项卡图像在 SwiftUI 中始终为蓝色
【发布时间】：2019-09-28 20:38:26
【问题描述】：

我在 SwiftUI 中使用 TabView，并且能够设置当前未选择的选项卡的图像，但是，为选定的选项卡设置图像似乎不起作用。我看到的只是一个蓝色圆圈而不是黑色圆圈。

这是我的代码：

import SwiftUI

struct MainView: View {
    @State private var selected = 0

    var body: some View {

        TabView(selection: $selected){
            Text("First View")
                .tabItem {
                    Image(self.selected == 0 ? "eclipse-tab-icon-black" : "eclipse-tab-icon-grey")
                        .renderingMode(.original)
            }.tag(0)
            Text("Second View")
                .tabItem {
                    Image(systemName: "2.circle")
            }.tag(1)
            Text("Third View")
                .tabItem {
                    Image(systemName: "3.circle")
            }.tag(1)
        }
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
    }
}

正如您在此处看到的，未选择的标签是灰色的。这是正确的：

但是选中的标签是蓝色的，而不是黑色的：

资产：

资产设置：

【问题讨论】：

标签： swift swiftui ios13

【解决方案1】：

如果您为标签视图提供自己的 PNG 图像，请使用渲染模式 template，以便将默认颜色应用于图像的非背景位。

如果在 Assets 文件夹中发现这最容易做到。或者你可以在代码中：

Image("myImage").renderingMode(.template)

【讨论】：

【解决方案2】：

您没有在 TabView 上设置已选择和未选择的图标，您只提供一个图像，并且在未选择时以辅助颜色呈现，在选择时以强调色呈现。如果您希望您选择的选项卡图标为黑色，您可以将 TabView 上的颜色重音设置为黑色，但这违反了 Apple 的设计准则，您还将更改所有子视图的重音颜色。

【讨论】：

我会这样做，但我的情况有点不同。我的两个图标是相同的，例如未选中时为灰色，选中时为黑色，其中一个选中时有 2 种不同的颜色，未选中时为灰色。我目前正在自定义构建一个选项卡，因为我找不到解决方案。 @LuLuGaGa
在这种情况下，构建自定义是唯一的解决方案。
我最终构建了一个自定义的，这花了我几分钟。我真的很惊讶它是如此简单。

【解决方案3】：

使用TabView的accentColor

TabView(selection: $selected) {
        SwiftUIMyData()
            .tabItem {
                Image(systemName: "rectangle.fill.on.rectangle.fill")
                Text("My Data")
        }
        .tag(0)
        SwiftUIMyContent()
            .tabItem {
                Image(systemName: "desktopcomputer")
                Text("My Content")
        }
        .tag(1)
        }.accentColor(.black)

【讨论】：

【解决方案4】：

将图像的渲染模式更改为原始模式。可以在 xcassets 文件夹中，也可以在代码中使用 renderingMode 修饰符。

【讨论】：

【解决方案5】：

使用 .accentColor(.black)

import SwiftUI

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection){
            Text("First View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image("first")
                        Text("First")
                    }
                }
                .tag(0)
            Text("Second View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image("second")
                        Text("Second")
                    }
                }
                .tag(1)
        }.accentColor(.black)
    }
}

tabItem (black) demo

【讨论】：