更改标签栏图标图像 SwiftUI

Posted 2023-02-24

技术标签:

【中文标题】更改标签栏图标图像 SwiftUI【英文标题】：Change Tabbar Icon Image SwiftUI 【发布时间】：2021-01-07 06:30:00 【问题描述】：

点击此代码中的tabItem 之一时，我想更改tabItem 图标图像。怎么办？

var body: some View 
    ZStack 
        TabView(selection:$selection) 
            OffersView()
                .tabItem (
                    Image(systemName: "bag").renderingMode(.template)
                    Text("Offers")
                )
                .tag(1)
            StepView()
                .tabItem (
                    Image(systemName: "figure.walk.circle").renderingMode(.template)
                    Text("Steps")
                )
                .tag(2)
            ProfileView()
                .tabItem 
                    Image(systemName: "person")
                    Text("Profile")
                
                .tag(3)
        
        .accentColor(Color("ColorOnboarding"))
        .navigationBarBackButtonHidden(true)

【问题讨论】：

【参考方案1】：

你可以像这样改变图像，

var body: some View 
    ZStack 
        TabView(selection:$selection) 
            OffersView()
                .tabItem (
                    Image(systemName: selection == 1 ? "bag" : "bag2").renderingMode(.template)
                    Text("Offers")
                )
                .tag(1)
            StepView()
                .tabItem (
                    Image(systemName: selection == 2 ? "figure.walk.circle" : "figure.walk.circle2").renderingMode(.template)
                    Text("Steps")
                )
                .tag(2)
           
//            -----Other Code-----

【讨论】：

【参考方案2】：

你可以为它使用状态

var body: some View 
@State var isTapped = false
ZStack 
    TabView(selection:$isTapped) 
        OffersView()
            .tabItem (
                Image(systemName: selection == 1 ? "bag" : "bag2").renderingMode(.template)
                Text("Offers")
            )
            .tag(1)
        StepView()
            .tabItem (
                Image(systemName: selection == 2 ? "figure.walk.circle" : "figure.walk.circle2").renderingMode(.template)
                Text("Steps")
            )
            .tag(2)
        ProfileView()
            .tabItem 
                Image(systemName: "person")
                Text("Profile")
            
            .tag(3)
    
    .accentColor(Color("ColorOnboarding"))
    .navigationBarBackButtonHidden(true)

【讨论】：

以上是关于更改标签栏图标图像 SwiftUI的主要内容，如果未能解决你的问题，请参考以下文章

在 SwiftUI 中增加标签栏项目图标的大小

如何让自定义标签栏显示标签栏项目在 Xcode 中设置的选定图像？