【问题标题】:SwiftUI - Screen Position Problem with NavigationView and Tab BarSwiftUI - NavigationView 和标签栏的屏幕位置问题
【发布时间】:2020-07-30 09:50:07
【问题描述】:

我正在将 SwiftUI 屏幕集成到 tvOS 的 UIKit 应用程序中。我在屏幕顶部有一个标签栏。当应用程序第一次运行并且我切换到 SwiftUI 屏幕时,它看起来就像我想要的那样。但是,当我切换出去然后回来时,整个屏幕向上移动,导航标题隐藏在标签栏下,内容都在屏幕上更高。 SwiftUI 如下所示:

    struct SettingsVC: View {
    var body: some View {
        NavigationView {
            HStack {
                Image("fullLogo")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 800, height: 450)
                    .padding()
                    .offset(y: -75)
                List {
                    NavigationLink(destination: Text("Test")) {
                        HStack {
                            Image(systemName: "link")
                                .font(.headline)
                            Text("Link Account")
                                .font(.headline)
                        }
                    }
                }
                .navigationBarTitle("Settings")
            }
        }
    }
}

如果我注释掉NavigationView,当切换到另一个选项卡并再次返回时,屏幕位置将保持在同一位置。但是,我需要标题导航并进入列表。我尝试删除其他元素(例如图像)只是为了查看它是否导致问题,但事实并非如此。在此屏幕的后续选择中,似乎不再考虑导航栏。这种行为的原因可能是什么?

这是 UIKit 中的标签栏部分。

private func setup() {
        self.view.insetsLayoutMarginsFromSafeArea = false

        let tvSelectionVC = TVSelectionVC()
        tvSelectionVC.screenType = .live
        tvSelectionVC.isFirstRun = true

        let onDemandVC = TVSelectionVC()
        onDemandVC.screenType = .demand
        onDemandVC.isFirstRun = false

        let settingsVC = SettingsVC()
        let settingsHostController = UIHostingController(rootView: settingsVC)
        let config = UIImage.SymbolConfiguration(pointSize: 50, weight: .bold)

        tvSelectionVC.tabBarItem = UITabBarItem(title: "Live", image: nil, tag: 0)
        onDemandVC.tabBarItem = UITabBarItem(title: "OnDemand", image: nil, tag: 1)
        settingsHostController.tabBarItem.image = UIImage(systemName: "gear",withConfiguration: config)

        let logoView = UIImageView(image: UIImage(named: "logo"))
        logoView.translatesAutoresizingMaskIntoConstraints = false
        tabBar.leadingAccessoryView.addSubview(logoView)
        logoView.topAnchor.constraint(equalTo: tabBar.leadingAccessoryView.topAnchor).isActive = true
        logoView.leadingAnchor.constraint(equalTo: tabBar.leadingAccessoryView.leadingAnchor, constant: 0).isActive = true
        logoView.heightAnchor.constraint(equalToConstant: 40).isActive = true
        logoView.widthAnchor.constraint(equalToConstant: 140).isActive = true

        viewControllers = [tvSelectionVC,onDemandVC,settingsHostController]
    }

更新:我可以从 SwiftUI 视图中删除所有内容,并且在 NavigationView 中只有一个 Text 并且问题仍然存在。我还可以将第一个和第二个选项卡更改为空 UIViewControllers,第一次切换到 SwiftUI 后问题仍然存在。

【问题讨论】:

  • 提供的快照在模拟器上工作得很好。 Xcode 11.4。你能提供更多代码吗?
  • @Asperi - 你把它放在标签栏中了吗?

标签: swift swiftui tvos navigationview


【解决方案1】:

我能够通过将NavigationView 标记包装在VStack 标记中并添加解决此问题所需的Spacer 来解决此问题。有趣的是,作为一个测试,我创建了一个 SwiftUI 选项卡,前两个选项卡转到空视图,第三个选项卡转到上面的设置。这也表现出与上述相同的问题,这表明该问题与将 SwiftUI 包装在 UIKit 选项卡栏中无关。我不清楚为什么这个解决方案是必要的,但它确实解决了问题。这是 SwiftUI 再次为这个问题提供完整的解决方案。

struct SettingsVC: View {
    var body: some View {
        VStack {
            Spacer()
            NavigationView {
                HStack {
                    Image("fullLogo")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 800, height: 450)
                        .padding()
                        .offset(y: -75)
                    List {
                        NavigationLink(destination: Text("Test")) {
                            HStack {
                                Image(systemName: "link")
                                    .font(.headline)
                                Text("Link Account")
                                    .font(.headline)
                            }
                        }
                    }
                    .padding()
                    .navigationBarTitle("Settings")
                }
            }
        }
    }
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-06-01
    • 1970-01-01
    • 2020-08-10
    • 2021-03-26
    • 1970-01-01
    • 2014-06-25
    • 1970-01-01
    相关资源
    最近更新 更多