SwiftUI主列表滚动式标题视图而无需使用分区？

Question

有没有一种方法可以在列表头部放置视图，而不使用分区？表格视图通常有一个称为 tableHeaderView 的属性，它是整个表格的标题，与分区标题无关。

我试图创建一个列表，并像从 UITableView 中的 tableHeaderView 那样滚动它。

struct MyView: View {
    
    let myList: [String] = ["1", "2", "3"]
    
    var body: some View {
        VStack {
            MyHeader()
            List(myList, id: \.self) { element in
                Text(element)
            }
        }
    }
}

- P. Sami

Answer 1

感谢Asperi。这是我对表头的最终解决方案。

struct MyHeader: View {
    var body: some View {
        Text("Header")
    }
}

struct DemoTableHeader: View {
    let myList: [String] = ["1", "2", "3"]

    var body: some View {
        List {
            MyHeader()
            ForEach(myList, id: \.self) { element in
                Text(element)
            }
        }
    }
}

- P. Sami

Answer 2

这里是一种简单的演示可能的方法，其他所有内容（如样式、大小、对齐和背景）都可以进行扩展和配置。

已经在Xcode 11.4 / iOS 13.4上进行了测试。

struct MyHeader: View {
    var body: some View {
        Text("Header")
            .padding()
            .frame(maxWidth: .infinity)
    }
}

struct DemoTableHeader: View {
    let myList: [String] = ["1", "2", "3"]

    let headerHeight = CGFloat(24)

    var body: some View {
        ZStack(alignment: .topLeading) {
            MyHeader().zIndex(1)               // << header
                .frame(height: headerHeight)

            List {
                Color.clear                    // << under-header placeholder
                    .frame(height: headerHeight)

                ForEach(myList, id: \.self) { element in
                    Text(element)
                }
            }
        }
    }
}

- Asperi

---

不错！但是我也想让标题随着列表一起滚动，可以吗？ - P. Sami

那我误解了你的意思 - 只需删除占位符并将标题移动到ForEach上面的List中。 - Asperi

Asperi，太棒了！那样行得通。我基于你的评论在这里发布了我的答案 :) - P. Sami