Question

我想向惰性网格添加固定标题视图。惰性网格应该可以水平滚动。

问题是上下也有不应水平滚动的内容。否则，可以通过将外部 ScrollView 滚动行为设置为 ([.horizontal, .vertical]) 并移除内部滚动行为来轻松解决问题。

在示例代码中，一切正常，但垂直滚动时标题视图没有固定在顶部。它像网格上方的任何其他内容一样滚动。也许这是 SwiftUI 本身的问题。

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            Text("Other content")
                .frame(maxWidth: .infinity, minHeight: 100)
                .background(Color.yellow)

            ScrollView(.horizontal) {
                LazyVGrid(
                    columns: Array(repeating: GridItem(.fixed(200), spacing: 0, alignment: .center), count: 9),
                    spacing: 16,
                    pinnedViews: [.sectionHeaders]
                ) {
                    Section(header: header) {
                        ForEach(1..<500) {
                            Text("Cell #\($0)")
                        }
                    }
                }
            }

            Text("Other content")
                .frame(maxWidth: .infinity, minHeight: 100)
                .background(Color.yellow)
        }
    }

    var header: some View {
        LazyVGrid(
            columns: Array(repeating: GridItem(.fixed(200), spacing: 0, alignment: .center), count: 9),
            spacing: 16
        ) {
            ForEach(1..<10) {
                Text("Header \($0)")
            }
        }
        .padding(.vertical)
        .background(Color.blue)
        .foregroundColor(.white)
    }
}

那么如何将标题正确固定到顶部？

Answer 1

你是否已经尝试过这样的事情：

var body: some View {
    VStack{
       Text ("My Header")
       .multilineTextAlignment(.center)
...
    }
    ScrollView(.horizontal){
        LazyVStack{
...
    }
}

首先在一个普通的 VStack 中写入你的 Text 并在使用你的 ScrollView 之前关闭 VStack。

SwiftUI：用于惰性网格的水平滚动视图内的固定标题视图

1 个答案: