SwiftUI-布局-应用Tabbar

应用底部 Tabbar, 点击切换 tab。
tab 内点击进入详情View，隐藏底部Tabbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//
//  DTabView.swift
//  cdiary
//
//  Created by hanks on 2021/8/17.
//

import SwiftUI

struct DTabView: View {
    
    var views: [DTabItem]
    var backgroundColor : Color
    
    @Binding var selection:Int
    
//    init(_ views:[DTabItem], _ backgroundColor:Color) {
//        self.views = views
//        self.backgroundColor = backgroundColor
//    }
    
    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))
    }
}