在没有按钮的 SwiftUI 中呈现新视图

Question

所以我想使用 SwiftUI 呈现一个新视图，而无需用户点击按钮，因为 NavigationButton 可以使用它。这是一个例子

struct ContentView : View {

    var model: Model

    var body: some View {
        NavigationView {
            Text("Hello World")
        }.onAppear {
            if model.shouldPresent {
                // present a new view
            }
        }
    }
}

在onAppear 中，我想包含一些将新视图推送到导航堆栈的代码。

Answer 1

这是一种将视图呈现为模态的方法。

struct PresentOnloadView: View {
    var body: some View {
        HStack {
            Text("Hey there")
            }
            .presentation(Modal(HelloView(), onDismiss: nil))
        }
}

struct HelloView: View {
    var body: some View {
        Text("Whats up! ?")
    }
}

同样，如果您想控制是否使用变量呈现，您可以执行以下操作..

struct PresentOnloadControlledView : View {
  @State var sayHello = false

    var body: some View {
        HStack {
                Text("What's up!")
            }
            .onAppear(perform: {
                // Decide whether to show another view or not here
                self.sayHello = true
            })
            .presentation(sayHello ? Modal(HelloView()) : nil)
    }
}

从版本 11.0 beta 4 开始，➝ .presentation 和 Modal 已被弃用。

别担心！ .sheet 节省时间！

struct PresentOnloadControlledView : View {
  @State var sayHello = false

    var body: some View {
        HStack {
            Text("What's up!")
        }
        .onAppear(perform: {
            // Decide whether to show another view or not here
            self.sayHello = true
        })
        .sheet(isPresented: $sayHello) {
            HelloView()
        }
    }
}

Answer 2

在你的视野中：

@State var present = true

var body: some View {
    NavigationLink(destination: DestinationView(), isActive: $present) {
        EmptyView()
    }
}

此代码在 NavigationLink 加载后立即显示 DestinationView。关键部分是isActive 参数，它以编程方式触发到另一个视图的转换。

你可以改写如下

@State var present = false

var body: some View {
    NavigationLink(destination: DestinationView(), isActive: $present) {
        Button { 
            present = true
        } label: { Text("Present") }
    }
}

手动创建导航按钮。

Answer 3

SwiftUI 2

SwiftUI 2 / iOS 14 中的 Segue 等效项：

• 显示（推送）

struct ContentView: View {
    @State var showSecondView = false

    var body: some View {
        NavigationView {
            Text("First view")
                .background(NavigationLink("", destination: Text("Second view"), isActive: $showSecondView))
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                showSecondView = true
            }
        }
    }
}

• 显示详细信息（替换）

struct ContentView: View {
    @State private var showSecondView = false

    var body: some View {
        NavigationView {
            if showSecondView {
                Text("Second view")
            } else {
                Text("First view")
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                showSecondView = true
            }
        }
    }
}

• 模态呈现

struct ContentView: View {
    @State private var showSecondView = false

    var body: some View {
        NavigationView {
            Text("First view")
        }
        .sheet(isPresented: $showSecondView) {
            Text("Second view")
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                showSecondView = true
            }
        }
    }
}

• 全屏显示

struct ContentView: View {
    @State private var showSecondView = false

    var body: some View {
        NavigationView {
            Text("First view")
        }
        .fullScreenCover(isPresented: $showSecondView) {
            Text("Second view")
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                showSecondView = true
            }
        }
    }
}

注意：我添加了DispatchQueue.main.asyncAfter(deadline: .now() + 1)，以便您查看过渡。您可以将其移除，然后过渡将立即开始。

Answer 4

您可以简单地将逻辑放在NavigationView 中。像这样：

@State var x = true;

var body : some View {
    NavigationView {
        if x {
            Text("Hello")
            Button(action: {
                self.x = false;
            }, label: { Text("Click Me") })
        } else {
            Text("World")
        }
    }
}