SwiftUI 如何实现TabBar按钮根据选中状态切换systemImage图标

核心逻辑是将TabView的选中状态与每个tabItem的图标配置绑定，具体实现如下：

改动后的完整代码 #

import SwiftUI

struct ContentView: View {
    // 跟踪当前选中的Tab索引，0对应主页，1对应搜索，以此类推
    @State private var selectedTab = 0
    // 未使用的fullScreenCover可按需删除
    @State private var fullScreenCover = false
    
    init() {
        UITabBar.appearance().isTranslucent = false
    }
    
    var body: some View {
        VStack {
            ForEach(0..<6) { num in
                Spacer()
            }
            
            HStack {
                Spacer()
                Button(action: {}, label: {
                    Image(systemName: "message")
                        .font(.system(size: 20))
                })
                .padding(.horizontal, 15)
            }
            .foregroundColor(Color("Reverse"))
            .padding(.vertical, 8)
            
            // 绑定选中状态的TabView
            TabView(selection: $selectedTab) {
                Main_Home()
                    .tag(0) // 标记当前视图对应Tab索引0
                    .tabItem {
                        // 根据选中状态切换主页图标
                        Image(systemName: selectedTab == 0 ? "house.fill" : "house")
                    }
                
                Main_Search()
                    .tag(1)
                    .tabItem {
                        // 如需搜索Tab也做样式切换，可按同样逻辑修改
                        Image(systemName: "magnifyingglass")
                    }
                
                Main_AddContent()
                    .tag(2)
                    .tabItem {
                        Image(systemName: "plus.viewfinder")
                    }
                
                Main_Message()
                    .tag(3)
                    .tabItem {
                        Image(systemName: "pencil.circle.fill")
                    }
                
                Main_Profile()
                    .tag(4)
                    .tabItem {
                        // 如需个人页也做样式切换，可按同样逻辑修改
                        Image(systemName: "person.crop.circle")
                    }
            }
            .accentColor(Color("Reverse"))
        }
        .background(Color("Normal"))
        .edgesIgnoringSafeArea(.all)
    }
}

关键改动说明 #

• 新增selectedTab状态变量：默认选中主页（索引0），用户切换Tab时该变量会自动同步更新
• TabView添加selection绑定：实现选中状态的双向同步
• 每个Tab的根视图添加.tag(索引值)：用于和selectedTab匹配，标记当前视图对应的Tab序号
• tabItem内的图标使用三元判断：当selectedTab等于当前Tab的索引时使用填充样式图标，否则使用普通样式

注意：

1. 原代码中tabItem内的.font(.system(size: 30))不会生效，系统会自动统一控制TabBar图标的尺寸，可直接移除避免冗余。如果需要自定义图标大小，需要单独实现自定义TabBar视图。
2. iOS 13及以上的SF Symbol已将旧版home/home.fill替换为house/house.fill，和你原代码中使用的图标命名保持一致，无需额外修改。

内容的提问来源于stack exchange，提问作者AnyOne