You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+62-3Lines changed: 62 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -93,17 +93,19 @@ struct ContentView: View {
93
93
94
94
1. Let's add a new view to the project that creates a button. Right click on the folder tree and click "New File...". Select "Swift File" and click "Next". Enter "ButtonView.swift" as the file name and click "Create". You should see a new file called `ButtonView.swift` in the folder tree.
95
95
96
-
2. In `ButtonView.swift`, add the following code:
96
+
2. In `ButtonView.swift`, add the following shown below. By creating a `var label: String` property, we can pass in a label to the view. You can read more about properties [here](https://docs.swift.org/swift-book/LanguageGuide/Properties.html).
97
97
98
98
```swift
99
99
importSwiftUI
100
100
101
101
structButtonView: View {
102
+
var label: String
103
+
102
104
var body: some View {
103
105
Button(action: {
104
106
print("Button tapped")
105
107
}, label: {
106
-
Text("Tap me!")
108
+
Text(label)
107
109
})
108
110
}
109
111
}
@@ -112,13 +114,70 @@ struct ButtonView: View {
112
114
3. Go back to `ContentView.swift`. Add the following code to the `VStack`, under `Text`:
113
115
114
116
```swift
115
-
ButtonView()
117
+
ButtonView(label: "Tap me!")
116
118
```
117
119
118
120
4. Click the play button on the top left of the screen to run your app in the simulator. You should see a button that says "Tap me!". When you tap the button, you should see "Button tapped" printed in the console (which is at the bottom of the screen).
119
121
120
122
121
123
124
+
### Navigation
125
+
126
+
1. Navigation is a way to navigate between different views. Let's add a navigation view to the app. Go back to `ContentView.swift`. Wrap the `VStack` in a `NavigationView`. You can read more about it [here](https://developer.apple.com/documentation/swiftui/navigationview).
127
+
128
+
```swift
129
+
NavigationView {
130
+
VStack {
131
+
Image(systemName: "globe")
132
+
.imageScale(.large)
133
+
.foregroundStyle(.tint)
134
+
Text("Hello, world!")
135
+
ButtonView(label: "Tap me!")
136
+
}
137
+
.padding()
138
+
}
139
+
```
140
+
141
+
2. Let's create a new screen that displays a list of items. Right click on the folder tree and click "New File...". Select "Swift File" and click "Next". Enter "ListView.swift" as the file name and click "Create". You should see a new file called `ListView.swift` in the folder tree.
142
+
143
+
3. In `ListView.swift`, add the following shown below. By creating a `var items: [String]` property, we can pass in a list of items to the view. You can read more about arrays [here](https://docs.swift.org/swift-book/LanguageGuide/CollectionTypes.html#ID105).
144
+
145
+
```swift
146
+
importSwiftUI
147
+
148
+
structListView: View {
149
+
var items: [String]
150
+
151
+
var body: some View {
152
+
List(items, id: \.self) { item in
153
+
Text(item)
154
+
}
155
+
}
156
+
}
157
+
```
158
+
159
+
4. Go back to `ContentView.swift`. Add a navigation link to the `VStack`, under `ButtonView`. You can read more about it [here](https://developer.apple.com/documentation/swiftui/navigationlink).
0 commit comments