[移动开发]SwiftUI List那些事(八）List 添加 Header

首先我们要创建一个展示Head视图的View

代码如下

import SwiftUI

struct ListHead: View {
    var body: some View {
        VStack{
          Text("三年二班").position(x:60, y: 150).font(.system(size:24 , weight:.bold)).foregroundColor(.white)
        }.background(Image("head").resizable().frame(width:UIScreen.main.bounds.width, height: 180))
        .frame(width:UIScreen.main.bounds.width,height:180)
    }
}

struct ListHead_Previews: PreviewProvider {
    static var previews: some View {
        ListHead()
    }
}

我们可以利用Section组件 header 添加头部视图

public init(header: Parent, footer: Footer, @ViewBuilder content: () -> Content)

代码如下

//
//  ListWithHead.swift
//  List
//
//  Created by lsr on 2021/9/17.
//

import SwiftUI

struct ListWithHead: View {
    @State var dataItems = dataSource;
    var body: some View {
        List{
            Section(header:ListHead()) {
                ForEach(dataItems) { item in
                    //跳转Link 目标是DetailView 详情
                    NavigationLink(
                        destination:DetailView(item: item)) {
                        ListRow(item: item)
                      }
                 }
            }

        }.navigationTitle("人员管理")
    }
}

struct ListWithHead_Previews: PreviewProvider {
    static var previews: some View {
        ListWithHead()
    }
}

效果如下

这种方法就是头部不能随着列表滚动，也可以不添加Section
直接在 ForEach(dataItems) {} 上面插入Header，这样就可以滚动了，
但是如插入列里，会有分隔线，效果不佳，需要想办法重绘分割线，或者用滚动式视图来实现。