当@State var 更改时，带有“PageTabViewStyle”的 TabView 不会更新其内容

Question

我在 SwiftUI 中遇到了一个奇怪的问题。我创建了一个简单的 View，它只包含一个 Button 和一个使用 PageViewStyle 的 TabView。TabView 似乎没有根据变量的状态正确更新其内容。似乎内容以某种方式更新，但视图不会像我期望的那样更新

这是我的视图代码：

struct ContentView: View {
    @State var numberOfPages: Int = 0
    @State var selectedIndex = 0
    
    var body: some View {
        VStack {
            Text("Tap Me").onTapGesture(count: 1, perform: {
                self.numberOfPages = [2,5,10,15].randomElement()!
                self.selectedIndex = 0
            })
            
            TabView(selection: $selectedIndex){
                ForEach(0..<numberOfPages, id: \.self) { index in
                    Text("\(index)").background(Color.red)
                }
            }
            .frame(height: 300)
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
        }.background(Color.blue)
    }
}

这是多次点击标签后的结果。初始状态不是 0 页。在您点击后，我希望 TabView 的内容发生变化，因此所有页面都将是可滚动和可见的，但由于某种原因，只有页面指示器会更新它的状态。

Answer 1

TabView期望有页面容器，但您只包含一个HStack（带有自己的动态内容），而且链接页面数必须重置选项卡视图，所以这里有一个修复。

使用 Xcode 12 / iOS 14 测试

struct ContentView: View {
    @State var numberOfPages: Int = 0

    var body: some View {
        VStack {
            Text("Tap Me").onTapGesture(count: 1, perform: {
                self.numberOfPages = [2,5,10,15].randomElement()!
            })
            if self.numberOfPages != 0 {
                TabView {
                    ForEach(0..<numberOfPages, id: \.self) { index in
                        Text("\(index)").frame(width: 300).background(Color.red)
                    }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
                .frame(height: 300)
                .id(numberOfPages)
            }
        }
    }
}