swiftui - 如何在 SwiftUI TabView 中保持滚动位置

Question

使用 ScrollView里面TabView我注意到当我在选项卡之间来回移动时，ScrollView 不会保持它的滚动位置。如何更改以下示例以使 ScrollView 保持其滚动位置？

import SwiftUI

struct HomeView: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("Line 1")
                Text("Line 2")
                Text("Line 3")
                Text("Line 4")
                Text("Line 5")
                Text("Line 6")
                Text("Line 7")
                Text("Line 8")
                Text("Line 9")
                Text("Line 10")
            }
        }.font(.system(size: 80, weight: .bold))
    }
}

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection) {
            HomeView()
                .tabItem {
                    Image(systemName: "house")
                }.tag(0)

            Text("Out")
                .tabItem {
                    Image(systemName: "cloud")
                }.tag(1)
        }
    }
}

Answer 1

不幸的是，鉴于 SwiftUI (iOS 13.x/Xcode 11.x) 的当前限制，内置组件根本无法做到这一点。

两个原因:

当您离开选项卡时，SwiftUI 会完全处理您的 View 。这就是您的滚动位置丢失的原因。它不像 UIKit 那样你有一堆离屏 UIViewControllers。

没有ScrollView相当于 UIScrollView.contentOffset .这意味着您无法将滚动状态保存在某处并在用户返回选项卡时恢复它。

您最简单的路线可能是使用 UITabBarController充满UIHostingController s。这样，当用户在它们之间移动时，您不会丢失每个选项卡的状态。

否则，您可以创建一个自定义选项卡容器，并自己修改每个选项卡的不透明度(而不是有条件地将它们包含在层次结构中，这就是当前导致您出现问题的原因)。

var body: some View {
  ZStack {
    self.tab1Content.opacity(self.currentTab == .tab1 ? 1.0 : 0.0)
    self.tab2Content.opacity(self.currentTab == .tab2 ? 1.0 : 0.0)
    self.tab3Content.opacity(self.currentTab == .tab3 ? 1.0 : 0.0)
  }
}

当我想保留 WKWebView 时，我使用了这种技术。每次用户短暂切换时完全重新加载。

我会推荐第一种技术 .特别是如果这是您的应用程序的主要导航。