SwiftUI

Question

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

.tabViewStyle(PageTabViewStyle())

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

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

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

如果我只在 tabView 中使用两个视图，则效果很好。但是一旦我添加第三个，onAppear 就会发疯。当我滑动到第三个视图时，打印语句快速连续地添加到控制台：

3
1
4

蓝色矩形是第四个。第 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())
    }
}

Answer 1

原来我把这件事复杂化了很多！我没有尝试在每个关联的视图上放置一个 .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()
        }
    }

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

SwiftUI - Detect which TabView is active onAppear

tabview