xcode SwiftUI 2.0 TabView禁用滑动以更改页面

jexiocij  于 2022-11-18  发布在  Swift
关注(0)|答案(4)|浏览(264)

我有一个使用swiftUI 2.0 PageTabViewStyle的TabView。有什么方法可以禁用滑动来更改页面吗?
我有一个搜索栏在我的第一个标签页视图,但如果一个用户正在键入,我不想给予的能力,以改变他们是对的,我基本上希望它被锁定在该屏幕上,直到所说的功能完成。
这里有一个gif显示的差异,我希望禁用制表符改变时,它是全屏的gif。https://imgur.com/GrqcGCI

w80xi6nr

w80xi6nr1#

尝试类似下面的方法(用一些存根代码测试)。这个想法是当一些条件(在你的情况下开始编辑)发生时阻止标签视图拖动手势

@State var isSearching = false

// ... other code

TabView {
    // ... your code here

    Your_View()
       .gesture(isSearching ? DragGesture() : nil)  // blocks TabView gesture !!
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
rdlzhqv9

rdlzhqv92#

我尝试了Asperi的解决方案,但是我仍然无法禁用滑动,并且添加disabled到true也不起作用,因为我希望子视图是交互式的。对我有效的解决方案是使用Majid(https://swiftwithmajid.com/2019/12/25/building-pager-view-in-swiftui/)的自定义Pager View,并添加一个条件,就像Asperi的解决方案一样。
Majid的条件页面视图:

import SwiftUI

struct PagerView<Content: View>: View {
    let pageCount: Int
    @Binding var canDrag: Bool
    @Binding var currentIndex: Int
    let content: Content
    
    
    init(pageCount: Int, canDrag: Binding<Bool>, currentIndex: Binding<Int>, @ViewBuilder content: () -> Content) {
        self.pageCount = pageCount
        self._canDrag = canDrag
        self._currentIndex = currentIndex
        self.content = content()
    }
    
    
    @GestureState private var translation: CGFloat = 0
    
    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                self.content.frame(width: geometry.size.width)
            }
            .frame(width: geometry.size.width, alignment: .leading)
            .offset(x: -CGFloat(self.currentIndex) * geometry.size.width)
            .offset(x: self.translation)
            .animation(.interactiveSpring(), value: currentIndex)
            .animation(.interactiveSpring(), value: translation)
            .gesture(!canDrag ? nil : // <- here
                
                DragGesture()
                    .updating(self.$translation) { value, state, _ in
                        
                        state = value.translation.width
                    }
                    .onEnded { value in
                        let offset = value.translation.width / geometry.size.width
                        let newIndex = (CGFloat(self.currentIndex) - offset).rounded()
                        self.currentIndex = min(max(Int(newIndex), 0), self.pageCount - 1)
                    }
            )
        }
    }
    
}

内容检视:

import SwiftUI

struct ContentView: View {
    
    
    @State private var currentPage = 0
    @State var canDrag: Bool = true
    
    
    var body: some View {
        
        PagerView(pageCount: 3, canDrag: $canDrag, currentIndex: $currentPage) {
            VStack {
                Color.blue
                
                
                Button {
                    canDrag.toggle()
                } label: {
                    Text("Toogle drag")
                }

            }
            
            VStack {
                Color.red
                
                
                Button {
                    canDrag.toggle()
                } label: {
                    Text("Toogle drag")
                }

            }
            
            VStack {
                Color.green
                
                
                Button {
                    canDrag.toggle()
                } label: {
                    Text("Toogle drag")
                }

            }
            
        }
        
    }
    
}
llycmphe

llycmphe3#

对于任何试图弄清楚这一点的人,我通过将TabView状态设置为disabled来做到这一点。

TabView(selection: $currentIndex.animation()) {
    Items()
 }.disabled(true)

编辑:如注解中所述,这也将禁用TabView中的所有内容

btxsgosb

btxsgosb4#

好的,我认为通过使用以下步骤,可以阻止至少99%的滑动手势(如果不是100%):
1.和2.将.gesture(DragGesture())添加到每个页面添加.tabViewStyle(.page(indexDisplayMode: .never))

SwiftUI.TabView(selection: $viewModel.selection) {
            ForEach(pages.indices, id: \.self) { index in
                pages[index]
                    .tag(index)
                    .gesture(DragGesture())
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .never))

1.将.highPriorityGesture(DragGesture())添加到所有剩余的视图图像,按钮仍然允许拖动和滑动页面
你也可以在1。使用highPriorityGesture,但它完全阻止每个页面上的拖动,但我需要他们在一些页面旋转的东西

相关问题