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
//
// 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))
}
}