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

您没有在TabView上设置选定的和未选定的图标，只提供了一张图像，未选定时将以次要颜色呈现，而选定时将以强调色显示。如果希望所选的选项卡图标为黑色，则可以将TabView上的强调色设置为黑色，但这违反了Apple的设计准则，您还将更改所有子视图的强调色。

Answer 2

使用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 3

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

Answer 4

使用.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

Answer 5

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

如果在Assets文件夹中最容易做到这一点。或者，您也可以在代码中将其设置为：

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

TabView的TabItem的选定标签图像在SwiftUI中始终为蓝色

5 个答案: