I'm trying to create a tab vien in Swift UI.

var body: some View {
    TabView {
        HomeView()
            .tabItem {
                Image(systemName: "house")
                Text("Home")
            }
        
        LibraryView()
            .tabItem {
                Image(systemName: "tv")
                Text("Library")
            }
        
        MyStuffView()
            .tabItem {
                Image(systemName: "bookmark")
                Text("My Stuff")
            }
    }
}

The problem is that even though I'm using outlined icons, the tab bar appears with filled icons, even when they are not selected. How do I get the bar to show the icons in their normal appearance? I had originally used Labels instead of Image + Text, but the result was the same.

I'm trying to create a tab vien in Swift UI.

var body: some View {
    TabView {
        HomeView()
            .tabItem {
                Image(systemName: "house")
                Text("Home")
            }
        
        LibraryView()
            .tabItem {
                Image(systemName: "tv")
                Text("Library")
            }
        
        MyStuffView()
            .tabItem {
                Image(systemName: "bookmark")
                Text("My Stuff")
            }
    }
}

The problem is that even though I'm using outlined icons, the tab bar appears with filled icons, even when they are not selected. How do I get the bar to show the icons in their normal appearance? I had originally used Labels instead of Image + Text, but the result was the same.

• swiftui
• tabview
• tabitem

Share Improve this question Follow edited Mar 2 at 16:54 jonrsharpe 122k3030 gold badges268268 silver badges476476 bronze badges asked Mar 2 at 16:05 cesarcarloscesarcarlos 1,44911 gold badge1515 silver badges4242 bronze badges 1

• Please show what your code produces, and what the "normal appearance" should be. – Sweeper Commented Mar 2 at 16:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This is probably intended by Apple to be a feature, to ensure consistent appearance between apps.

You might expect that the filled version can be turned off by applying the modifier .symbolVariant(.none), but this doesn't work. However, the documentation to this modifier explains how to ignore all symbol variants:

To cause a symbol to ignore the variants currently in the environment, directly set the symbolVariants environment value to none using the environment(_:_:) modifer.

This needs to be done for each image separately:

TabView {
    HomeView()
        .tabItem {
            Image(systemName: "house")
                .environment(\.symbolVariants, .none) // 

                                发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745118630a4612282.html