mobile | 2019-09-17T00:00:00+05:30
How to render a list and Navigate between screens in SwiftUI
Hellonext Team / 2019-09-17T00:00:00+05:30
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
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
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
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()
}
}
Navigating between screens
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()
}
}
Embed NavigationView and NavigationLink
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 🥂
Last updated: June 3rd, 2023 at 4:46:29 PM GMT+0
Hellonext Team
Hellonext is a user feedback tool and this article was written by many people at Hellonext. Hellonext helps prioritize product roadmap based on user-input.