前言：

各位同学大家好，有段时间没有给大家更新文章了，因为最近都在做视频教程哈，所以文章我没及时更新。实在不好意思哈，今天给大家带来一个iOS 里面swift ui 实现的底部导航的demo 那么废话不多说，我们正式开始。

效果图

image.png

开发环境

image.png

. 具体实现

创建一个swiftuiview 的类

//
//  SwiftUIView.swift
//  bottomnavigation
//
//  Created by xuqing on 2022/6/2.
//

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
    
        TabView(selection: /*@START_MENU_TOKEN@*/ /*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {
            PositionView()
                .tabItem {
                    Image(systemName: "safari").imageScale(.large)
                    Text("发现")
            }.tag(1)
           CompanyView()
                .tabItem {
                    Image(systemName: "book.circle").imageScale(.large)
                    Text("书架")
            }.tag(2)
            MessageView()
                .tabItem {
                    Image(systemName: "personalhotspot").imageScale(.large)
                    Text("故事")
            }.tag(3)
               MyView()
                .tabItem {
                    Image(systemName: "person").imageScale(.large)
                    Text("我的")
            }.tag(4)
        }
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }

    
}

这边需要用到的控件是 TabView 底部导航的

TabView(selection: /*@START_MENU_TOKEN@*/ /*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {
            PositionView()
                .tabItem {
                    Image(systemName: "safari").imageScale(.large)
                    Text("发现")
            }.tag(1)
           CompanyView()
                .tabItem {
                    Image(systemName: "book.circle").imageScale(.large)
                    Text("书架")
            }.tag(2)
            MessageView()
                .tabItem {
                    Image(systemName: "personalhotspot").imageScale(.large)
                    Text("故事")
            }.tag(3)
               MyView()
                .tabItem {
                    Image(systemName: "person").imageScale(.large)
                    Text("我的")
            }.tag(4)
        }

我们在tabview 里面添加tabItem 属性 tabItem就是底部个每一个导航的item 里面分别设置图片和文本

    .tabItem {
                    Image(systemName: "person").imageScale(.large)
                    Text("我的")
            }.tag(4)

然后我们分别创建 PositionView CompanyView MessageView MyView 4个子控件分别来填充我们底部导航那栏上面的部分 swift ui 里面是万物基于view 类似flutter.万物基于widget. 然我们在子控件里面去显示想要编写UI即可我这边方便就写了text文本做了一个展示。

//
//  PositionView.swift
//  bottomnavigation
//
//  Created by xuqing on 2022/6/2.
//  职位


import SwiftUI

struct PositionView: View {
    var body: some View {
        Text("职位")
            .padding()
        
    }
}

struct PositionView_Previews: PreviewProvider {
    static var previews: some View {
        PositionView()
    }
}

其余三个子view 类似我就不重复展示了有兴趣的同学可以下载代码去看哈。

最后总结：

swift.ui 使用这种声明式UI 然后后现成的控件来实现底部导航这种效果比较起原来 uikt 是要方便很多的。有兴趣的可以自己敲一敲不过这个只能运行在 iOS13 以上的设备所以低版本无法运行。最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错，麻烦给关注和star，小弟在这里