How to use UITableView in SwiftUI

Asked on 2024-07-30

1 search

To use UITableView in SwiftUI, you can leverage the List view, which is a powerful and flexible way to create table-like interfaces in SwiftUI. Here are some key points and examples from the WWDC sessions that can help you get started:

  1. Basic List Usage:

    • You can use List to create a table-like view. It can be initialized with a collection of data, and it will generate views for each element in the collection.
    • Example from the session "SwiftUI essentials":
      struct Pet: Identifiable {
          let id = UUID()
          let name: String
      }
      
      let pets = [Pet(name: "Whiskers"), Pet(name: "Rufus"), Pet(name: "Bubbles")]
      
      struct ContentView: View {
          var body: some View {
              List(pets) { pet in
                  Text(pet.name)
              }
          }
      }
      
      SwiftUI essentials (07:55)
  2. Customizing List Rows:

    • You can customize each row in the list by using custom views.
    • Example from the session "SwiftUI essentials":
      struct PetRow: View {
          var pet: Pet
      
          var body: some View {
              HStack {
                  Text(pet.name)
                  Spacer()
                  Button("Award") {
                      // Action for awarding the pet
                  }
              }
          }
      }
      
      struct ContentView: View {
          var body: some View {
              List(pets) { pet in
                  PetRow(pet: pet)
              }
          }
      }
      
      SwiftUI essentials (08:50)
  3. Advanced List Customization:

    • You can add features like swipe actions to each row.
    • Example from the session "SwiftUI essentials":
      struct ContentView: View {
          var body: some View {
              List(pets) { pet in
                  Text(pet.name)
                      .swipeActions {
                          Button("Award") {
                              // Action for awarding the pet
                          }
                          .tint(.green)
                      }
              }
          }
      }
      
      SwiftUI essentials (08:50)
  4. Using Sections in Lists:

    • You can organize data into sections within a list.
    • Example from the session "Demystify SwiftUI containers":
      struct ContentView: View {
          var body: some View {
              List {
                  Section(header: Text("My Pets")) {
                      ForEach(myPets) { pet in
                          Text(pet.name)
                      }
                  }
                  Section(header: Text("Other Pets")) {
                      ForEach(otherPets) { pet in
                          Text(pet.name)
                      }
                  }
              }
          }
      }
      
      Demystify SwiftUI containers (10:42)

By using List and its various customization options, you can effectively create and manage table views in SwiftUI, similar to UITableView in UIKit. For more detailed examples and advanced techniques, you can refer to the sessions mentioned above.