如果以编程方式切换选项卡，第一次不会出现 Tabview 默认动画

Question

我注意到将 TabView 嵌入到 NavigationStack 中后，在选项卡之间切换时（按“下一步”按钮时）的默认动画消失了。因此，可以立即切换到下一个选项卡。这是我正在使用的部分代码：

  var body: some View {
        
        NavigationStack {
            TabView(selection: $viewModel.selection) {
                ForEach(viewModel.onboardingData, id: \.self) { data in
                    OnboardingView(data: data)
                        .tag(data.identifier)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .always))
            .indexViewStyle(.page(backgroundDisplayMode: .always))
            HStack {
                skipButton
                Spacer()
                nextButton
            }
        }
    }

和按钮：

 private var nextButton: some View {
        Button(action: {
            withAnimation {
                viewModel.next()
            }

    }) {
        if viewModel.selection == .fourth {
            NavigationLink(destination: HomeView()) {
                button(text: "Let's start")
            }
        } else {
            button(text: "Next")
        }
    }
}

如果我删除 NavigationStack，一切都会正常，但现在，只有第一个项目（从第一个选项卡转到第二个选项卡时）动画不会发生。我想这可能是显而易见的事情，但我不明白。

Answer 1

我认为这可能是因为你的

nextButton

是一个相当奇怪的按钮。按钮的标签可以是

NavigationLink

（本身就是一个按钮）或嵌套的

Button

。

当我将其简化为以下内容时，动画效果很好：

private var nextButton: some View {
    Button("Next") {
        withAnimation {
            viewModel.next()
        }
    }
}