TransferKnowledgeSwiftUIEfficiency.swift

TransferKnowledgeSwiftUIEfficiency.swift

// Analyze & Result - 1. ViewBuilder
// BEFORE - without ViewBuilder
struct MyStack<Content: View>: View {
    let content: () -> Content   // no @ViewBuilder here

    var body: some View {
        VStack {
            content()
        }
    }
}
// AFTER - with ViewBuilder
struct ContentView: View {
    var body: some View {
        MyStack {
            Text("Hello")
            Text("World") // ❌ Compile error: "Extra argument in call"
        }
    }
}

//==========================================================================================
//==========================================================================================

// Analyze & Result - 2. Custom ViewModifier
// BEFORE - without Custom ViewModifier
Text("Submit")
    .font(.headline)
    .padding()
    .background(Color.blue)
    .cornerRadius(8)
    .foregroundColor(.white)

Text("Cancel")
    .font(.headline)
    .padding()
    .background(Color.blue)
    .cornerRadius(8)
    .foregroundColor(.white)


// AFTER - with Custom ViewModifier
struct CapsuleStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.headline)
            .padding()
            .background(Color.blue)
            .cornerRadius(8)
            .foregroundColor(.white)
    }
}
extension View {
    func capsuleStyle() -> some View {
        self.modifier(CapsuleStyle())
    }
}
// Usage
Text("Submit").capsuleStyle()
Text("Cancel").capsuleStyle()

//==========================================================================================
//==========================================================================================

// Analyze & Result - 3. ButtonStyle / LabelStyle
// BEFORE - without ButtonStyle
Button("Sign In") {
    // action
}
.padding()
.frame(maxWidth: .infinity)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)

// AFTER - with custom ButtonStyle
struct PrimaryButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .frame(maxWidth: .infinity)
            .background(configuration.isPressed ? Color.blue.opacity(0.7) : Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            .scaleEffect(configuration.isPressed ? 0.98 : 1.0)
    }
}
// Usage
Button("Sign In") {
    // action
}
.buttonStyle(PrimaryButtonStyle())