TabView 的 TabItem 的選定選項卡圖像在 SwiftUI 中始終為藍色

Question

我正在玩 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()
    }
}

正如您在此處看到的，未選擇的選項卡是灰色的。 這是對的：

但選定的選項卡是藍色的，而不是黑色：

資產：

資產設置：

Answer 1

如果您為選項卡視圖提供自己的 PNG 圖像，請使用渲染模式template ，以便將默認 colors 應用於圖像的非背景位。

如果在 Assets 文件夾中發現這最容易做到。 或者你可以在代碼中：

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

Answer 2

您沒有在 TabView 上設置已選擇和未選擇的圖標，您只提供一個圖像，並且在未選擇時以輔助顏色呈現，在選擇時以強調色呈現。 如果您希望您選擇的選項卡圖標為黑色，您可以將 TabView 上的顏色重音設置為黑色，但這違反了 Apple 的設計准則，您也將更改所有子視圖的重音顏色。

Answer 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)

Answer 4

將圖像的渲染模式更改為原始模式。 在 xcassets 文件夾中，或者在代碼中使用 renderingMode 修飾符。

Answer 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（黑色）演示