如何隐藏ScrollView(SwiftUI)顶部的视图?

6kkfgxo0  于 2023-08-02  发布在  Swift
关注(0)|答案(1)|浏览(153)

我正在尝试复制苹果应用程序的一个行为。
x1c 0d1x的数据
我认为这是滚动和拖动手势的组合。
通过计算滚动偏移量、滚动方向和隐藏视图的位置,我设法创建了一个简单的行为版本。
这就是代码:

struct _TestView: View {
    @State var scrollOffset: CGPoint = .zero
    @State var contentOffset: CGPoint = CGPoint(x: .zero, y: -200)
    
    @State var scrollDisabled = true
    
    var drag: some Gesture {
        DragGesture()
            .onChanged { value in
                if !scrollDisabled { return } // if scrolling is enabled then don't change content offset
                
                var newLocation = startLocation ?? contentOffset

                // sets dragging bounds (-200 to 0)
                if contentOffset.y >= 0 && value.translation.height > 0 {
                    newLocation.y = 0;
                } else if contentOffset.y <= -200 && value.translation.height < 0 {
                    newLocation.y = -200;
                } else {
                    newLocation.y += value.translation.height
                }
                
                self.contentOffset = newLocation
            }
            .updating($startLocation) { ... }
        
    }
    
    // this is misc. 
    @GestureState private var fingerLocation: CGPoint? = nil
    @GestureState private var startLocation: CGPoint? = nil
    
    var fingerDrag: some Gesture { ... }
    
    var body: some View {
        OffsetObservingScrollView(offset: $scrollOffset) {
            VStack {
                Rectangle()
                    .fill(.blue)
                    .frame(height: 200)
                Rectangle()
                    .fill(.red)
                    .frame(height: 1000)
                    .overlay { ... }
            }
            .offset(y: contentOffset.y)
            .gesture(drag.simultaneously(with: fingerDrag))
        }
        .scrollDisabled(scrollDisabled)
        .navigationTitle("Hello, world!")
        .border(.black)
    }
}

字符串
禁用滚动时,拖动手势起作用。



然而,当你抛出滚动拖动是janky。我很想知道如何改进这一点:)
下一个问题是当contentOffset == -200 or 0时,如何启用滚动我设法让它在某种程度上工作通过观察scrollOffset,contentOffset,甚至拖动手势值的变化,但它不可靠,几乎不起作用。:(
感谢所有帮助!

r1zhe5dt

r1zhe5dt1#

如果你只是试图复制你可以隐藏一个视图的行为,就像Books应用程序一样,它可以通过在一个ScrollView中放置两个LazyVStack来实现,其中第一个LazyVStack将有一个固定的行为视图。
代码如下:

ScrollView(.vertical, showsIndicators: true) {
    LazyVStack(pinnedViews: [.sectionHeaders]) {
        Section {
            Text("10 books 4 pdfs and more!")           
        } header: {
            VStack {
                Divider()
                Text("Collections (Pinned)")
                Divider()
            }
        }
    }
    LazyVStack() {
        // Here goes the book grid
    }
}

字符串
但我也注意到,在Apple Books应用程序中,它有更多的细节,例如,顶部视图默认是隐藏的,导航标题不会折叠,直到“隐藏”视图完全不可见,加上第一部分的滚动捕捉行为。

相关问题