欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用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()
    }
}

相关标签: SwiftUI

上一篇: ToolBar的使用

下一篇: toolbar使用