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.0
    Text("").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.0
    Text("").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: ****** TabView
        TabView {
            Text("").tabItem {
                Image("homePage_tabBar_Normal_Image")
                Text("首页")
            }.tag(0)
        //                .badge(Text("new")) // iOS 15.0
            Text("").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.gray
        itemApperance.selected.iconColor = UIColor.red
        // 标签文字颜色(未选中 & 选中)
        itemApperance.normal.titleTextAttributes = [.foregroundColor: UIColor.green]
        itemApperance.selected.titleTextAttributes = [.foregroundColor: UIColor.white]
        // 标签气泡背景颜色
        itemApperance.normal.badgeBackgroundColor = UIColor.blue
        itemApperance.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
    }
}

---

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