SwiftUI Gists

SwiftUI Components & Extension that saves iOSDev time.
### UIKit is **EVENT-Driven** framework - We could reference each view in the hierarchy, update its appearance when the view is loaded or as a reaction on an event.
### SwiftUI is **Declarative, State Driven** framework - We cannot reference any view in the hierarchy, neither can we directly mutate a view as a reaction to an event. 
Instead, we mutate the state bound to the view. Delegates, target-actions, responder chain, KVO .. replaced with Closures & bindings.

Present view Modally (fullscreen) [ for iOS 14.0+]

         @State var isQuizPlayPresented = false
            
            Button(action: {
                  isQuizPlayPresented.toggle()
              }) {
                  Text("Get Started")
              }
              .padding()
              .fullScreenCover(isPresented: $isQuizPlayPresented, onDismiss: nil, content: QuizPlayView.init)

Dismiss a presented view (modally)

    @Environment(\.presentationMode) private var presentationMode // define
     self.presentationMode.wrappedValue.dismiss() // In button action

Advanced:

            .fullScreenCover(isPresented: $isResultView,
                             onDismiss: {
                self.presentationMode.wrappedValue.dismiss() // Dismisses current view along with Child view dismissed
            }, content: {
                QuizResultView(totalScore: 10) // Pass custom parameter to child view
            })

Make the width of element fill till parent width

        VStack(alignment: .center) {
          Rectangle()
            .frame(height: 0.0) // -------- note this 
           Text("SHOW DETAILS")
        }
        .background(.yellow)
        

Basic Rail :

struct QuizRail: View {
  
  var body: some View {
    ScrollView(.horizontal) {
      HStack(spacing: 16) {
        ForEach((1...10), id: \.self) {_ in
          Rectangle()
            .frame(width: 150, height: 200)
            .cornerRadius(8)
        }
      }
      .padding(.horizontal, 16)
    }
  }
}

List Options without separator (from iOS 15.0+),

• Row background

          List {
            ForEach(items, id: \.self) { item in
              Text("item here")
                .listRowBackground(Color.yellow)
                .listRowInsets(.none)
                .listRowSeparator(.hidden)
            }
          }
          .listStyle(.plain)

• Swipe Actions

               .swipeActions(edge: .leading, allowsFullSwipe: false) {
                  Button {
                    print("Leading swipe action on \(item)")
                  } label: {
                    Label("Favorite", systemImage: "star.fill")
                  }
                  .tint(.yellow)
                }
                .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                  Button(role: .destructive) {
                    print("Trailing swipe action on \(item)")
                  } label: {
                    Label("Delete", systemImage: "trash.fill")
                  }
                  
                  Button {
                    print("More actions on \(item)")
                  } label: {
                    Label("More", systemImage: "ellipsis")
                  }
                  .tint(.blue)
                }

Tip: Give .tint(.clear) if you need just icon without background color.

☢️ A workaround calculated the height of ScrollView

  @State var heightCalculated = 0.0

  var body: some View {

    ScrollView {
      ForEach(0..<10) { i in
        Text("\(i)")
      }
      .background(
        GeometryReader { proxy in
          Color.clear.onAppear { 
            heightCalculated = proxy.size.height
            debugPrint(proxy.size.height)
          }
        }
      )

    }
    .frame(height: heightCalculated)
  }

To make Content view as parameter. A better way to build Generic views.

struct ContainerView<Content: View>: View {
  @ViewBuilder var content: Content
    
  var body: some View {
    content
  }
}


// Usage
ContainerView{
  ...
}

Debugging:

1. let _ = Self._printChanges() print statement to trace view lifecycle
2. let _ = print("Update XYZView") We use this print to trace whether the body of Particular view (eg. SpyView) is executed or not.

ref: https://sarunw.com/posts/how-to-do-print-debugging-in-swiftui/

To make fullscreen view to fill entire screen:

ZStack {
   Text("Hello").background(.yellow)
}
.frame(maxWidth: .infinity, maxHeight: .infinity) // this is important
.background(.blue)

public extension View {

  // Creates a outline border for text of having any font size.
  func outlinedText(shadowColor: Color = .white, radius: CGFloat = 0, offset: CGFloat = 0.5) -> some View {
    self
      .shadow(color: shadowColor, radius: radius, x: offset, y: 0)  // Right
      .shadow(color: shadowColor, radius: radius, x: 0, y: offset)  // Down
      .shadow(color: shadowColor, radius: radius, x: -offset, y: 0) // Left
      .shadow(color: shadowColor, radius: radius, x: 0, y: -offset) // Up
  }
}