在 SwiftUI 中使用 Segmented-style Picker 在两个页面之间滑动 [英] Swipe between two pages with Segmented-style Picker in SwiftUI

问题描述

我有一个带有 .pickerStyle(SegmentedPickerStyle()) 的 Picker 以使其成为分段控件.我想让页面之间平滑滑动，而不是使用条件语句替换视图.

I have a Picker with .pickerStyle(SegmentedPickerStyle()) to make it a segmented control. I want to make the pages smoothly swipe between, rather than replacing the view using a conditional statement.

这是我目前所做的 gif:

Here is a gif of what I have made so far:

这是到目前为止的代码(由 if 控制，而不是在不同页面之间切换):

Here is the code so far (controlled by an if, instead of switching between different pages):

struct AuthView: View {

    @State private var authPath = 0

    /* ... */

    var body: some View {
        VStack {
            Picker(selection: $authPath, label: Text("Authentication Path")) {
                Text("Log In").tag(0)
                Text("Sign Up").tag(1)
            }
            .pickerStyle(SegmentedPickerStyle())

            Spacer()

            if authPath == 0 {
                LogInView(/* ... */)
            } else {
                SignUpView(/* ... */)
            }

            Spacer()
        }
        .padding()
        .background(Color("Color.Background").edgesIgnoringSafeArea(.all))
    }
}

我想要类似于 UIPageViewController 的东西.如果有 SwiftUI 版本或更好的替代方案，那真的很有帮助.

I want something similar to UIPageViewController. If there is a SwiftUI version or a good alternative, that would really help.

但是，如果我确实需要使用带有 UIViewRepresentable 的 UIKit，我不知道我将如何使用 SwiftUI 来实现它.

However, if I do need to resort to UIKit with UIViewRepresentable, I don't know how I would implement it with SwiftUI.

推荐答案

这些其他答案为我指明了正确的方向，但代码似乎有点冗长或没有按预期运行.

These other answers pointed me in the right direction, but the code seems a bit verbose or didn't function as intended.

这是让我的工作发生变化的地方:

Here is what changed to get mine working:

• 填充已添加到 Picker.
• 从 VStack 的末尾删除了填充.
• if-else 改为 2 个 ifs.
• 为 LogInView 和 SignInViewanimation、transition 和 padding 修饰符代码>.

• Padding was added to the Picker.
• Padding was removed from the end of the VStack.
• The if-else was changed to 2 ifs.
• Added animation, transition, and padding modifiers to each of LogInView and SignInView.

struct AuthView: View {

    @State private var authPath = 0

    /* ... */

    var body: some View {
        VStack {
            Picker(selection: $authPath, label: Text("Authentication Path")) {
                Text("Log In").tag(0)
                Text("Sign Up").tag(1)
            }
            .pickerStyle(SegmentedPickerStyle())

            Spacer()

            if authPath == 0 {
                LogInView(/* ... */)
            } else {
                SignUpView(/* ... */)
            }

            Spacer()
        }
        .padding()
        .background(Color("Color.Background").edgesIgnoringSafeArea(.all))
    }
}

新:

struct AuthView: View {

    @State private var authPath = 0

    /* ... */

    var body: some View {
        VStack {
            Picker(selection: $authPath, label: Text("Authentication Path")) {
                Text("Log In").tag(0)
                Text("Sign Up").tag(1)
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding()

            Spacer()

            if authPath == 0 {
                LogInView(/* ... */)
                    .animation(.default)
                    .transition(.move(edge: .leading))
                    .padding()
            }
            if authPath == 1 {
                SignUpView(/* ... */)
                    .animation(.default)
                    .transition(.move(edge: .trailing))
                    .padding()
            }

            Spacer()
        }
        .background(Color("Color.Background").edgesIgnoringSafeArea(.all))
    }
}

这篇关于在 SwiftUI 中使用 Segmented-style Picker 在两个页面之间滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！