dimillian/swiftui-ui-patterns

O que swiftui-ui-patterns faz?

Melhores práticas e orientação baseada em exemplos para construir visualizações e componentes SwiftUI, incluindo hierarquias de navegação, modificadores de visualização personalizados e layouts responsivos com pilhas e grades. Use ao criar ou refatorar UI SwiftUI, projetar arquitetura de abas com TabView, compor telas com VStack/HStack, gerenciar @State ou @Binding, construir interfaces iOS declarativas ou precisar de padrões e exemplos específicos para componentes.

Visão Geral

Este skill fornece um repositório de padrões comprovados para desenvolvimento SwiftUI. Ao contrário de documentação genérica, ele oferece exemplos concretos e aplicáveis para cenários comuns do dia a dia.

Quando Usar

• Criando ou refatorando view SwiftUI
• Projetando navegação com NavigationStack ou NavigationSplitView
• Compondo layouts com VStack, HStack, LazyVGrid, LazyHGrid
• Gerenciando estado com @State, @Binding, @Observable, @Environment
• Construindo interfaces com TabView
• Criando modificadores de visualização reutilizáveis

Práticas Recomendadas

1. Divisão de Views: Mantenha views pequenas e focadas. Extraia subviews conforme necessário.
2. Modificadores: Prefira ViewModifier a modificar diretamente cada view.
3. Estado: Use a menor quantidade de estado possível. Prefira @Binding para dados derivados.
4. Navegação: Use NavigationStack para hierarquias simples e NavigationSplitView para layouts de múltiplas colunas.
5. Performance: Use LazyVStack/LazyVGrid para listas grandes para carregamento sob demanda.

Exemplos Rápidos

Modificador de Visualização Personalizado

struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color(.systemBackground))
            .cornerRadius(12)
            .shadow(color: .gray.opacity(0.2), radius: 5, x: 0, y: 2)
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardStyle())
    }
}

Layout Responsivo com Grade

struct PhotoGrid: View {
    let columns = [GridItem(.adaptive(minimum: 100))]
    let photos: [String]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 16) {
                ForEach(photos, id: \.self) { photo in
                    Image(photo)
                        .resizable()
                        .scaledToFit()
                        .frame(height: 100)
                }
            }
            .padding()
        }
    }
}

Plataformas Suportadas

• iOS 16+
• iPadOS 16+
• macOS 13+
• watchOS 9+
• tvOS 16+

Integração

Clone ou referencie este repositório como submódulo em seu projeto Xcode. Os exemplos podem ser adaptados diretamente para seu código.

git submodule add https://github.com/dimillian/swiftui-ui-patterns.git

Contribuição

Contribuições são bem-vindas. Envie pull requests com novos padrões, exemplos ou correções de bugs seguindo os padrões existentes.