SwiftUI中TabView组件的常规使用

目录
  • 前言
  • TabView常规用法1
  • TabView常规用法2
  • TabView常规用法3
  • TabView常规用法4---做轮播图
  • 总结

前言

在UIKit中设置多个tabbar展示需要使用到UITabBarController 在SwiftUI中 由TabView组件来进行实现,同时TabView也可以实现PageViewController的效果,

TabView常规用法1

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("设置四")
            }
        }
    }
}

tabview此时不会绑定对应的selectedIndex,只能在初始化的时候设置对应的index,不能动态设置要展示的tabbar的index,

TabView常规用法2

除了上面的点击tabview切换视图,SwiftUI还允许我们使用状态来控制当前视图。为此 我们需要四步

  • 1.创建一个记录当前显示视图的@State 属性
  • 2.跳转到其他tab中的视图修改该属性
  • 3.该属性以Binding的形式传给TabView,便于自动跟踪
  • 4.告诉SwiftUI 那种值应该显示那个Tab

具体的如下:

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)
        }
    }
}

上面代码中当我们点击 设置一界面中的text 这时会修改selectedTab,而我们在上面把TabViewselectedTab绑定到一起了,修改selectedTab的值 TabView也会切换对应展示的视图。

TabView常规用法3

在上面的用法中没有办法对TabbarItem中的图片做选中和非选中的切换,上面截图中的变化只是系统对选中和非选中的一个颜色的处理,事实上我们的图片都是同一个。在实际项目中,点击tabbar切换视图 底部的图片也会跟着变化,而且在其他界面中也会动态的修改当前TabView的index。

  • 1.创建一个环境对象,在App启动的时候设置要展示的初始值,
  • 2.其他要修改的地方 获取环境变量并修改
  • 3.TabView和环境变量相互绑定,有一方修改 其他方也会跟着变化

1.定义一个全局的环境变量

import SwiftUI
import Combine

final class TabBarIndexObserver: ObservableObject {
   @Published
   var tabSelected: TabBarItem = .Home
}

2.定义为全局的环境变量 @EnvironmentObject

import SwiftUI

@main
struct SwiftUITestApp: App {
   var body: some Scene {
       WindowGroup {
           ContentView().environmentObject(TabBarIndexObserver())
       }
   }
}

3.绑定TabView和环境变量,其中要自己自定义一个TabBarItem对象,主要是根据当前TabView中的index 返回 image 和 title,每个展示的视图都要设置tag 否则绑定视图一直展示的都是0,不会切换到其他视图。图片资源可以自己设置。

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)
   }
}

TabView中进行对应的设置,给每一个视图设置一个唯一的标识,用这个标识符作为被选中的tab,这些标识符被称为Tag

import SwiftUI

struct ContentView: View {
   @EnvironmentObject
   private var tabbarIndex: TabBarIndexObserver

   private var selectedTab: Binding<Int> {
     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) -> some View {
       print(selectedTab.wrappedValue)
     return VStack {
       tab.rawValue == selectedTab.wrappedValue ? tab.selectedImage : tab.normalImage
       Text(tab.titleStr)
     }
   }
}

TabView常规用法4---做轮播图

TabView实现轮播图时不用设置tabItem 需要指定tabView的显示类型为.tabViewStyle(PageTabViewStyle()) 具体代码如下

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 > 3{
                   self.bannerIndex = 0
               }
           }
           .onAppear{

           }.onDisappear{
               self.timer.upstream.connect().cancel()
           }
       } else {

       }
   }
}

其中设置了一个定时器,具体效果如下,如果想要动画 可以自己加上去

总结

到此这篇关于SwiftUI中TabView组件常规使用的文章就介绍到这了,更多相关SwiftUI TabView使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • SwiftUI中TabView组件的常规使用

    目录 前言 TabView常规用法1 TabView常规用法2 TabView常规用法3 TabView常规用法4---做轮播图 总结 前言 在UIKit中设置多个tabbar展示需要使用到UITabBarController 在SwiftUI中 由TabView组件来进行实现,同时TabView也可以实现PageViewController的效果, TabView常规用法1 import SwiftUI struct ZTMinePageView: View { var body: some

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • Android中Intent组件的入门学习心得

    目录 什么是 Intent ? Intent 的类型? Intent 的组成 显式 Intent 的使用 隐式 Intent 的使用 总结 什么是 Intent ? Intent是Android开发中一个非常重要且常用的类,Intent是一个消息传递对象,可以用来从其他应用组件请求操作,使用Intent可以在一个组件中同一APP中的另一个组件或者是启动另一个APP的组件(这里所说的组件包括Activity.Service和Broadcast). ctivity.service和broadcast

  • vue中兄弟组件传值的两种方式小结

    目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到

  • Vue中父组件向子组件通信的方法

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s

  • vue中各组件之间传递数据的方法示例

    前言 本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域 在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.

  • vue中component组件的props使用详解

    本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的

  • asp中xmlhttp组件发包

    asp中xmlhttp组件发包 写的一个小偷函数,注意红色代码部分,其他的自己添加吧! Function PostHttpPageFrom(HttpUrl,stra,FromUrl)    Dim Http Set Http=server.createobject("MSXML2.XMLHTTP")    Http.open "POST",HttpUrl,False    Http.setrequestheader "content-length"

  • C++中COM组件初始化方法实例分析

    本文实例讲述了C++中COM组件初始化方法.分享给大家供大家参考.具体如下: 这里使用BCB 在使用TADOConnect等组件时需要进行初始化 调用接口 : CoInitialize(NULL);//初始化COM套件 CoUninitialize();//释放COM套件 在DLL入口中调用: static bool isCoInitialize = false; //是否是自己进行的初始化 int WINAPI DllEntryPoint(HINSTANCE hinst, unsigned l

  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to

随机推荐