SwiftUI TabView 实现 UIKit TabBarController效果
- 选中和非选中设置不同的文本颜色
实现:借助UITabBar来实现 - 选中和非选中设置不同的图片
实现:定义一个状态变量 selection,传入Binding TabView中,tabItem里根据selection 值来设置不同的图片
TabView
struct RootView: View {
@State var selection:Int = 0
init() {
// 设置选中和非选中文字颜色
let appearance = UITabBarAppearance()
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.blue]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor.systemPink]
UITabBar.appearance().standardAppearance = appearance
UITabBar.appearance().scrollEdgeAppearance = appearance
}
var body: some View {
NavigationView {
TabView(selection: $selection) {
AView()
.tabItem {
Label(
title: { Text("A") },
icon: { Image(systemName: selection == 0 ? "book.pages.fill" : "book.pages") }
)
}
.tag(0)
DView()
.tabItem {
Label(
title: { Text("D") },
icon: { Image(systemName: selection == 1 ? "sun.rain.circle.fill" : "sun.rain.circle") }
)
}
.tag(1)
FView()
.tabItem {
Label(
title: { Text("F") },
icon: { Image(systemName: selection == 2 ? "moon.dust.circle.fill" : "moon.dust.circle") }
)
}
.tag(2)
}
}
}
}
#Preview {
RootView()
}