编辑时禁止在 TabView 上滑动 (swiftui)

Question

我试图在变量（Bool）设置为 true 时禁用在 swiftui 中滑动 TabView 的可能性，但我必须错过一些非常简单的东西。我找到了答案here以及许多其他帖子也有同样的说法，但是当我运行测试时，它并不会阻止我滑动。

我有一个简单的测试代码：

struct TabViewTest: View {
@State var editing: Bool = false
var numbers:[Int] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var body: some View {
    TabView {
        ForEach(numbers, id: \.self) { index in
            Button ("Hello, World \(index)!") {
                editing = !editing
                print("Btn \(index) changed editing to \(editing)")
            }
            .gesture(editing ? DragGesture() : nil)
        }
    }
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))
}

}

然而，运行此程序时，无论“编辑”变量是 true 还是 false，我仍然可以滑动。

这是按下每个选项卡上的按钮的日志：

Btn 1 将编辑更改为 true

Btn 2 将编辑更改为 false

Btn 3 将编辑更改为 true

Btn 4 将编辑更改为 false

Btn 5 将编辑更改为 true

Btn 6 将编辑更改为 false

我错过了什么？我发现的关于此的所有内容都提供了相同的解决方案，但我无法实现它......我必须错过一些基本的东西......

我在 iOS 16 的模拟器上有这个，如果这会有所作为的话。

编辑：看起来这是其他人面临的问题，但尚未找到解决方案，我发现了类似的问题here。

Answer 1

您使用

DragGesture

来防止

TabView

看到拖动的想法很好，但您需要

DragGesture

应用于整个屏幕，而不仅仅是按钮。

struct TabLocker: View {
    let pages = Array(1...10)
    @State var locked = false

    var body: some View {
        TabView {
            ForEach(pages, id: \.self) { page in
                ZStack {
                    // Any Color expands to take as much room as possible,
                    // so it will fill the screen.
                    // Color.clear is invisible so it won't affect the page appearance.
                    // But because it's invisible, SwiftUI doesn't allow it
                    // to receive touches by default.
                    // The .contentShape(Rectangle()) allows it to receive touches.
                    Color.clear
                        .contentShape(Rectangle())
                        .gesture(locked ? DragGesture() : nil)
                    VStack {
                        Text("Page \(page)")
                        Toggle("Locked", isOn: $locked)
                            .fixedSize()
                    }
                }
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
    }
}

Answer 2

我实际上在这个问题的评论中找到了答案。

问题是：任何具有“onTapGesture”的视图都会忽略“.gesture(...)”。

解决方案是使用“.simulataneousGesture(...)”来确保手势由视图/修改器捕获和处理。

更改后，它在我的情况下工作得很好。 唯一的例外是 2 指拖动手势。

就我而言，以下代码有效：

 ForEach(numbers, id: \.self) { index in
        Button ("Hello, World \(index)!") {
            editing = !editing
            print("Btn \(index) changed editing to \(editing)")
        }
        .simulataneousGesture(editing ? DragGesture() : nil)
    }

Answer 3

对于我的案例使用

Tabview

，我尝试使用提供的解决方案禁用滑动导航，但没有帮助解决我的问题，我最终将最小距离设置为1并且我工作了

sln

.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    .animation(.easeInOut, value: currentPage)
    .gesture(
        DragGesture(minimumDistance: 1)
    )

注意：您可以将

minimumDistance

设置为 0，它将禁用

TabView

上的滑动，但这样做的缺点是您将无法完全导航，例如，如果您有一个单击后应该滑动的按钮到下一个视图时它将不起作用...但是将

minimumDistance

设置为 1，您将能够禁用滑动，但也允许在单击操作上滑动