SwiftUI-布局-应用Tabbar

朴灿烈づ我的快乐病毒、 2022-09-05 12:48 190阅读 0赞

应用底部 Tabbar, 点击切换 tab。

NavigationView {
        
        TabView {
        
            NavigationLink(destination: HomeView()) {
        
                Text("进入")
            }
            .tabItem {
        
                Image(systemName: "square.fill")
                Text("主页")
            }
            Text("发现界面")
            .tabItem {
        
                Image(systemName: "rectangle.fill")
                Text("发现")
            }
            Text("消息列表")
            .tabItem {
        
                Image(systemName: "rectangle.portrait.fill")
                Text("消息")
            }
            Text("个人信息")
                .tabItem {
        
                    Image(systemName: "person.circle.fill")
                    Text("我的")
                }
        }
    }

## 自定义Tabbar ##

import SwiftUI
    
    struct DTabView: View {
        
        
        var views: [DTabItem]
        var backgroundColor : Color
        
        @Binding var selection:Int
        
        var body: some View {
        
            GeometryReader {
         geometry in
                ZStack(alignment:.top) {
        
                    backgroundColor
                        
                    HStack(){
        
                        ForEach(self.views.indices){
        i in
                            DTabItemView(selected: selection == i, name: self.views[i].name)
                                .frame(maxWidth:.infinity)
                                .onTapGesture {
        
                                    selection = i
                                }
                        }
                    }
                }
            }
    
        }
    }
    
    
    struct DTabItem {
        
        let name:String
    }
    
    struct DTabItemView :View{
        
        let selected :Bool
        let name:String
        
        var body: some View{
        
            Image(selected ? "\(name)_selected": name)
                .frame(width:49, height: 49)
        }
        
    }
    // 使用
    struct DTabView_Previews: PreviewProvider {
        
        static var previews: some View {
        
            DTabView(views: [
                DTabItem(name: "cal"),
                DTabItem(name: "day"),
                DTabItem(name: "user"),
            ], backgroundColor: Color.yellow, selection: .constant(1))
        }
    }