使用TabView创建底部导航栏的小案例
程序员文章站
2024-03-24 12:50:46
...
import SwiftUI
struct FirstUIView: View {
@State var show = true
var body: some View {
TabView{
PageOneUIView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
PageTwoUIView()
.tabItem {
Image(systemName: "gear")
Text("Gear")
}
PageThreeUIView()
.tabItem {
Image(systemName: "person")
Text("Me")
}
}
}
}
struct PageOneUIView:View{
var body: some View{
VStack(alignment: .leading, content: {
HStack{
Spacer()
}
Text("Page One")
Spacer()
})
.background(Color.gray.opacity(0.3))
}
}
struct PageTwoUIView:View{
var body: some View{
VStack(alignment: .leading, content: {
HStack{
Spacer()
}
Text("Page Two !")
Spacer()
})
.background(Color.purple.opacity(0.3))
}
}
struct PageThreeUIView:View{
var body: some View{
VStack(alignment: .leading, content: {
HStack{
Spacer()
}
Text("Page Three !")
Spacer()
})
.background(Color.orange.opacity(0.3))
}
}
struct FirstUIView_Previews: PreviewProvider {
static var previews: some View {
FirstUIView()
}
}
上一篇: ToolBar的使用
下一篇: toolbar使用