SwiftUI – TabView – 如何在滑动时更新$selectedPage?

huangapple go评论95阅读模式
英文:

SwiftUI - TabView - How to update $selectedPage from a swipe?

问题

I'm struggling with getting SwiftUI to work with swipes as well as a button for a TabView to scroll and track its order.

So, I have a button that the user can touch to advance the page and the text in the button will change when they get to the end.

However, when they change the page using a swipe the button text doesn't change.

如何让它能够在点击和/或滑动时工作?

英文:

I'm struggling with getting SwiftUI to work with swipes as well as a button for a TabView to scroll and track its order.

So, I have a button that the user can touch to advance the page and the text in the button will change when they get to the end.

However, when they change the page using a swipe the button text doesn't change.

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)
  }
}

How can I get that working so they can tap AND/OR swipe?

答案1

得分: 1

Sure, here's the translated code:

而不是将 `buttonLabel` 设为 `@State` 变量,可以将其设置为计算变量:

```swift
@State private var selectedPage: Int = 0

var buttonLabel: String {
    selectedPage == 4 ? "继续" : "下一页"
}

这样,它会在任何地方修改 selectedPage 时都提供正确的值。

完整代码:

struct MyPageView: View {
    @State private var selectedPage: Int = 0

    var buttonLabel: String {
        selectedPage == 4 ? "继续" : "下一页"
    }

    var body: some View {
        ZStack {
            Color.black

            VStack {
                TabView(selection: $selectedPage) {
                    Text("页面 1").tag(0)
                    Text("页面 2").tag(1)
                    Text("页面 3").tag(2)
                    Text("页面 4").tag(3)
                    Text("页面 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)
    }
}

请注意,已将引号内的 HTML 实体代码翻译为中文。


这样,它会在任何地方修改 `selectedPage` 时都提供正确的值。

完整代码:

```swift
struct MyPageView: View {
    @State private var selectedPage: Int = 0

    var buttonLabel: String {
        selectedPage == 4 ? "继续" : "下一页"
    }

    var body: some View {
        ZStack {
            Color.black

            VStack {
                TabView(selection: $selectedPage) {
                    Text("页面 1").tag(0)
                    Text("页面 2").tag(1)
                    Text("页面 3").tag(2)
                    Text("页面 4").tag(3)
                    Text("页面 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)
    }
}

请注意,已将引号内的 HTML 实体代码翻译为中文。

英文:

Instead of having buttonLabel be a @State variable, it can just be a computed variable:

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

That way, it provides the correct value no matter where selectedPage was modified from.

Full:

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)
    }
}

huangapple
  • 本文由 发表于 2023年4月11日 06:25:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/75981173.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定