如何在SwiftUI中制作多彩的TabView？[復制]

我有下一個TabView：

TabView(selection: self.$viewModel.selection) {
    StoriesView()
        .tabItem {
            Label("Stories", systemImage: "play.square") // I need a yellow icon here
        }
        .tag("stories")
    MessengerView()
        .tabItem {
            Label("Messenger", systemImage: "message") // I need a green icon here
        }
        .tag("messenger")
    ProfileView()
        .tabItem {
            Label("Profile", systemImage: "person") // I need a red icon here
        }
        .tag("profile")
}

它作業得很好，但我不知道如何為每個標簽圖示設定自己的顏色。我已經嘗試了所有可能的方法foregroundColor()，accentColor()等等tint()……沒有任何作用。它會更改所有選項卡圖示的顏色或不更改任何圖示。

怎么進去TabView？

PS也許這是一個菜鳥的問題，但我真的受到了挑戰。

uj5u.com熱心網友回復：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                HStack(spacing: 40){
                    NavigationLink {
                        ContentView()
                    } label: {
                        VStack{
                            Image(systemName: "play.square")
                            Text("Stories")
                        }
                        .foregroundColor(.yellow)
                        .bold()
                    }
                    
                    NavigationLink {
                        ContentView()
                    } label: {
                        VStack{
                            Image(systemName: "message")
                            Text("Messenger")
                        }
                        .foregroundColor(.green)
                        .bold()
                    }
                    
                    NavigationLink {
                        ContentView()
                    } label: {
                        VStack{
                            Image(systemName: "person")
                            Text("Profile")
                        }
                        .foregroundColor(.red)
                        .bold()
                    }

                }
            }
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我做了一個定制的。您可以根據需要進行更改。我希望這會對你有所幫助。

就像您可以在更改頁面時更改不透明度并隱藏物體選項卡視圖的后退按鈕一樣。

uj5u.com熱心網友回復：

嘿，我就是這樣做的。我只是使用了 Zstacks 并添加了 rectangle() 并為其分配了顏色。

 TabView(selection: $tabSelection) {
        //MARK: ZStack View Starts from Here

        ZStack {
            //MARK: VStack View Starts from Here

            VStack {
                HomeView(tabSelection: $tabSelection, selectedCategory: $selectedCategory)
                Rectangle()
                    .fill(Color.clear)
                    .frame(height: 20)
                    .background(Color.WhiteColor)
            }
        }
        .tabItem{
            
            Image("HomeIcon")
                .renderingMode(.template)
                .foregroundColor(Color(.secondaryLabel))
            Text("")
        }
        .tag(1)
        
        //MARK: ZStack View Starts from Here

        ZStack {
            //MARK: VStack View Starts from Here

            VStack {
               
                CatalogView(valueToPass: selectedCategory)
                    Rectangle()
                        .fill(Color.clear)
                        .frame(height: 20)
                        .background(Color.WhiteColor)

                
            }
        }
        
        
        .tabItem{
            Image("BagIcon")
                .renderingMode(.template)
                .foregroundColor(Color(.secondaryLabel))
            Text("")
        }
        .tag(2)
        //MARK: ZStack View Starts from Here

        ZStack {
            
            
            VStack {
                CreatePosterView()
                Rectangle()
                    .fill(Color.clear)
                    .frame(height: 20)
                    .background(Color.WhiteColor)
            }
        }
        
        
        .tabItem{
            Image("CameraIcon")
            
            Text("")
        }
        .tag(3)
        
        //MARK: ZStack View Starts from Here

        ZStack {
            //MARK: Vstack View Starts from Here

            
            VStack {
                CartView()
                Rectangle()
                    .fill(Color.clear)
                    .frame(height: 20)
                    .background(Color.WhiteColor)
            }
        }
        
        .tabItem{
            Image("CartIcon")
                .renderingMode(.template)
                .foregroundColor(Color(.secondaryLabel))
            Text("")
        }
        .tag(4)
        //MARK: ZStack View Starts from Here

        ZStack {
            
            //MARK: VStack View Starts from Here

            VStack {
                ProfileView()
                Rectangle()
                    .fill(Color.clear)
                    .frame(height: 20)
                    .background(Color.WhiteColor)
            }
        }
        
        
        
        .tabItem{
            Image("ProfileIcon")
                .renderingMode(.template)
                .foregroundColor(Color(.secondaryLabel))
            Text("")
        }
        .tag(5)

        
        
    }
    .background(Color.white)
    .accentColor(Color.BlackColor)
    
    
    

標籤：IOS迅速迅捷选项卡视图

上一篇：@Environment(\.managedObjectContext)vsstaticlet共享屬性

下一篇：了解崩潰日志中的iOS堆疊跟蹤