4
4
.
.
2
2
.
.
2
2
L
L
i
i
s
s
t
t
I
I
n
n
f
f
o
o
[
[
R
R
]
]
Each of the List rows can be of a different View type. This is useful for creating Header & Footer as first and last rows.
Every View, including List, can only have up to 10 child Views.
List View replaces Table View from UIKit.
Content
List with Text
List with Text & Images
List & Detail View
L
L
i
i
s
s
t
t
w
w
i
i
t
t
h
h
T
T
e
e
x
x
t
t
This example shows how to implement List View where each row contains Text.
ContentView.swift
struct ContentView: View {
var body: some View {
List {
Text("Stanford Dish")
Text("Edgewood")
Text("Mission Peak")
Text("Big Basin")
Text("Alum Rock")
}
}
}
Simulator
L
L
i
i
s
s
t
t
w
w
i
i
t
t
h
h
T
T
e
e
x
x
t
t
&
&
I
I
m
m
a
a
g
g
e
e
s
s
This example shows how to implement List View where each row contains Text and Image.
ContentView.swift
struct ContentView: View {
var body: some View {
List {
VStack {
Text("0. Lijeva ruka iznad desne ruke.")
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.top, padding)
Image("Prolaz 0")
.resizable()
.aspectRatio(contentMode: .fill)
}
VStack {
Text("1. Ruke ulijevo prema van. Lijeva noga naprijed prema van.")
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.top, padding)
Image("Prolaz 1")
.resizable()
.aspectRatio(contentMode: .fill)
}
}
}
}
Simulator
L
L
i
i
s
s
t
t
&
&
D
D
e
e
t
t
a
a
i
i
l
l
V
V
i
i
e
e
w
w
[
[
R
R
]
]
When User clicks on the List Row, DetailView is shown with more details about the selected Row.
This is done by
● embedding List View inside NavigationView (as highlighted in Yellow)
● embedding each Row inside NavigationLink which calls DetailView with name parameter (as highlighted in Blue)
● we also add navigationBarTitle() for each View to tell us on which Screen we are (as highlighted in Green)
ContentView.swift
import SwiftUI
//==========================================================================
// ContentView
//==========================================================================
struct ContentView : View {
var body : some View {
NavigationView {
List {
NavigationLink("Stanford Dish", destination: DetailView(name: "Details for Stanford Dish"))
NavigationLink("Edgewood" , destination: DetailView(name: "Details for Edgewood" ))
NavigationLink("Mission Peak" , destination: DetailView(name: "Details for Mission Peak" ))
NavigationLink("Big Basin" , destination: DetailView(name: "Details for Big Basin" ))
NavigationLink("Alum Rock" , destination: DetailView(name: "Details for Alum Rock" ))
}.navigationBarTitle("Hiking Trails")
}.navigationViewStyle(StackNavigationViewStyle())
}
}
//==========================================================================
// DetailView
//==========================================================================
struct DetailView : View {
var name: String
var body: some View {
Text(name).navigationBarTitle("Detail View")
}
}
ContentView DetailView
