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

SOLVED: Creating dynamic section headers with dynamic lists

Forums > SwiftUI

I'm trying to create dynamic, alphabetical sections for a list, similar to Contacts or Music. (Ultimately, I'd like to have the alphabetical sidebar, but that's something I'll add later.)

The challenge is that I'm dealing with lists of book titles, and I can't always be sure the first character of the title is going to be a character from the English alphabet, so I'm trying to derive my list of firstCharacters for the section headers from the actual titles in the library.

That part I more or less have worked out, it's presenting the filtered dynamic list within the section that I'm not quite getting:

    var firstCharacters: [Character] {
        var firstCharacters = [Character]()
        for book in books.sorted(by: {$0.title < $1.title}) {
            if let character = book.title.first, !firstCharacters.contains(character) {
                firstCharacters.append(character)
            }
        }
        return firstCharacters
    }

    var body: some View {
        VStack {
            ForEach(firstCharacters) { character in
                Section(header: Text(String(character))) {
                    List(books.filter({$0.title.first == character }).sorted(by: {$0.title < $1.title})) { book in
                        BookRowView(book: book, index: nil)
                    }
                }
            }
            .listStyle(InsetListStyle())
        }
    }

This almost does what I want, except that each section is its own little scroll view only a single line of text high, rather than the whole thing being a continuous, sectioned list.

2      

I think this is because you are nesting your list within the section so each list has it's own scrollview.

I did this recently and created a multi dimensional array. Outer array is your sections (which you've got above) but contained with the array of sections, you have an array of books.

So something like this (I've changed my object and variable names to match yours after pasting so hopefully I haven't made a typo).


 List() {
                  ForEach(firstCharacter) { character in
                     Section(header: Text(character.title)) {    // Title being the characters name e.g. A, B, C in my character object etc
                        ForEach(character.books ) { book in
                            // Define row here

3      

Ah okay, I was dancing around that, but I hadn't thought to make both blocks ForEach within a list. Thank you.

2      

No probs.

I did also look into having the alphabet sidebar but that looks to be quite tricky and not really swiftUI native right now so I didn't bother in the end.

2      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

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.