如何使用SwiftUI TabView在Instagram应用程序中执行模式转换,例如中心按钮?

时间:2019-12-06 12:50:17

标签: swiftui

import SwiftUI

struct ContentView: View {
    @State var showModal = false

    var body: some View {
        TabView {


            Text("Home View")
            .tabItem {
                VStack {
                    Image(systemName: "house")
                    Text("Home")
                }
            }


            Text("Dummy View")
            .onAppear {
                self.showModal = true
            }
            .sheet(isPresented: self.$showModal) {
                Text("Camera View")
            }
            .tabItem {
                VStack {
                    Image(systemName: "camera")
                    Text("Camera")
                }
            }


            Text("Setting View")
            .tabItem {
                VStack {
                    Image(systemName: "person")
                    Text("Setting")
                }
            }

        }
    }
}

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

当我用上面的代码点击中央摄像头按钮时,

  1. 已显示“虚拟视图”。
  2. 调用onAppear并将self.showModal设置为true。
  3. 但是,不会执行模态转换,并且无法显示“摄像机视图”。

使用SwiftUI TabView轻按Tab键时如何执行模式转换?


谢谢你!

最后,我用以下代码解决了这个问题:

import SwiftUI

struct ContentView: View {
    @State var showModal = false

    var body: some View {
        TabView {


            Text("Home View")
            .tabItem {
                VStack {
                    Image(systemName: "house")
                    Text("Home")
                }
            }


            Text("Dummy View")
            .onAppear {
                DispatchQueue.main.async {
                    self.showModal = true
                }
            }
            .sheet(isPresented: self.$showModal) {
                Text("Camera View")
            }
            .tabItem {
                VStack {
                    Image(systemName: "camera")
                    Text("Camera")
                }
            }


            Text("Setting View")
            .tabItem {
                VStack {
                    Image(systemName: "person")
                    Text("Setting")
                }
            }

        }
    }
}

1 个答案:

答案 0 :(得分:1)

我对此感到很麻烦,但不确定为什么,但是当我将.sheet放在视图层次结构的最顶层时,它总是最适合我。另外,我将调用包装在.onAppear中,以便在使其正常工作的主队列(UI)上明确运行:

struct ContentView: View {
    @State var showModal = false

    var body: some View {
        TabView {
            Text("Home View")
                .tabItem {
                    VStack {
                        Image(systemName: "house")
                        Text("Home")
                    }
            }

            Text("Dummy View")
                .onAppear {
                    print("Hallo")
                    DispatchQueue.main.async {
                        self.showModal = true
                    }
                }
                .tabItem {
                    VStack {
                        Image(systemName: "camera")
                        Text("Camera")
                    }
            }

            Text("Setting View")
                .tabItem {
                    VStack {
                        Image(systemName: "person")
                        Text("Setting")
                    }
            }

        }
        .sheet(isPresented: self.$showModal) {
            Text("Camera View")
        }
    }
}

我希望这会有所帮助!