SwiftUI自定义一个底部导航栏

效果图

代码实现

import SwiftUI


enum Tab: CaseIterable {
    case home
    case book
    case person
    case setting
    
    var text:String {
        switch self {
        case .home:
            "主页"
        case .book:
            "阅读"
        case .person:
            "好友"
        case .setting:
            "设置"
        }
    }
    
    var icon:String {
        switch self {
        case .home:
            "house"
        case .book:
            "book"
        case .person:
            "person"
        case .setting:
            "gearshape"
        }
    }
    
}

struct Tabs01FinalView: View {
    
    @State var currentTab:Tab = .home
    
    var body: some View {
        
        VStack{
            
            
            
            TabView(selection:$currentTab) {
                Text("主页页面")
                    .tag(Tab.home)
                
                Text("阅读页面")
                    .tag(Tab.book)
                Text("好友页面")
                    .tag(Tab.person)
                Text("设置页面")
                    .tag(Tab.setting)
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .font(.title.bold())
            
            
            tabs()
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .background(Color(.systemGray6))
        
    }
    
    func tabs() -> some View{
        HStack{
            
            ForEach(Tab.allCases, id:\.self){ item in
                Button {
                    currentTab = item
                } label: {
                    VStack(spacing:5){
                        Image(systemName: currentTab == item ? item.icon + ".fill" : item.icon)
                            .font(.title2)
                        Text(item.text)
                    }
                    .font(.subheadline)
                    .foregroundStyle(currentTab == item ? .red : .black)
                    .frame(maxWidth: .infinity)
                }

            }
            
        }
        .padding(.vertical,10)
        .padding(.horizontal)
        .frame(maxWidth: .infinity)
        .background(Color(.systemGray5))
    }
    
}

#Preview {
    Tabs01FinalView()
}