SwiftUI Lists: Complete Guide with Examples

Published on March 24, 2024

SwiftUI Lists iOS

Lists are fundamental UI components in iOS applications. SwiftUI makes it easy to create and customize lists with built-in features. Let's explore different ways to implement lists in SwiftUI.

1. Basic List Implementation

Let's start with a simple list example:

BasicList.swift

struct BasicList: View {
    let items = ["Apple", "Banana", "Orange", "Mango"]
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

2. Custom List Items

Create more complex list items with custom views:

CustomListItem.swift

struct Contact: Identifiable {
    let id = UUID()
    let name: String
    let email: String
    let avatar: String
}

struct ContactRow: View {
    let contact: Contact
    
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: contact.avatar)
                .font(.title)
                .frame(width: 40, height: 40)
                .background(Color.gray.opacity(0.2))
                .clipShape(Circle())
            
            VStack(alignment: .leading) {
                Text(contact.name)
                    .font(.headline)
                Text(contact.email)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
        .padding(.vertical, 8)
    }
}

struct ContactList: View {
    let contacts = [
        Contact(name: "John Doe", email: "john@example.com", avatar: "person.circle.fill"),
        Contact(name: "Jane Smith", email: "jane@example.com", avatar: "person.circle.fill")
    ]
    
    var body: some View {
        List(contacts) { contact in
            ContactRow(contact: contact)
        }
    }
}

3. List with Sections

Organize list items into sections:

SectionedList.swift

struct SectionedList: View {
    let groupedContacts: [String: [Contact]] = [
        "Team": [
            Contact(name: "John Doe", email: "john@example.com", avatar: "person.circle.fill"),
            Contact(name: "Jane Smith", email: "jane@example.com", avatar: "person.circle.fill")
        ],
        "Family": [
            Contact(name: "Mom", email: "mom@example.com", avatar: "heart.circle.fill"),
            Contact(name: "Dad", email: "dad@example.com", avatar: "heart.circle.fill")
        ]
    ]
    
    var body: some View {
        List {
            ForEach(groupedContacts.keys.sorted(), id: \.self) { key in
                Section(header: Text(key).font(.headline)) {
                    ForEach(groupedContacts[key] ?? []) { contact in
                        ContactRow(contact: contact)
                    }
                }
            }
        }
    }
}

4. Editable List

Add editing capabilities to your list:

EditableList.swift

struct EditableList: View {
    @State private var contacts: [Contact]
    @State private var isEditing = false
    
    var body: some View {
        NavigationView {
            List {
                ForEach(contacts) { contact in
                    ContactRow(contact: contact)
                }
                .onDelete(perform: deleteItems)
                .onMove(perform: moveItems)
            }
            .navigationTitle("Contacts")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: addItem) {
                        Image(systemName: "plus")
                    }
                }
            }
        }
    }
    
    func deleteItems(at offsets: IndexSet) {
        contacts.remove(atOffsets: offsets)
    }
    
    func moveItems(from source: IndexSet, to destination: Int) {
        contacts.move(fromOffsets: source, toOffset: destination)
    }
    
    func addItem() {
        let newContact = Contact(
            name: "New Contact",
            email: "new@example.com",
            avatar: "person.circle.fill"
        )
        contacts.append(newContact)
    }
}

5. List with Search

Implement search functionality in your list:

SearchableList.swift

struct SearchableList: View {
    @State private var searchText = ""
    let contacts: [Contact]
    
    var filteredContacts: [Contact] {
        if searchText.isEmpty {
            return contacts
        }
        return contacts.filter { contact in
            contact.name.localizedCaseInsensitiveContains(searchText) ||
            contact.email.localizedCaseInsensitiveContains(searchText)
        }
    }
    
    var body: some View {
        List(filteredContacts) { contact in
            ContactRow(contact: contact)
        }
        .searchable(
            text: $searchText,
            placement: .navigationBarDrawer(displayMode: .always),
            prompt: "Search contacts"
        )
    }
}

Best Practices

Use Identifiable protocol for list items
Extract complex list items into separate views
Consider performance with large datasets
Implement proper error handling
Add appropriate loading states

Performance Tips

Use LazyVStack for large lists
Implement pagination for network requests
Cache images and data appropriately
Minimize view updates

SwiftUI lists provide a powerful way to display collections of data in your iOS applications. By following these patterns and best practices, you can create efficient, maintainable, and user-friendly list interfaces.