SwiftUI:iPhone 上 3 列布局中的透明导航栏

时间:2021-07-04 10:25:47

标签: ios swift swiftui

我有一个 3 列布局,出于某种原因,中间列中的导航栏在应用程序的初始启动时开始出现错误,即透明且无响应。为了使导航栏正常运行,我必须导航离开和返回。这只发生在我在 iPhone 模拟器上运行时,iPad 工作正常。

代码:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Sidebar()
            MainView()
            Text("Select mail to read")
        }
    }
}

struct Sidebar: View {
    var body: some View {
        List {
            Section(header: Text("Browse")
            ) {
                NavigationLink(destination: MainView()) {
                    Text("Inbox")
                }
                NavigationLink(destination: SentView()) {
                    Text("Sent")
                }
            }

        }
        .listStyle(SidebarListStyle())
        .navigationTitle("Mailboxes")
    }
}

struct MainView: View {
    @StateObject private var viewModel = ViewModel()
    
    var body: some View {
        Group {
            if viewModel.isFetching {
                ProgressView()
            } else {
                List {
                    ForEach(0..<20) { i in
                        NavigationLink(
                            destination: DetailView(item: "\(i)"),
                            label: {
                                Text("Inbox \(i)")
                            })
                    }
                }
            }
        }
        .navigationTitle("Inbox")
        .listStyle(PlainListStyle())
    }
}

struct SentView: View {
    var body: some View {
        List {
            ForEach(0..<5) { i in
                NavigationLink(
                    destination: DetailView(item: "\(i)"),
                    label: {
                        Text("Sent \(i)")
                    })
            }
        }
        .navigationTitle("Sent")
        .listStyle(PlainListStyle())
    }
}

class ViewModel: ObservableObject {
    @Published var isFetching = false
    
    init() {
        fetchData()
    }
    
    func fetchData() {
        isFetching = true
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
            self.isFetching = false
        }
    }
}

在 iPhone 上运行时:

enter image description here

在 iPad 上运行时:

enter image description here

编辑: 为简洁起见,用更通用的实现替换了代码和 gif。

0 个答案:

没有答案