世哥 發表於 2022-6-16 11:56:51

SwiftUI中TabView组件的常规使用

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>前言</li><li>TabView常规用法1</li><li>TabView常规用法2</li><li>TabView常规用法3</li><li>TabView常规用法4---做轮播图</li><li>总结</li></ul></div><p class="maodian"></p><h2>前言</h2>
<p>在UIKit中设置多个tabbar展示需要使用到<code>UITabBarController</code> 在SwiftUI中 由<code>TabView</code>组件来进行实现，同时<code>TabView</code>也可以实现PageViewController的效果，</p>
<p class="maodian"></p><h2>TabView常规用法1</h2>
<div class="jb51code"><pre class="brush:java;">import SwiftUI

struct ZTMinePageView: View {
    var body: some View {
      TabView{
            Text("设置一").tabItem {
                Image(systemName: "arkit").foregroundColor(.red)
                Text("设置一")
            }
            
            Text("设置二").tabItem {
                Image(systemName: "star")
                Text("设置二")
            }
            
            Text("设置三").tabItem {
                Image(systemName: "star").foregroundColor(.red)
                Text("设置三")
            }
            
            Text("设置四").tabItem {
                Image(systemName: "star").foregroundColor(.red)
                Text("设置四")
            }
      }
    }
}</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202206/2022616115123412.jpg?2022516115130" /></p>
<p>tabview此时不会绑定对应的selectedIndex，只能在初始化的时候设置对应的index，不能动态设置要展示的tabbar的index，</p>
<p class="maodian"></p><h2>TabView常规用法2</h2>
<p>除了上面的点击tabview切换视图，<code>SwiftUI</code>还允许我们使用状态来控制当前视图。为此 我们需要四步</p>
<ul><li>1.创建一个记录当前显示视图的<code>@State</code> 属性</li><li>2.跳转到其他tab中的视图修改该属性</li><li>3.该属性以<code>Binding</code>的形式传给TabView，便于自动跟踪</li><li>4.告诉SwiftUI 那种值应该显示那个Tab</li></ul>
<p>具体的如下：</p>
<div class="jb51code"><pre class="brush:java;">import SwiftUI

struct ZTTestPageView: View {
   
    @State private var selectedTab = 0
   
    var body: some View {
      TabView(selection: $selectedTab){
            Text("设置一").tabItem {
                Image(systemName: "arkit").foregroundColor(.red)
                Text("设置一")
            }.onTapGesture {
                self.selectedTab = 3
            }.tag(0)
            
            Text("设置二").tabItem {
                Image(systemName: "star")
                Text("设置二")
            }.tag(1)
            
            Text("设置三").tabItem {
                Image(systemName: "star").foregroundColor(.red)
                Text("设置三")
            }.tag(2)
            
            Text("设置四").tabItem {
                Image(systemName: "star").foregroundColor(.red)
                Text("设置四")
            }.tag(3)
      }
    }
}</pre></div>
<p>上面代码中当我们点击 设置一界面中的text 这时会修改<code>selectedTab</code>,而我们在上面把<code>TabView</code>和<code>selectedTab</code>绑定到一起了，修改<code>selectedTab</code>的值 <code>TabView</code>也会切换对应展示的视图。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202206/2022616115446677.jpg?2022516115454" /></p>
<p class="maodian"></p><h2>TabView常规用法3</h2>
<p>在上面的用法中没有办法对<code>TabbarItem</code>中的图片做选中和非选中的切换，上面截图中的变化只是系统对选中和非选中的一个颜色的处理，事实上我们的图片都是同一个。在实际项目中，点击tabbar切换视图 底部的图片也会跟着变化，而且在其他界面中也会动态的修改当前<code>TabView</code>的index。</p>
<ul><li>1.创建一个环境对象，在App启动的时候设置要展示的初始值，</li><li>2.其他要修改的地方 获取环境变量并修改</li><li>3.<code>TabView</code>和环境变量相互绑定，有一方修改 其他方也会跟着变化</li></ul>
<p>1.定义一个全局的环境变量</p>
<div class="jb51code"><pre class="brush:java;">import SwiftUI
import Combine

final class TabBarIndexObserver: ObservableObject {
   @Published
   var tabSelected: TabBarItem = .Home
}</pre></div>
<p>2.定义为全局的环境变量 <code>@EnvironmentObject</code></p>
<div class="jb51code"><pre class="brush:java;">import SwiftUI

@main
struct SwiftUITestApp: App {
   var body: some Scene {
       WindowGroup {
         ContentView().environmentObject(TabBarIndexObserver())
       }
   }
}</pre></div>
<p>3.绑定<code>TabView</code>和环境变量,其中要自己自定义一个<code>TabBarItem</code>对象，主要是根据当前<code>TabView</code>中的index 返回 image 和 title，每个展示的视图都要设置tag 否则绑定视图一直展示的都是0，不会切换到其他视图。图片资源可以自己设置。</p>
<div class="jb51code"><pre class="brush:java;">import SwiftUI

enum TabBarItem: Int {
   case Home
   case Living
   case Message
   case Mine
   
   var titleStr: String {
       switch self {
       case .Home:
         return "首页"
       case .Living:
         return "直播"
       case .Message:
         return "消息"
       case .Mine:
         return "我的"
       }
   }
   
   var normalImage: Image {
       var imageName = ""
       switch self {
       case .Home:
         imageName = ""
       case .Living:
         imageName = ""
       case .Message:
         imageName = ""
       case .Mine:
         imageName = ""
       }
       return Image(imageName)
   }
   
   var selectedImage: Image {
       var imageName = ""
       switch self {
       case .Home:
         imageName = ""
       case .Living:
         imageName = ""
       case .Message:
         imageName = ""
       case .Mine:
         imageName = ""
       }
       return Image(imageName)
   }
}</pre></div>
<p>在<code>TabView</code>中进行对应的设置，给每一个视图设置一个唯一的标识，用这个标识符作为被选中的tab，这些标识符被称为<code>Tag</code></p>
<div class="jb51code"><pre class="brush:java;">import SwiftUI

struct ContentView: View {
   @EnvironmentObject
   private var tabbarIndex: TabBarIndexObserver
   
   private var selectedTab: Binding&lt;Int&gt; {
   Binding(
       get: { tabbarIndex.tabSelected.rawValue },
       set: {
         tabbarIndex.tabSelected = TabBarItem(rawValue: $0)!
       }
   )
   }
   // 设置对应的normal 和 selected图片 要设置TabView 绑定状态 和 每个View的tag值，在点击的时候把值传递给对应的view
   var body: some View {
    TabView(selection: selectedTab) {
      ZTHomePageView()
            .tabItem {tabItem(for: .Home)}
            .tag(TabBarItem.Home.rawValue)
      ZTLivingPageView()
            .tabItem {tabItem(for: .Living)}
            .tag(TabBarItem.Living.rawValue)
      ZTMessagePageView()
            .tabItem {tabItem(for: .Message)}
            .tag(TabBarItem.Message.rawValue)
      ZTMinePageView()
            .tabItem { tabItem(for: .Mine) }
            .tag(TabBarItem.Mine.rawValue)
    }
    .font(.headline)
    .accentColor(Color.red) // 设置 tab bar 选中颜色

   }

   private func tabItem(for tab: TabBarItem) -&gt; some View {
       print(selectedTab.wrappedValue)
   return VStack {
       tab.rawValue == selectedTab.wrappedValue ? tab.selectedImage : tab.normalImage
       Text(tab.titleStr)
   }
   }
}</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202206/2022616115545200.jpg?2022516115551" /></p>
<p class="maodian"></p><h2>TabView常规用法4---做轮播图</h2>
<p><code>TabView</code>实现轮播图时不用设置tabItem 需要指定tabView的显示类型为<code>.tabViewStyle(PageTabViewStyle())</code> 具体代码如下</p>
<div class="jb51code"><pre class="brush:java;">struct ZTMinePageView: View {
   
   //设置定时器 每2s运行一次 mode为 common 在主线程执行 autoconnect 立即开始定时器
   let timer = Timer.publish(every: 2, tolerance: 0.5, on: .main, in: .common).autoconnect()
   
   @State private var bannerIndex = 0
   
   var body: some View {
       if #available(iOS 15.0, *) {
         TabView(selection: $bannerIndex){
               Image("test_1").resizable().scaledToFit().tag(0)
               Image("test_2").resizable().scaledToFit().tag(1)
               Image("test_3").resizable().scaledToFit().tag(2)
               Image("test_4").resizable().scaledToFit().tag(3)
         }
         .background(Color(red: 0.5, green: 0.9, blue: 0.3, opacity: 0.3))
         .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
         .onReceive(timer){ time in
               self.bannerIndex += 1
               if self.bannerIndex &gt; 3{
                   self.bannerIndex = 0
               }
         }
         .onAppear{
               
         }.onDisappear{
               self.timer.upstream.connect().cancel()
         }
       } else {
         
       }
   }
}</pre></div>
<p>其中设置了一个定时器，具体效果如下，如果想要动画 可以自己加上去</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202206/2022616115625700.jpg?2022516115631" /></p>
<p class="maodian"></p><h2>总结</h2>
<p>到此这篇关于SwiftUI中TabView组件常规使用的文章就介绍到这了,更多相关SwiftUI&nbsp;TabView使用内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>SwiftUI&nbsp;登录界面布局实现示例详解</li><li>如何利用SwiftUI实现可缩放的图片预览器</li><li>SwiftUI图片缩放、拼图等处理教程</li><li>SwiftUI中@ViewBuilder的相关知识点解密</li><li>SwiftUI学习之state和Binding的区别浅析</li><li>SwiftUI 引导页界面实现示例</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: SwiftUI中TabView组件的常规使用