Pular para conteúdo

Projeto 09: Auto Layout Avançado, Aninhamento e Responsividade 📱💻

Escopo do Projeto

Objetivo: Construir estruturas de layout complexas utilizando aninhamento de Auto Layouts (Nested Auto Layout), dimensionamento 'Fill Container', 'Hug Contents' e limites de largura mínima e máxima (Min/Max Width).

🎯 1. Contexto & Desafio Prático

Interfaces modernas precisam se adaptar fluidamente da tela de um smartphone compacto até um monitor ultrawide. Você construirá um card de produto de e-commerce totalmente responsivo que se estica ou comprime sem quebrar o alinhamento de preços, fotos ou botões de compra.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Aninhamento Hierárquico): Estruturar o card com no mínimo 3 níveis de Auto Layout aninhados: Card Root (Vertical) -> Content Container (Vertical) -> Price & Action Row (Horizontal).
  • R2 (Regras de Resizing): Configurar o Card Root com largura responsiva (Fill Container no grid), imagem com Fill Container e botão com Hug Contents.
  • R3 (Limites de Min/Max Width): Aplicar min-width: 280px e max-width: 480px no card principal para evitar deformações em viewports extremos.
  • R4 (Teste de Redimensionamento): Arrastar as alças do frame pai comprovando a perfeita adaptação dos textos e elementos internos.

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    CardRoot["Card Root: Auto Layout Vertical (Fill Container)"] --> Img["Header Image (Fill Container x 200px Fixed)"]
    CardRoot --> ContentBox["Content Box: Auto Layout Vertical (Padding: 16px)"]
    ContentBox --> Title["Título do Produto (Fill Container)"]
    ContentBox --> BottomRow["Price & Action Row: Auto Layout Horizontal (Space Between)"]
    BottomRow --> Price["Preço Formatado (Hug)"]
    BottomRow --> Button["Botão 'Comprar' (Hug)"]
    style CardRoot fill:#e1f5fe,stroke:#01579b
    style ContentBox fill:#fff3e0,stroke:#e65100
    style BottomRow fill:#f3e5f5,stroke:#7b1fa2
    style Button fill:#e8f5e9,stroke:#2e7d32

💻 4. Especificação Técnica & Código de Referência

// flex_nested_card.css
.product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 280px;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
}
.product-card .body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.product-card .footer-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

📦 5. Critérios de Avaliação e Entrega

  1. Card redimensionando perfeitamente entre 280px e 480px de largura.
  2. Textos configurados para quebra automática de linha sem estourar o card.
  3. Uso estrito de Auto Layout aninhado com propriedades Fill e Hug.