在 SwiftUI 中的视图之间切换答案

【问题标题】：Switch between views in SwiftUI在 SwiftUI 中的视图之间切换
【发布时间】：2021-03-06 15:02:57
【问题描述】：

基本上，我试图从只有一个徽标和进度视图栏的加载页面转到一个名为 HomeView 的全新屏幕。每当进度条加载完成时，我都想直接进入 HomeView，我再也不会回到加载页面。有没有办法像这样在屏幕之间切换？

我在 youtube 上看到很多人使用导航链接，但我没有按钮或任何东西来触发它。另外，我看到当他们进入新页面时，他们仍然可以点击蓝色的后退按钮回到加载页面，这是我不希望发生的。

我留下下面的代码，以防你们都需要参考。

我是 ios 编程新手，感谢大家的帮助。

这是加载页面

import SwiftUI

struct ContentView: View {
    
    @State var downloadAmount: Float = 0.0
    let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ZStack {
            Color (red: 12/255, green: 18/255, blue: 25/255).edgesIgnoringSafeArea(.all)
            VStack(spacing: 30.0) {
                Image("logo")
                ProgressView(value: downloadAmount, total: 50).accentColor(Color(red: 255/255, green: 232/255, blue: 147/255))            }.padding(.horizontal, 50)
            .onReceive(timer) { _ in
                if downloadAmount < 50 {
                    downloadAmount += 2
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            
    }
}

我想在进度条用完后直接进入 HomeView。

import SwiftUI

struct HomeView: View {
    
    @State var progressValue: Float = 0.2
    
    var body: some View {
        Text("Hello World")
    }
}

struct HomeView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
            
    }
}

【问题讨论】：

标签： ios swiftui swiftui-navigationlink

【解决方案1】：

您可以基于downloadAmount 属性呈现不同的视图。我还建议在更新进度条时使用withAnimation：

struct ContentView: View {
    @State var downloadAmount: Float = 0.0
    let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

    var body: some View {
        ZStack {
            Color(red: 12 / 255, green: 18 / 255, blue: 25 / 255).edgesIgnoringSafeArea(.all)
            if downloadAmount >= 50 { // display conditionally
                HomeView()
            } else {
                logoView
            }
        }
        .onReceive(timer) { _ in
            if downloadAmount < 50 {
                withAnimation { // add animation
                    downloadAmount += 2
                }
            }
        }
    }

    var logoView: some View { // extract as a computed variable for clarity
        VStack(spacing: 30.0) {
            Image("logo")
            ProgressView(value: downloadAmount, total: 50).accentColor(Color(red: 255 / 255, green: 232 / 255, blue: 147 / 255))
        }
        .padding(.horizontal, 50)
    }
}

我建议将徽标视图提取到另一个结构/计算属性。此外，将 timer 逻辑移动到 @ObservableObject 可能会很好。

【讨论】：