How to render a list and Navigate between screens in SwiftUI

On , by

In our last blog, we saw how to get started with SwiftUI. We saw how SwiftUI works and we also created a simple app with rendering text. Now let’s see how to render a list and a few things about navigation.

Rendering a List#rendering-a-list

TableView, TableViewController, TableViewCell all these complex things are out in SwiftUI 😜. You can simply map and display data like how it works in ReactNative.

Create a simple JSON

Create a JSON file to get data.

playerData.json

[
  { 
    name: "Cristiano Ronaldo",
    team: "Juventus"
  },
  {
    name: "Lionel Messi",
    team: "Barcelona"
  },
  {
    name: "Toni Kroos",
    team: "Real Madrid"
  }
]

Create the Row View#create-the-row-view

The first view you’ll build in this tutorial is a row for displaying details about each player.

  • Create new SwiftUI named PlayerRow.swift
  • Add Player as stored data of PlayerRow.swift.

When you add the Player property, the preview stops working, because the PlayerRow type needs a player instance during initialization. * Now create a view and use Player property. * In PlayerRow_Previews, update it with Player data from playerData array.

PlayerRow.swift

import SwiftUI

struct PlayerRow: View {
    var player: Player

    var body: some View {
        HStack {
            Text(player.name)
        }
    }
}

struct PlayerRow_Previews: PreviewProvider {
    static var previews: some View {
        PlayerRow(player: playerData[0])
    }
}

Create the List of Players#create-the-list-of-players

In SwiftUI you can display a platform-specific list of views. Then create a new SwiftUI view, named **PlayerList.swift. **Replace default TextView with List and provide PlayerRow as an instance. We can loop player data with List.

PlayerList.swift

import SwiftUI

struct PlayerList: View {
    var body: some View {
        List(playerData, id: \.id) { player in
            PlayerRow(player: player)
        }
    }
}

struct PlayerList_Previews: PreviewProvider {
    static var previews: some View {
        PlayerList()
    }
}

Now navigating between screens and passing data between views has become so simple.

Create a destination View

First, let’s create a Destination view of ContentViewType which I explained in my previous blog.

PlayerDetail.swift

import SwiftUI

struct PlayerDetail: View {
  var player: Player 
  var body: some View {
    VStack {
      Text(player.name)
          .font(.title)

      Text(player.team)
          .font(.title)    

    }
  } 
}

struct PlayerDetail_Previews: PreviewProvider {
    static var previews: some View {
        PlayerDetail()
    }
}

Adding Navigation Capabilities to the List is done by embedding it in NavigationView and setting each row in a NavigationLink to set up a transition to destination view.

PlayerList.swift

NavigationView {
    List(playerData) { player in
      NavigationLink(destination: PlayerDetail(player: player)) {
        PlayerRow(player: player)
      }
    }
    .navigationBarTitle(Text("Players"))
}

You can add title for your View by calling navigationBarTitle function.

As player var is declared in PlayerDetail.swift you can pass data to PlayerDetail view by passing player data inside PlayerDetail() which is embedded in NavigationLink contructor in PlayerList.swift.

This is how List and Navigation work in SwiftUI Thanks for reading.

Happy coding :)

Cheers 🥂

Share this article on Twitter or LinkedIn
Previous Blog Post: Rust is Simply Awesome #RustWorthy Part 1
Subscribe to Sudo vs Root

Our newsletter rolls out every month. No fluff. Pure content.

Comments and Discussions
Skcript https://www.skcript.com/svr/how-to-render-list-and-navigating-between-screens-in-swiftui/ https://www.skcript.com/svrmedia/heroes/how-to-render-list-and-navigating-between-screens-in-swiftui@1.5x.jpg

Connect with Skcript Global

In 72-hours, your business gets a clear blueprint of what we can do for your organization.

Contact us

Follow us on Twitter / LinkedIn / Instagram