SwiftUI - TabBar 按钮更改

Posted 2023-02-24

【中文标题】SwiftUI - TabBar 按钮更改

【英文标题】：SwiftUI - TabBar Button Change

【发布时间】：2021-02-12 19:39:59

【问题描述】：

您好，我正在学习 SwiftUI，但在尝试构建应用程序时遇到了问题。我的问题是如何制作一个标签栏，在活动时更改systemImage（当主页按钮处于活动状态时，它显示“home.fill”，当用户按下搜索按钮时，主页按钮变为“主页” )。

如果您看到我可以在下面的代码中做出任何改进，我们也很感激。谢谢，祝您有美好的一天，并保持安全。

import SwiftUI

struct ContentView: View 
    
    @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 
                Main_Home()
                .tabItem 
                    Image(systemName: "house")
                    .font(.system(size: 30))
                
                
                Main_Search()
                .tabItem 
                    Image(systemName: "magnifyingglass")
                    .font(.system(size: 30))
                
                
                Main_AddContent()
                .tabItem 
                    Image(systemName: "plus.viewfinder")
                    .font(.system(size: 30))
                
                
                Main_Message()
                .tabItem 
                    Image(systemName: "pencil.circle.fill")
                    .font(.system(size: 30))
                
                
                Main_Profile()
                .tabItem 
                    Image(systemName: "person.crop.circle")
                    .font(.system(size: 30))
                
            
            .accentColor(Color("Reverse"))
            
        
        .background(Color("Normal"))
        .edgesIgnoringSafeArea(.all)
    

【参考方案1】：

这是一个自定义ViewModifier，可用于添加标签项：

public struct TabViewItem<SelectionValue>: ViewModifier where SelectionValue: Hashable 
    @Binding private var selectedIndex: SelectionValue
    private let index: SelectionValue
    private let text: String
    private let imageName: String

    public init(selectedIndex: Binding<SelectionValue>, index: SelectionValue, text: String, imageName: String) 
        self._selectedIndex = selectedIndex
        self.index = index
        self.text = text
        self.imageName = imageName
    

    public func body(content: Content) -> some View 
        content
            .tabItem 
                image
                Text(text)
            
            .tag(index)
    

    private var image: some View 
        guard selectedIndex == index else 
            return Image(systemName: imageName)
        
        let imageName = self.imageName + ".fill"
        if let uiImage = UIImage(systemName: imageName) 
            return Image(uiImage: uiImage)
        
        return Image(systemName: self.imageName)
    

public extension View 
    func tabItem<Selection>(
        _ text: String,
        imageName: String,
        index: Selection,
        selection: Binding<Selection>
    ) -> some View where Selection: Hashable 
        modifier(TabViewItem(selectedIndex: selection, index: index, text: text, imageName: imageName))
    

那么，创建TabView 就更简单了：

struct ContentView: View 
    @State private var selectedTab = 3

    var body: some View 
        TabView(selection: $selectedTab) 
            Text("Main_Home")
                .tabItem("Home", imageName: "house", index: 1, selection: $selectedTab)
            Text("Main_Search")
                .tabItem("Search", imageName: "magnifyingglass", index: 2, selection: $selectedTab)
            Text("Main_AddContent")
                .tabItem("AddContent", imageName: "plus.viewfinder", index: 3, selection: $selectedTab)
            Text("Main_Message")
                .tabItem("Message", imageName: "pencil.circle", index: 4, selection: $selectedTab)
            Text("Main_Profile")
                .tabItem("Profile", imageName: "person.crop.circle", index: 5, selection: $selectedTab)
        
    

注意：上述实现是出于通用目的 - 如果您不需要某些部分（例如标签中的 text），只需将其删除或使其成为可选。