【问题标题】:Change Tabview color based on which tab is selected -Swiftui根据选择的选项卡更改 Tabview 颜色 -Swiftui
【发布时间】:2020-12-03 20:07:02
【问题描述】:

我正在尝试查看是否可以根据选择的选项卡项来更改底部选项卡视图的颜色。目前我可以在 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 背景。

【问题讨论】:

  • 您可以扩展 UITabBarController 以使其工作。该页面的大约一半是有关如何执行此操作的参考。寻找“新方式:UITabBarAppearance”后的代码,schwiftyui.com/swiftui/customizing-your-tabviews-bar-in-swiftui
  • 那篇文章是我开始的,但在 Xcode 12 中得到了奇怪的结果。我最终只是将我自己的 tabview 作为一个 hstack 按钮来更改有条件地触发其他 4 个视图的绑定。它的代码比文章中的要少,但想知道是否有任何真正的缺点。

标签: ios swift swiftui uitabbar tabview


【解决方案1】:

任何.appearance 都会影响在外观本身之后创建的实例。所以解决方案是在外观配置改变后重新创建TabView

这是一个方法演示。使用 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
    }
}

【讨论】:

  • @Asperi 有效,但它似乎弄乱了标签组件本身。他们无法正常加载
  • 此解决方案将重置滚动位置和任何其他状态。不是您对选项卡视图的期望。请将此信息添加到您的答案中。
猜你喜欢
  • 1970-01-01
  • 2019-12-27
  • 2023-01-12
  • 2021-07-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多