根据选择的选项卡更改 Tabview 颜色-Swiftui
Change Tabview color based on which tab is selected -Swiftui
我正在尝试查看是否可以根据选择的选项卡项更改底部选项卡视图的颜色。目前我可以在 init 中使用以下代码使 tabview 栏清晰。
let tabBar = UITabBar.appearance()
init() {
tabBar.barTintColor = UIColor.clear
tabBar.backgroundImage = UIImage()
tabBar.shadowImage = UIImage()
}
...
TabView(selection: $selectedTab) {
FirstView()
.tabItem{
Text("First")
}
SecondView()
.tabItem{
Text("Second")
}
}
.onAppear{
setTabViewBackground()
}
func setTabViewBackground() {
if selectedTab != 0 {
tabBar.barTintColor = UIColor.blue
}
}
尝试在主体重绘时仅触发 func,如果这种声明式风格最适合我,但根本不改变 tabview 背景,我就知道了。
任何 .appearance
影响在 外观本身之后 创建的实例。所以解决方法是re-createTabView
外观配置改变后
这是一个方法演示。测试 Xcode 12 / iOS 14.
struct DemoView: View {
let tabBar = UITabBar.appearance()
init() {
tabBar.barTintColor = UIColor.red
}
@State private var selectedTab = 0 // preserves selected tab
var body: some View {
TabView(selection: $selectedTab) {
Text("FirstView")
.tabItem{
Text("First")
}.tag(0)
Text("SecondView")
.tabItem{
Text("Second")
}.tag(1)
}
.onAppear {
setTabViewBackground() // called, because `id` is below
}
.id(selectedTab) // recreates entire above view with new tabbar
}
func setTabViewBackground() {
tabBar.barTintColor = selectedTab != 0 ? .blue : .red
}
}
我正在尝试查看是否可以根据选择的选项卡项更改底部选项卡视图的颜色。目前我可以在 init 中使用以下代码使 tabview 栏清晰。
let tabBar = UITabBar.appearance()
init() {
tabBar.barTintColor = UIColor.clear
tabBar.backgroundImage = UIImage()
tabBar.shadowImage = UIImage()
}
...
TabView(selection: $selectedTab) {
FirstView()
.tabItem{
Text("First")
}
SecondView()
.tabItem{
Text("Second")
}
}
.onAppear{
setTabViewBackground()
}
func setTabViewBackground() {
if selectedTab != 0 {
tabBar.barTintColor = UIColor.blue
}
}
尝试在主体重绘时仅触发 func,如果这种声明式风格最适合我,但根本不改变 tabview 背景,我就知道了。
任何 .appearance
影响在 外观本身之后 创建的实例。所以解决方法是re-createTabView
外观配置改变后
这是一个方法演示。测试 Xcode 12 / iOS 14.
struct DemoView: View {
let tabBar = UITabBar.appearance()
init() {
tabBar.barTintColor = UIColor.red
}
@State private var selectedTab = 0 // preserves selected tab
var body: some View {
TabView(selection: $selectedTab) {
Text("FirstView")
.tabItem{
Text("First")
}.tag(0)
Text("SecondView")
.tabItem{
Text("Second")
}.tag(1)
}
.onAppear {
setTabViewBackground() // called, because `id` is below
}
.id(selectedTab) // recreates entire above view with new tabbar
}
func setTabViewBackground() {
tabBar.barTintColor = selectedTab != 0 ? .blue : .red
}
}