SwiftUI - TabView - 如何通过滑动更新 $selectedPage？

Question

我正在努力让 SwiftUI 使用滑动以及 TabView 滚动和跟踪其顺序的按钮。

所以，我有一个按钮，用户可以触摸它来推进页面，当他们到达末尾时，按钮中的文本会改变。

但是，当他们使用滑动更改页面时，按钮文本不会更改。

struct MyPageView: View
{
  @State private var selectedPage: Int    = 0
  @State private var buttonLabel : String = "Next"
  
  var body: some View
  {
    ZStack
    {
      Color.black
      
      VStack
      {
        TabView(selection: $selectedPage)
        {
          Page1().tag(0)
          Page2().tag(1)
          Page3().tag(2)
          Page4().tag(3)
          Page5().tag(4)
        }
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
        
        Button(buttonLabel)
        {
          withAnimation
          {
            selectedPage += 1
            
            if self.selectedPage > 4
            {
              selectedPage = 0
              buttonLabel = "Next"
            }
            else if self.selectedPage == 4
            {
              buttonLabel = "Continue"
            }
            else
            {
              buttonLabel = "Next"
            }
          }
        }
        .buttonStyle(.borderedProminent)
      }.padding(.all)
    }
    .edgesIgnoringSafeArea(.all)
  }
}

我怎样才能让它工作，以便他们可以点击和/或滑动？

Answer 1

不是让

buttonLabel

成为一个

@State

变量，它可以只是一个计算变量：

    @State private var selectedPage: Int    = 0
    
    var buttonLabel: String {
        selectedPage == 4 ? "Continue" : "Next"
    }

这样，无论从哪里修改

selectedPage

，它都会提供正确的值。

全：

struct MyPageView: View
{
    @State private var selectedPage: Int    = 0
    
    var buttonLabel: String {
        selectedPage == 4 ? "Continue" : "Next"
    }
    
    var body: some View
    {
        ZStack
        {
            Color.black
            
            VStack
            {
                TabView(selection: $selectedPage)
                {
                    Text("Page 1").tag(0)
                    Text("Page 2").tag(1)
                    Text("Page 3").tag(2)
                    Text("Page 4").tag(3)
                    Text("Page 5").tag(4)
                }
                .tabViewStyle(.page)
                .indexViewStyle(.page(backgroundDisplayMode: .always))
                
                Button(buttonLabel)
                {
                    withAnimation
                    {
                        selectedPage += 1
                        
                        if self.selectedPage > 4
                        {
                            selectedPage = 0
                        }
                    }
                }
                .buttonStyle(.borderedProminent)
            }.padding(.all)
        }
        .edgesIgnoringSafeArea(.all)
    }
}