带有背景完整图像的登机屏幕 - SwiftUI

Question

这里是新手！ 我想为启动视图制作一个登机屏幕，例如：

我需要一些帮助，我在互联网上搜索但我没有找到任何可以帮助我的东西！ 我找到了一些视频，并尝试操作教程中的代码，但没有成功。 我想用 VStack(alignment: .center){Text("")} 制作一个完整的视图背景。 在互联网和 YouTube 上，我发现了一些视频，可以教你使用 WebDevelopment(header) 中的 Sliders 之类的滑块。

如果有人可以帮助我，我会很高兴！非常感谢！

Answer 1

这是另一种方式，像这样：

struct ContentView: View {
    
    @State private var isFinished: Bool = Bool()
    
    var body: some View {
        
        if isFinished {
            
            Text("Welcome!").font(Font.system(.largeTitle, design: .monospaced))
            
        }
        else {
            
            OnboardingView(pages: pages, isFinished: { value in isFinished = value })
                .statusBar(hidden: true)
            
        }
        
    }
}


struct OnboardingView: View {
    
    let pages: [OnboardingPage]
    var isFinished: (Bool) -> Void
    
    @State private var currentPage: Int = 0
    @State private var toggleView: Bool = Bool()
    @State private var animation: Animation? = Animation.default
    
    var body: some View {
        
        GeometryReader { proxy in
            
            Image(pages[currentPage].backgroundImage)
                .resizable()
                .ignoresSafeArea()
                .scaledToFill()
            
            VStack {
                
                Spacer()
                
                if toggleView {
                    middleVStack(index: currentPage).transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: Edge.trailing), removal: AnyTransition.move(edge: Edge.leading)))
                }
                else {
                    middleVStack(index: currentPage).transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: Edge.trailing), removal: AnyTransition.move(edge: Edge.leading)))
                }
                
                Spacer()
                
                Button(action: {
                    
                    if (pages.count > (currentPage + 1)) { currentPage += 1; animation = .default; toggleView.toggle() }
                    else { isFinished(true) }
                    
                    
                }, label: {
                    
                    Text(pages[currentPage].stringOfButton)
                        .font(Font.body.bold())
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(pages[currentPage].colorOfButton.cornerRadius(10.0))
                        .padding()
                    
                })
                
                HStack {
                    
                    ForEach(pages.indices, id:\.self) { index in
                        
                        Circle()
                            .fill(Color.white.opacity(index == currentPage ? 1.0 : 0.5))
                            .frame(width: 12, height: 12, alignment: .center)
                            .onTapGesture { animation = nil ; currentPage = index }
                        
                    }
                    
                }
                
            }
            .foregroundColor(.white)
            .shadow(radius: 5.0)
            .animation(animation, value: currentPage)
            
        }
        
    }
    
    func middleVStack(index: Int) -> some View {
        
        VStack(spacing: 20.0) {
            
            Image(systemName: pages[index].image).font(Font.system(size: 100.0).bold())
            
            Text(pages[index].title)
                .font(Font.system(size: 50, weight: .bold, design: .rounded))
            
            Text(pages[index].info)
                .font(Font.system(.title3, design: .rounded).bold())
                .padding()
            
        }
        
    }
    
}


struct OnboardingPage: Identifiable {
    let id: UUID = UUID()
    var backgroundImage: String
    var image: String
    var title: String
    var info: String
    var stringOfButton: String
    var colorOfButton: Color
}

let info: String = " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

var pages: [OnboardingPage] = [OnboardingPage(backgroundImage: "background1", image: "megaphone", title: "Title 1", info: info, stringOfButton: "Next", colorOfButton: .green),
                               OnboardingPage(backgroundImage: "background2", image: "gauge", title: "Title 2", info: info, stringOfButton: "Next", colorOfButton: .orange),
                               OnboardingPage(backgroundImage: "background3", image: "gyroscope", title: "Title 3", info: info, stringOfButton: "Get Started", colorOfButton: .blue)]

Answer 2

这是您的目标的总体思路。

您可以使用ZStack 来实现它，其中图像是背景。然后，您需要缩放图像以适合背景，忽略安全区域。

例子：

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()

            VStack {
                Text("Title").font(.title)

                Text("Content")
            }
            .foregroundColor(.white)
            .shadow(radius: 1)

            VStack {
                Spacer()

                Button {
                    print("pressed")
                } label: {
                    Text("Button")
                        .padding()
                        .background(Color.yellow)
                        .clipShape(Capsule())
                }
            }
        }
    }
}

结果：

^{我不拥有这张图片的权利。}