带有背景完整图像的入职屏幕 - SwiftUI

Question

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

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

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

Answer 1

这是您的总体思路。

您可以使用 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())
                }
            }
        }
    }
}

结果：

^{我没有这张图片的版权。}

Answer 2

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

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

带有背景完整图像的入职屏幕 - SwiftUI

OnBoarding screen with background full image - SwiftUI

iphone

ios

swift

swiftui