如何在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）的当前限制，内置组件根本不可能做到这一点。

两个原因：

1. 当您离开标签页时，SwiftUI会完全处理您的View。这就是为什么滚动位置丢失的原因。这与UIKit不同，在UIKit中，您有一堆屏幕外的UIViewController。
2. ScrollView不等于UIScrollView.contentOffset。这意味着您无法将滚动状态保存在某处，并在用户返回到选项卡时将其恢复。

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

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

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完全重新加载时使用了此技术。

我会推荐第一种技术

。特别是如果这是您应用的主要导航方式。