iOS App in 30 mins! — Part 3
Now lets work on the details view
Lets create new file underViews
using the SwiftUI template called PokemonDetailsView.swift
And paste in this code.
Let me explain. Because the detail view would contain multiple data points it would be easier to work with a DataModel which here is our PokemonDetailModel
struct
Also notice that I’ve allowed var model: PokemonDetailModel?
to be optional. This is because the data will be fetched on appear. Therefore the view would need to initialize without the data.
Now lets create some mock data so we can see something in the preview.
Run it in the preview
You should see the above.
Let add the official art work on top.
When we navigate to this view we need to know which Id of Pokémon we want, therefore we should init the view with an id
If we can have the id we also can get the image. Let add an image to the details view
Tada!
now let’s clean this up using list and some spacing!
That looks decent
Now let’s integrate this with the list view and navigate over.
First in ContentView.swift
lets wrap the PokemonListView
with a NavigationView
Secondly lets add a title in the for the List view
Next lets add the navigation to the details view by using NavigationLink
Run it in the simulator and you should be able to navigate between the List and detail view
Oh we forgot to add the API call onAppear and parse the response.
Thats more like it! There you go! a simple iOS app!