TabView ที่มี“ PageTabViewStyle” จะไม่อัปเดตเนื้อหาเมื่อมีการเปลี่ยนแปลง @State var

Question

ฉันเจอปัญหาแปลก ๆ ใน SwiftUI ฉันสร้าง View แบบธรรมดาที่มีเพียงปุ่มและ TabView ที่ใช้ PageViewStyle ดูเหมือนว่า 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)
            }
        }
    }
}