ios - 如何在 SwiftUI 中按条件将 .fullScreenCover() 添加到按钮？

Question

我创建了一个简单的集合，可以从最后一页导航到下一个屏幕。如果我需要将 .fullScreenCover 修饰符应用于最后一页数组索引上的按钮，如何正确编写转换条件？按照惯例，如果索引是第一个，我如何正确地将背景图像放置在第一个集合屏幕上，以便它不在以下屏幕上？

import SwiftUI

struct IntroView: View {
    
    @ObservedObject var viewModel = IntroViewModel()
    @State private var tabSelection = 0
    @State private var isLastPage = false
    
    var body: some View {
        ZStack {
            TabView(selection: $tabSelection) {
                
                ForEach(0..<viewModel.pages.endIndex) { index in
                    
                    VStack {
                        Image("icnDE")
                            .padding(.bottom, 20)
                            .padding(.top, 50)
                            .frame(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                        
                        Text(viewModel.pages[index].name)
                            .font(Font.custom("TeXGyreAdventor-Bold", size: 32))
                            .foregroundColor(.white)
                            .multilineTextAlignment(.center)
                            .padding(.horizontal,30)
                        
                        Button(action: {
                            self.tabSelection += 1
                            self.isLastPage = false
                        }) {
                            Text(viewModel.pages[index].buttonName)
                                .font(Font.custom("TeXGyreAdventor-Bold", size: 18))
                                .frame(width: 335, height: 56, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                                .foregroundColor(Color.white)
                                .background(Color.blue)
                                .cornerRadius(12)
                                .padding(.top, 50)
                        }
                        
                        if tabSelection == viewModel.pages.count - 1, isLastPage == true {
                            Button(action: {
                                self.tabSelection += 1
                                self.isLastPage = false
                            }) {
                                Text(viewModel.pages[index].buttonName)
                                    .font(Font.custom("TeXGyreAdventor-Bold", size: 18))
                                    .frame(width: 335, height: 56, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                                    .foregroundColor(Color.white)
                                    .background(Color.blue)
                                    .cornerRadius(12)
                                    .padding(.top, 50)
                            }.fullScreenCover(isPresented: $isLastPage, content: {
                                LoginView()})
                        }
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .tabViewStyle(PageTabViewStyle.init(indexDisplayMode: .never))
            .edgesIgnoringSafeArea(.all)
        }
        .background(
            Image("imgHappypeople")
                .resizable()
                .edgesIgnoringSafeArea(.all)
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
    }
}


struct Intro_Previews: PreviewProvider {
    static var previews: some View {
        IntroView()
            .previewDevice("iPhone 11")
    }
}

标签： iosxcodeswiftui

Answer 1

开启全屏覆盖，.fullScreenCover在顶部ZStack添加，二键无需添加条件。

struct IntroView: View {
    
    @ObservedObject var viewModel = IntroViewModel()
    @State private var tabSelection = 0
    @State private var isLastPage = false
    
    var body: some View {
        ZStack {
            TabView(selection: $tabSelection) {
                
                ForEach(0..<viewModel.pages.endIndex) { index in
                    
                    VStack {
                        Image("icnDE")
                            .padding(.bottom, 20)
                            .padding(.top, 50)
                            .frame(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                        
                        Text(viewModel.pages[index].name)
                            .font(Font.custom("TeXGyreAdventor-Bold", size: 32))
                            .foregroundColor(.white)
                            .multilineTextAlignment(.center)
                            .padding(.horizontal,30)
                        
                        Button(action: {
                           if self.tabSelection == viewModel.pages.count - 1 {
                                self.isLastPage = true
                            } else {
                                self.tabSelection += 1
                            } //<-- Use this condition
                            
                        }) {
                            Text("\(index)")
                                .font(Font.custom("TeXGyreAdventor-Bold", size: 18))
                                .frame(width: 335, height: 56, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                                .foregroundColor(Color.white)
                                .background(Color.blue)
                                .cornerRadius(12)
                                .padding(.top, 50)
                        }
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .tabViewStyle(PageTabViewStyle.init(indexDisplayMode: .never))
            .edgesIgnoringSafeArea(.all)
        }
        .fullScreenCover(isPresented: $isLastPage, content: {
                            Text("Details")}) //<== Use fullScreenCover here
        .background(
            Image("imgHappypeople")
                .resizable()
                .edgesIgnoringSafeArea(.all)
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
    }
}