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

Posted 2023-03-10

【中文标题】带有背景完整图像的登机屏幕 - SwiftUI

【英文标题】：OnBoarding screen with background full image - SwiftUI

【发布时间】：2021-09-02 19:35:19

【问题描述】：

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

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

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

【参考方案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)]

【讨论】：

非常感谢！

【参考方案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())
                
            
        
    

结果：

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

【讨论】：

非常感谢！