SwiftUI 2.0 TabView 基础使用教程含源码

一、TabView 基础

使用交互式用户界面元素在多个子视图之间切换的视图。

struct TabView<SelectionValue, Content> where SelectionValue : Hashable, Content : View

选项卡视图仅支持Text，Image或Image后跟Text的选项卡项。 传递任何其他类型的视图都将导致可见但为空的标签项。

二、TabView风格

• DefaultTabViewStyle
  默认的TabView样式。
• PageTabViewStyle
  一个TabViewStyle，它实现页面滚动效果。
• CarouselTabViewStyle
  一个实现轮播TabView交互和外观的TabViewStyle。仅支持watchOS
• TabViewStyle
  TabView的外观和交互的规范。

三、实战代码

基础代码

import SwiftUI

@main
struct sf2_tabApp: App {
    var body: some Scene {
        WindowGroup {
            TabView {
                Text("The First Tab")
                    .tabItem {
                        Image(systemName: "1.square.fill")
                        Text("First")
                    }
                Text("Another Tab")
                    .tabItem {
                        Image(systemName: "2.square.fill")
                        Text("Second")
                    }
                Text("The Last Tab")
                    .tabItem {
                        Image(systemName: "3.square.fill")
                        Text("Third")
                    }
            }
            .font(.headline)
            .tabViewStyle(PageTabViewStyle())
        }
    }
}

高级代码

Jietu20200625-101605.gif

《SwiftUI 2.0 TabView 如何实现轮播图与分页Carousel效果PageTabViewStyle(教程源码)》

推荐

基础文章推荐

• 《SwiftUI是什么，听听大牛们如何说》

经典教程推荐

• 更新近百篇SwiftUI教程《SwiftUI2020教程》
• 帮您突破数据存储难关《SwiftUI vs CoreData数据存储解决方案》

技术源码推荐

推荐文章

CoreData篇

• SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
• SwiftUI进阶之存储用户状态实现登录与登出
• SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

Combine篇

• 一篇文章学懂弄通SwiftUI与Combine(含轮播动画App源码)

TextField篇

• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• 《SwiftUI实战之TextField风格自定义与formatters》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
• 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

• SwiftUI JSON文件下载、存储、解析和展示(代码大全)

---

一篇文章系列

• SwiftUI一篇文章全面掌握List(教程和源码)
• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• SwiftUI一篇文章全面掌握Picker,解决数据选择(教程和源码)
• SwiftUI一篇文章全面掌握Form(教程和源码)
• SwiftUI Color 颜色一篇文章全解决

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970