时间戳

首页 > 解决方案 > SwiftUI - 检测哪个 TabView 在出现时处于活动状态

swiftui - SwiftUI - 检测哪个 TabView 在出现时处于活动状态

问题描述

我有一个显示 4 个不同视图的 TabView。整个tabView设置为：

.tabViewStyle(PageTabViewStyle())

（所以我可以让它启用滑动而不是使用按钮）

我还有一个简单矩形的 HStack，它们在显示各自的页面时应该突出显示不同的颜色。（当显示第一个选项卡时，第一个矩形将显示为蓝色，当第二个页面处于活动状态时，第二个矩形将显示为蓝色，等等。）我在每个视图上都使用 onAppear 执行此操作。

ViewOne()
   .onAppear {
            print("1")
            activeTab = 1
        }

如果我只在 tabView 中使用两个视图，这可以正常工作。但是一旦我添加了第三个，onAppear 就会变得疯狂。当我滑动到第三个视图时，打印语句会快速连续添加到控制台：

3
1
4

蓝色矩形是第四个。第四页把它扔得更远了，事情变得奇怪了。

我的问题是：tabViews 是不是有点像 UIKit TableView 的 dequeResuableCell，还是我做错了什么？可能是一个错误？如果是这样，是否有不使用 onAppear 的解决方法？

编辑：这是完整的代码实现：

        VStack {
        
        HStack {
            
            Rectangle()
                .foregroundColor((activeTab == 1) ? .blue : .red)
            
            Rectangle()
                .foregroundColor((activeTab == 2) ? .blue : .red)
            
            Rectangle()
                .foregroundColor((activeTab == 3) ? .blue : .red)
            
            Rectangle()
                .foregroundColor((activeTab == 4) ? .blue : .red)
            
        }
        .frame(height: 100)
        .padding()
        
        TabView(selection: $activeTab) {
// each one of the Views below has the .onAppear attached to them
               
            viewTwo(activeTab: $activeTab)
            
            viewTwo(activeTab: $activeTab)
            
            viewThree(activeTab: $activeTab)
            
            viewFour(activeTab: $activeTab)
            
        }
        .tabViewStyle(PageTabViewStyle())
    }
}

标签： swiftuitabview

解决方案

所以事实证明我把这件事复杂化了很多！我没有尝试在每个相关视图上放置一个 .onAppear （我意识到这并不总是完全可靠），我只是使用了：

.onChange(of: activeTab, perform: { value in
            print(activeTab)
})

这稳定了代码并按照我想要的方式执行。

如果它可以帮助任何人，我的完整代码如下！

    struct EvalView: View {
    
    @State var activeTab = 1
    
    var body: some View {
        VStack {
            
            HStack {
                
                Rectangle()
                    .foregroundColor((activeTab == 1) ? .blue : .red)
                
                Rectangle()
                    .foregroundColor((activeTab == 2) ? .blue : .red)
                
                Rectangle()
                    .foregroundColor((activeTab == 3) ? .blue : .red)
                
                Rectangle()
                    .foregroundColor((activeTab == 4) ? .blue : .red)
                
            }
            .frame(height: 100)
            .padding()
            
            TabView(selection: $activeTab) {
                   
                viewOne(activeTab: $activeTab)
                    .tag(1)
                
                viewTwo(activeTab: $activeTab)
                    .tag(2)
                
                viewThree(activeTab: $activeTab)
                    .tag(3)
                
                viewFour(activeTab: $activeTab)
                    .tag(4)
                
            }
            .tabViewStyle(PageTabViewStyle())
            .onChange(of: activeTab, perform: { value in
                print(activeTab)
            })
        }
    }
}

struct viewOne: View {
    
    @Binding var activeTab: Int
    
    var body: some View {
        Text("1")
    }
}

struct viewTwo: View {
    
    @Binding var activeTab: Int
    
    var body: some View {
        Text("2")
    }
}


struct viewThree: View {
    
    @Binding var activeTab: Int
    
    var body: some View {
        Text("3")
    }
}

struct viewFour: View {
    
    @Binding var activeTab: Int
    
    var body: some View {
        Text("4")
    }
}

    struct EvalView_Previews: PreviewProvider {
        static var previews: some View {
            EvalView()
        }
    }

推荐阅读