UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

List with 'floating' section headers

Forums > SwiftUI

UIKit support floating section headers This is enabled by default for UITableView and is optional for UIColklectionView See: sectionHeadersPinToVisibleBounds

How can I accomplish the same behaviour in SwiftUI?

3      

You can set the header in an HStack before the List. You just need to make sure the rows have the same width (first row of title has same width as first row in the list)

VStack(alignment: .center) {
  HStack {
    Text("Header 1").frame(width: 100)
    Text("Header 2").frame(maxWidth: .infinity)
  }
  List {
    ForEach(0..<data.count) { num in
      HStack {
        Text("Row 1-\(num)").frame(width: 100)
        Text("Row 2-\(num)").frame(maxWidth: .infinity)
      }
    }
  }
}

That's one solution. I don't know if there's a native one.

3      

Thanks for the response!

Unfortunalty your example does not provide a sollution for multiple sections

What I need is the default UITableView behaviour

Have a look at the iOS contacts app to see what I mean

Scroll through the contacts and watch the section header below the search field

3      

I understand. Have you tried playing around with Section? Maybe SwiftUI 2.0 will come with good news theron that front. I haven't checked.

3      

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.