SwiftUI 设置底部TabBar（tabItem）

烟花下的孤独

已于 2022-06-06 17:10:46 修改

阅读量3.9k

点赞数 1

于 2022-03-09 11:38:25 首次发布

本文链接：https://blog.csdn.net/u014651417/article/details/123372133

版权

本文介绍了如何在SwiftUI中使用TabView和tabItem创建底部TabBar。通过创建记录当前视图的@State属性，将其绑定到TabView，以及将TableView置于NavigationView下，实现底部TabBar的显示和导航。同时，文章提到了去除下级页面底部tabItem、处理背景色透明问题以及TabView的两种展示方式。

摘要由CSDN通过智能技术生成

前言

xcode 13.2
ios 15.2

在OC、Swift 中底部是UITabBarController，但是在SwiftUI中是设置tabItem

SwiftUI使用用 TabView 和 tabItem () 来创建 TabBar

导航视图非常适用于创建层次化的视图栈，让用户可以层层深入数据，但它们对于不相关的数据则不那么合适。对于那种数据，我们需要用到 SwiftUI 的 TabView，它会在屏幕底部创建一排不带边框的按钮，每次点击不同的按钮显示不同的视图。

除了能让我们点击 tab 项切换视图，SwiftUI 还允许我们通过使用状态来程序化控制当前视图。这种方式需要以下几个步骤：

1、创建一个记录当前正在显示的视图的 @State 属性。

首先是一个记录当前 tab 的状态，把下面这个属性添加到 ContentView：
设置枚举，或者设置int数字都可以

2、把这个属性以 binding 的形式传给 TabView，以便它能够被自动跟踪，并告诉 SwiftUI 对应属性的每种值应该显示哪个 tab。

3、把TableView放到 NavigationView 下面

3.1、使下级页面不再显示底部tabItem

3.2、后续push或当前页面不用再设置NavigationView，（如果设置，会多出一个导航栏的高度）

3.3、设置底部背景色，否则底部是透明颜色

3.4、下面给出了TabView展示的两种方式

具体代码和展示如下

struct ContentView: View {
   
    @State private var selection: Tab = .study
    
    enum Tab {
   
        case

最低0.47元/天解锁文章