SwiftUI — List and Navigation Link

SwiftUI

The Basic

struct ContentView: View {

var body: some View {
NavigationView {
VStack {
List {
Text("list")
Text("list")
Text("list")
Text("list")
}
}
}
}
}

Implementation

In this Challenge I have to rebuild an app I had build in my first solo challenge in Academy with UIKit into SwiftUI.

      {
"id": 1,
"name": "Algorithm",
"definition": "A programming algorithm is a computer procedure that is a lot like a recipe (called a procedure) and tells your computer precisely what steps to take to solve a problem or reach a goal",
"link": "https://www.khanacademy.org/computing/computer-science/algorithms/intro-to-algorithms/v/what-are-algorithms",
},
struct Term: Codable, Hashable, Identifiable {
var id: Int
var name: String
var definition: String
var link: String
}

loading the data

To load our data, we can decode with generic decode function that will returns an array of the corresponding struct that we want to decode. So I created an extension on Data.swift and load our JSON file into the struct.

let termList: [Term] = load("termList.json")
List(termList) { term in
Text(term.name)
}

Showing the detail

Each term have its own definition we will display, so I created TermDefinition.swift to represent it.

List(termList) { term in
NavigationLink(destination: TermDefinition(term: term)) {
Text(term.name)
}
}

Conclusion

Good point I learnt from SwiftUI

  • Faster: SwiftUI help us develop our UI faster, even faster than Storyboards. Me and my former teammate are not a big fan of Interface Builder, so we decided to developing our App without Storyboards back then, but I did not really enjoy developing the UI because it was really takes time.
  • Easy to learn: Since I am more familiar with declarative syntax, it’s easier for me to learn it and I love it.
  • It has live preview feature and it’s really help.
  • It can be mixed with UIKit.
  • It produces a valid layout, so there’s no auto layout related problem. Instead, you can use syntax like VStack, HStack, ZStack, List, Group and more.

The disadvantage of SwiftUI

It will only work on devices with IOS 13 and higher so it’s not production ready. If you just want to create a super simple app or challenge project, SwiftUI is fun to learn.

Further Reading

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ren

Ren

I am passionate about solving the right problem & implementing an accessible solution, eager to learn every thing to remove every barrier in digital technology