SwiftUI - LazyVStack pinnedViews中的另一个

Question

如何创建这样的东西

LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
    Section(header: Text("foo") ) {
        LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
            Section (header: Text("bar") ) {
                Text("1")
                Text("2")
                ...
            }
            Section (header: Text("baz") ) {
                Text("1")
                Text("2")
                ...
            }
        }
    }
}

我需要两个固定的标头，但在这个解决方案中，标头在固定位置时会突出。

谢谢

Answer 1

您可以为子标头提供背景(白色/ bg颜色)，还必须使用zIndex将第一个标头推回。

​

​

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, pinnedViews: [.sectionHeaders]) {

                Section(header:
                    Text("Overall Header")
                    .zIndex(-1) // zIndex here
                ) {
                    
                    LazyVStack(alignment: .leading, pinnedViews: [.sectionHeaders]) {
                        
                        Section (header:
                                    Text("Header One")
                            // give background here
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .background(.gray)
                        ) {
                            ForEach(0..<30) { item in
                                Text("Item \(item)")
                            }
                        }

                        Section (header:
                                    Text("Header Two")
                                 // give background here
                                 .frame(maxWidth: .infinity, alignment: .leading)
                                 .background(.gray)
                        ) {
                            ForEach(0..<50) { item in
                                Text("Item \(item)")
                            }
                        }
                    }
                }
            }
        }
        .font(.title2)
        .padding()
    }
}

Answer 2

这里有一些黑客:)

它‘使用包“"SwiftUITrackableScrollView”可以在这里找到："https://github.com/maxnatchanon/trackable-scroll-view"。

但是，对于可跟踪的滚动视图，您可以找到几个解决方案，或者自己实现一个。

它工作得很好，唯一的问题是获取/定义标题的相关位置。如果你有一个预定义的/固定的项目高度，那就容易了。

​

​

import SwiftUI
import SwiftUITrackableScrollView


struct MyHeaders: Identifiable {
    let id = UUID()
    let title: String
    let position: CGFloat
    var active: Bool = false
}


struct ContentView: View {
    
    @State private var offset = CGFloat.zero // Content offset available to use

    @State private var myHeaders = [
        MyHeaders(title: "Outer Header One", position: 0),
        MyHeaders(title: "Inner Header One", position: 0),
        MyHeaders(title: "Inner Header Three", position: 264),
        MyHeaders(title: "Outer Header Two", position: 525),
        MyHeaders(title: "Inner Header Three", position: 525),
    ]

    var body: some View {
        
        TrackableScrollView(.vertical, showIndicators: false, contentOffset: $offset) {
            LazyVStack(alignment: .leading) {
                
                Text("Outer Header One")

                Text("Inner Header One")
                ForEach(0..<10) { item in
                    Text("Item \(item)")
                }
                Text("Inner Header Two")
                ForEach(0..<10) { item in
                    Text("Item \(item)")
                }

                Text("Outer Header Two")

                Text("Inner Header Three")
                ForEach(0..<30) { item in
                    Text("Item \(item)")
                }
                
            }
        }
        .onChange(of: offset) { newValue in
            print(offset)
            for i in 0..<myHeaders.count {
                myHeaders[i].active = myHeaders[i].position < offset
            }
        }
        .overlay(
            VStack(alignment: .leading) {
                ForEach(myHeaders) { header in
                    if header.active {
                        Text(header.title)
                    }
                }
            }
                .frame(maxWidth: .infinity, alignment: .leading)
                .foregroundColor(.orange)
                .background(.background)
            , alignment: .topLeading
        )
        .font(.title2)
        .padding()
    }
}