如何使用 SwiftUI 禁用 TabView 中的垂直滚动？

Question

我在我的应用程序中设置了一个 TabView，以便我可以在多个页面之间水平滑动，但我也可能会出现不需要的垂直滚动，并具有弹跳效果。如何禁用此垂直滚动？

我的代码：

struct ContentView: View {
  @State private var currentTabIndex: Double = 0

  var body: some View {
    VStack {
      TabView(selection: $currentTabIndex) {
        Text("Text n°1")
          .tag(0)
        
        Text("Text n°2")
          .tag(1)
      }
      .border(Color.black)
      .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
  }
}

Answer 1

我也遇到了同样的问题。这不是一个精确的解决方案，但您可以关闭滚动视图（在 TabView 中使用）的弹跳。只要 TabView 中的项目不大于 TabView 框架，它就应该像禁用垂直滚动一样起作用。

我会称之为 .onAppear 或在你的 init 函数中：

.onAppear(perform: {
   UIScrollView.appearance().bounces = false
 })

注意：这会禁用应用程序中所有滚动视图的弹跳...因此您可能需要重新启用它.onDisappear。

Answer 2

Xcode 12.4 仍然存在问题。

我设法通过将 TabView 包装在 ScrollView 中并使用设置为 false 的

alwaysBounceVertical

属性来解决此问题，如下所示：

ScrollView(.horizontal) {
    TabView {
        ///your content goes here
    }
    .tabViewStyle(PageTabViewStyle())
}
.onAppear(perform: {
    UIScrollView.appearance().alwaysBounceVertical = false
})
.onDisappear(perform: {
    UIScrollView.appearance().alwaysBounceVertical = true
})

Answer 3

我实际上遇到了这个，因为我在教程中看到了这种效果，但无法在 iOS 15.2 上复制它。然而，我成功地在另一个模拟器上的 iOS 14.4 上复制了它。所以我猜这个行为在较新的 iOS 中被禁用或从根本上改变了。

Answer 4

如果分页水平滚动视图垂直弹跳，真正的问题是其垂直内容大小大于滚动视图的框架。如果你注意这一点，它就不会垂直弹跳。

也就是说，触摸外观的问题是它会影响应用程序的所有 UIScrollView（如果不包含）。

解决这个问题的更好方法（如果你真的需要的话）是使用 Introspect:

.introspect(.scrollView, on: .iOS(.v17)) { scrollView in
    scrollView.alwaysBounceVertical = false
}