TabView 初始化与自定义 TabBar 属性相关

SWift TabView 与 UIKit 中的 UITabBarController 如出一辙.在 TabView 组件中配置对应的图片和标题;
其中,Tag 用来设置不同 TabView 可动态设置当前可见 Tab;另也有一些常用的属性与 UIKit 中的类似,具体可以按需参考 api 中属性进行单独修改定制;
在 iOS 15.0 之后还可设置角标记 .badge

一、初始化

// MARK: ****** TabView
TabView {Text("").tabItem {Image("homePage_tabBar_Normal_Image")Text("首页")}.tag(0)
//                .badge(Text("new")) // iOS 15.0Text("").tabItem {Image("BookShelf_tabBar_Normal_Image")Text("医师在线")}.tag(1)Text("").tabItem {Image("Exam_tabbar_Normal_Image")Text("考试")}.tag(2)Text("").tabItem {Image("Integration_tabbar_Normal_Image")Text("教学")}.tag(3)Text("").tabItem {Image("my_tabBar_Normal_Image")Text("我的")}.tag(4)
}

二、简易修改 TabBar 属性相关

对 TabBar 标签文字和背景简易修改可通过如下方式:

方式一,直接通过 onAppear 进行修改设定

// MARK: ****** TabView
TabView {Text("").tabItem {Image("homePage_tabBar_Normal_Image")Text("首页")}.tag(0)
//                .badge(Text("new")) // iOS 15.0Text("").tabItem {Image("BookShelf_tabBar_Normal_Image")Text("医师在线")}.tag(1)Text("").tabItem {Image("Exam_tabbar_Normal_Image")Text("考试")}.tag(2)Text("").tabItem {Image("Integration_tabbar_Normal_Image")Text("教学")}.tag(3)Text("").tabItem {Image("my_tabBar_Normal_Image")Text("我的")}.tag(4)
}
.onAppear { // 渲染时// MARK: UIKit 方式// 标签栏背景色UITabBar.appearance().backgroundColor = UIColor.orange// 标签文字未选中颜色UITabBar.appearance().unselectedItemTintColor = UIColor.white
}

方式二,也可在 init 中进行重设定

struct YHContentView: View {@Environment(\.presentationMode) private var mode// MARK: - ****** 初始化 ******init() {// MARK: UIKit 方式// 标签栏背景色UITabBar.appearance().backgroundColor = UIColor.orange// 标签文字未选中颜色UITabBar.appearance().unselectedItemTintColor = UIColor.white}// MARK: - ****** 声明 ******// 创建变量(私有变量 private 外部不可调用)// 通过 @State 修饰变量,用来绑定至所对应视图上,该变量即真实数据源与视图绑定并动态更改数据@State private var weightText: String = ""@State private var heightText: String = ""@State var isToggleState: Bool = true// MARK: - ****** UI ******var body: some View {// MARK: ****** TabViewTabView {Text("").tabItem {Image("homePage_tabBar_Normal_Image")Text("首页")}.tag(0)//                .badge(Text("new")) // iOS 15.0Text("").tabItem {Image("BookShelf_tabBar_Normal_Image")Text("医师在线")}.tag(1)Text("").tabItem {Image("Exam_tabbar_Normal_Image")Text("考试")}.tag(2)Text("").tabItem {Image("Integration_tabbar_Normal_Image")Text("教学")}.tag(3)Text("").tabItem {Image("my_tabBar_Normal_Image")Text("我的")}.tag(4)}}// MARK: - ****** 方法相关 ******// MARK: 导航返回private func goback() {withAnimation {self.mode.wrappedValue.dismiss()}}
}

三、自定义 TabBar 属性

在官方 api 中提供了很多属性可供自定制化修改,如下简单列举一些常用的属性参考
注:其作用域需要基于 iOS 15 以上版本

// MARK: - ****** 初始化 ******
init() {if #available(iOS 15.0, *) {// MARK: SwiftUI 方式,作用域 iOS 15 以上版本let itemApperance = UITabBarItemAppearance()// 标签图标颜色(未选中 & 选中)itemApperance.normal.iconColor = UIColor.grayitemApperance.selected.iconColor = UIColor.red// 标签文字颜色(未选中 & 选中)itemApperance.normal.titleTextAttributes = [.foregroundColor: UIColor.green]itemApperance.selected.titleTextAttributes = [.foregroundColor: UIColor.white]// 标签气泡背景颜色itemApperance.normal.badgeBackgroundColor = UIColor.blueitemApperance.selected.badgeBackgroundColor = UIColor.yellow// 标签气泡文字颜色itemApperance.normal.badgeTextAttributes = [.foregroundColor: UIColor.gray]itemApperance.selected.badgeTextAttributes = [.foregroundColor: UIColor.black]// 标签气泡位置itemApperance.normal.badgePositionAdjustment = UIOffset(horizontal: -10, vertical: -10)itemApperance.selected.badgePositionAdjustment = UIOffset(horizontal: 10, vertical: 10)// 标签气泡标题位置itemApperance.normal.badgeTitlePositionAdjustment = UIOffset(horizontal: -10, vertical: -10)itemApperance.selected.badgeTitlePositionAdjustment = UIOffset(horizontal: 10, vertical: 10)let appearance = UITabBarAppearance()// 将自定义 item 属性应用到 UITabBarAppearance 的 stackedLayoutAppearance 属性中appearance.stackedLayoutAppearance = itemApperance// TabBar 背景图appearance.backgroundImage = UIImage(named: "")// TabBar 背景色appearance.backgroundColor = UIColor.orange// TabBar 顶部线条颜色appearance.shadowColor = UIColor.yellow// TabBar 子元素布局样式appearance.stackedItemPositioning = .centered // 默认: automatic 填充满: fill 居中: centered// TabBar 子元素间距appearance.stackedItemSpacing = 1000// 将自定义配置同步到应用中UITabBar.appearance().scrollEdgeAppearance = appearance // 作用域 iOS 15 以上版本} else {// MARK: UIKit 方式// 标签栏背景色UITabBar.appearance().backgroundColor = UIColor.orange// 标签文字未选中颜色UITabBar.appearance().unselectedItemTintColor = UIColor.white}
}

---

以上便是此次分享的全部内容，希望能对大家有所帮助!