SwiftUI List: set section header height?

user_728246 0
Viewed 663

I have a List:

    List {
        
        ForEach(model.sections) { s in

            Section(header: SectionView()) {
             
                ForEach(items, id: \.self) { item in
                    Text(item.name)
                        .border(Color.mint)
                }
                
            }

        }
        
    }
    
    .listStyle(.plain)

I have the view SectionView I want to build for the section header:

struct SectionView: View {
    
    var body: some View {
        GeometryReader { geo in
            
            HStack {
                
                Text("Section Header View")
                    .frame(width: geo.size.width, height: 60)
                
                
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .border(Color.green)
        }
        
    }
    
}

Unfortunately the SectionView in the header now bleeds over the cells. The actual section header height did not change. How can I set a custom section header height?

enter image description here

enter image description here

swiftui listview
1 Answers

You should not use GeometryReader in this case, just use height to container of section, like

struct SectionView: View {

    var body: some View {
        HStack {
            Text("Section Header View")
        }
        .frame(maxWidth: .infinity, minHeight: 60) // << here !!
        .border(Color.green)
    }
}

gives

demo

Tested with Xcode 13 / iOS 15

user_122990300
Related