如何在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))
    }
  }
}

- Guillaume

---

看起来像是一个错误或者目前无法更改的问题。离题：但是如果你将currentTabIndex指定为Double，你也必须在标签中使用Double。 - davidev

Answer 1

我也遇到了这个问题。虽然不是完美的解决方案，但可以在滚动视图上关闭弹跳效果（在TabView中使用）。只要TabView内的项目不大于TabView框架，它应该像禁用垂直滚动一样运作。

你可以在 .onAppear 或者 init 函数中调用它：

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

注意：这将禁用您应用程序中所有滚动视图的弹跳效果... 因此，您可能希望在.onDisappear中重新启用它。

- nicksarno

---

谢谢！在我的情况下，内容肯定比TabView框架小，所以您有任何关于为什么首先滚动的见解吗？ - Duc

我也希望不是这样哈哈。看起来每个选项卡都基于ScrollView，这可能是为了在内容大于TabView框架的情况下，用户可以在其上滚动（只是我的猜测，我不太确定）。 - nicksarno

有其他的解决方案吗？我想保留弹跳功能，但仅禁用选项卡视图的垂直滚动功能。 - Erik

@Erik 我没有找到其他本地解决方案，但我已经尝试了这个[SwiftUI Pager项目]（https://github.com/fermoya/SwiftUIPager）（非关联），而不是使用分页选项卡视图，它效果不错。 - nicksarno

对我没有用，所以我就这样做了： UIScrollView.appearance().isScrollEnabled = false - Abhishek Thapliyal

Answer 2

Xcode 12.4仍然存在此问题。

我设法通过将TabView包装在ScrollView内，并使用alwaysBounceVertical属性设置为false来解决此问题，如下所示：

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

- valvoline

---

通过设置UIScrollView.appearance().bounces = false和UIScrollView.appearance().bounces = true，这对我很有效。 - herve

Answer 3

我实际上是因为在教程中看到了这种效果，但无法在 iOS 15.2 上复制它而发现了它。然而，在另一个模拟器上的 iOS 14.4 上，我设法同时复制了它。所以我猜测这种行为在较新的 iOS 中被禁用或根本性地改变了。 演示

- DogLoaf

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Steven-Carrot