为有牺牲多壮志,敢教日月换新天。

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

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(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

 

posted @ 2020-02-10 21:06  为敢技术  阅读(1038)  评论(0编辑  收藏  举报