[SwiftUI]二、实用控件-(7)使用TabView包含和切换多个页面

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›Swift 教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（let_us_code）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https:////www.cnblogs.com/strengthen/p/12292774.html
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

热烈欢迎，请直接点击！！！

进入博主App Store主页，下载使用各个作品！！！

注：博主将坚持每月上线一个新app！！！

本文演示TableView标签视图的使用，标签视图位于屏幕的底部，可以让用户在几个页面之间进行快速的切换。

效果类似于UITabBarController。

 1 import SwiftUI
 2 
 3 struct ContentView : View
 4 {
 5     var body: some View
 6     {
 7         //标签视图控件的页面位于大括号之内，TabView仅支持类型为文本、图像或LayoutView的标签项，
 8         //其他类型的视图将产生一个可见的空白标签项
 9         TabView
10             {
11                 //添加第一个文本视图，作为标签视图的第一个标签项
12                 Text("The home page.")
13                     //设置文本的字体尺寸
14                     .font(.system(size: 36))
15                     //接着设置文本视图的选项卡，只有设置了选项卡，才会在屏幕底部的选项卡列表里显示对应的标签。
16                     .tabItem({
17                         //添加一个图像视图
18                         Image(systemName: "house")
19                         Image(systemName: "house").scaleEffect(2)
20                         //添加一个文本视图
21                         Text("Home")
22                         //作为底部选项卡列表里的第一个选项卡
23                     })
24                 
25                 //添加第二个文本视图，作为标签视图的第二个标签项
26                 Text("The settings page")
27                     //设置文本的字体尺寸
28                     .font(.system(size: 36))
29                     //接着设置文本视图的选项卡，只有设置了选项卡，才会在屏幕底部的选项卡列表里显示对应的标签。
30                     .tabItem({
31                         //垂直排列视图
32                         VStack{
33                             Image(systemName: "gear")
34                             Text("Settings")
35                         }
36                         //水平排列视图
37                         HStack{
38                             Image(systemName: "gear")
39                             Text("Settings")
40                         }
41                         
42                         Image(systemName: "gear")
43                         Text("Settings")
44                     })
45         }
46     }
47 }
48 
49 #if DEBUG
50 struct ContentView_Previews : PreviewProvider {
51     
52     @State var txtFieldValue : String
53     
54     
55     static var previews: some View {
56         ContentView()
57     }
58 }
59 #endif