Build a SwiftUI view in Swift Playgrounds

2:30 - Set up for SwiftUI

import SwiftUI
import PlaygroundSupport

2:46 - Create a simple SwiftUI view

struct ProgressView: View {
  
  var body: some View {
    Text("Hello, world!")
  }
  
}

3:12 - Show a SwiftUI live view

PlaygroundPage.current.setLiveView(ProgressView())

4:01 - Create a blue circle

Circle()
	.stroke(lineWidth: 25)
	.foregroundColor(.blue)

5:06 - Add some padding

ProgressView().padding(150)

5:30 - Create an empty ZStack

ZStack { }

5:51 - Add a text view

Text("25%")

9:24 - Make a struct public

public struct ProgressView: View {

9:38 - Make a view's body property public

public var body: some View {

9:45 - Make a view's initializer public

public init(_ progress: Double = 0.3) {

10:12 - Create another SwiftUI view

struct Preview: View {
 
  var body: some View {
    // ...
  }
  
}

10:21 - Create a VStack of progress views

VStack(spacing: 30) {
  ProgressView()
  ProgressView()
}

10:44 - Add padding to a view

.padding(100)

10:51 - Add a system background color to a view

.background(Color(UIColor.secondarySystemBackground))

11:19 - Initialize the Preview view

Preview()

11:35 - Use an environment modifier to preview dark mode

.environment(\.colorScheme, .dark)

12:12 - Create a state variable for tracking progress

@State var progress = 0.25

12:18 - Pass the progress to the ProgressView initializer

ProgressView(progress)

12:32 - Create a method for incrementing progress

func increment() {
  self.progress += 0.25
}

12:40 - Add animation to the increment method

func increment() {
  withAnimation {
    self.progress += 0.25
  }
}

12:52 - Create a button

Button(action: increment)

13:01 - Add a text label to a button

Button(action: increment) {
  Text("Increment Progress")
}