SwiftUI 主列表可滚动 header 视图没有部分？

Question

有没有办法在列表 header 中放置一个视图而不带部分？ table 视图通常有一个名为 tableHeaderView 的属性，它是整个 table 的 header，与 header 部分无关.

我正在尝试创建一个列表并能够像 tableHeaderView 那样从 UITableView 滚动它。

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

Answer 1

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

测试 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)
                }
            }
        }
    }
}

Answer 2

感谢Asperi。这是我对 table header.

的最终解决方案

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)
            }
        }
    }
}

SwiftUI 主列表可滚动 header 视图没有部分？

SwiftUI main list scrollable header view without sections?

ios

swift

swiftui

swiftui-list