Liquid Glass no SwiftUI: Guia Completo para o Novo Design do iOS 26

Domine o Liquid Glass no SwiftUI com este guia completo. Aprenda glassEffect, GlassEffectContainer, animações de morphing, estilos de botão e todas as APIs do novo design do iOS 26.

Se você acompanhou a WWDC 2025, já sabe que a Apple não brincou em serviço. O Liquid Glass é, sem exagero, a mudança visual mais marcante desde o iOS 7. Ele redefine completamente a aparência de todos os sistemas operacionais da Apple — do iPhone ao Mac, do Apple Watch à Apple TV. E não estamos falando de uma pintura nova por cima do que já existia: é uma reformulação profunda de como os elementos de interface interagem com o conteúdo por trás deles.

Neste guia, vamos explorar tudo que você precisa saber para dominar o Liquid Glass no SwiftUI. Dos conceitos fundamentais às APIs mais avançadas, passando por exemplos práticos que você pode usar agora mesmo nos seus projetos. Então, bora mergulhar nisso.

O que é o Liquid Glass?

O Liquid Glass é um material de interface translúcido que reflete e refrata o ambiente ao redor em tempo real. Diferente dos efeitos de desfoque que a gente já conhecia no iOS, ele simula o comportamento físico do vidro de verdade — dobra a luz, cria reflexos especulares dinâmicos e projeta sombras adaptativas que respondem ao conteúdo por baixo.

Pense em segurar uma peça de vidro polido sobre uma fotografia. A imagem não simplesmente fica borrada — ela se distorce sutilmente, reflexos aparecem nas bordas, e a luz parece dançar pela superfície conforme você muda o ângulo. É exatamente isso que a Apple conseguiu reproduzir digitalmente.

Características visuais principais

  • Refração em tempo real: O conteúdo por trás do elemento de vidro é distorcido de maneira fisicamente plausível, como se houvesse uma lente real sobre a tela.
  • Reflexos especulares (specular highlights): Pontos de luz brilhante aparecem nas bordas e superfícies do vidro, respondendo dinamicamente à iluminação do conteúdo ao redor.
  • Sombras adaptativas: As sombras projetadas pelo elemento de vidro se ajustam automaticamente ao fundo, garantindo legibilidade e profundidade visual.
  • Dobra de luz em tempo real: A luz que passa pelo material é curvada de forma dinâmica, criando aquele efeito de profundidade tridimensional que virou a marca registrada do novo design.
  • Adaptação ao contexto: O vidro muda sua aparência dependendo do que está por baixo — sobre fundos claros, fica mais sutil; sobre fundos escuros, os reflexos ficam mais evidentes.

O resultado é uma interface que parece viva. Não é só decoração — o Liquid Glass funciona como uma camada de hierarquia visual que separa a navegação e os controles do conteúdo principal, sem bloquear a visão do que está por baixo.

A API .glassEffect() — O Ponto de Partida

O modificador .glassEffect() é sua porta de entrada pro mundo do Liquid Glass no SwiftUI. Com uma única linha de código, você transforma qualquer view num elemento com o efeito de vidro líquido. Sinceramente, a Apple fez um trabalho impressionante ao encapsular toda a complexidade visual num modificador tão direto.

Uso básico

Na sua forma mais simples, basta adicionar o modificador a qualquer view:

Text("Olá, Liquid Glass!")
    .padding()
    .glassEffect()

Esse código cria um texto com fundo de vidro translúcido. O efeito se adapta automaticamente ao conteúdo por trás — se a view estiver sobre uma imagem colorida, o vidro vai refratar essas cores. Se estiver sobre um fundo escuro, os reflexos se ajustam para manter a legibilidade.

Por padrão, o .glassEffect() usa o estilo .regular, que oferece um nível de translucidez equilibrado. A forma do vidro se adapta ao formato da view, mas você pode controlar isso passando uma forma como parâmetro.

Vidro com formas personalizadas

O modificador aceita um parâmetro in: que permite definir a forma do efeito de vidro. Dá pra usar qualquer Shape do SwiftUI — círculos, retângulos arredondados, cápsulas e até formas customizadas:

Text("Perfil")
    .padding()
    .glassEffect(in: .circle)

Text("Menu")
    .padding()
    .glassEffect(in: .capsule)

Text("Card")
    .padding()
    .glassEffect(in: .rect(cornerRadius: 16))

A escolha da forma importa porque ela afeta como a luz interage com as bordas do elemento. Formas arredondadas criam reflexos mais suaves e orgânicos, enquanto formas com cantos mais definidos produzem reflexos mais nítidos e geométricos.

Vidro com tonalidade (tint)

Uma das funcionalidades que eu acho mais legais é a possibilidade de aplicar uma tonalidade colorida ao vidro. Isso é perfeito pra criar indicadores visuais, botões temáticos ou simplesmente dar personalidade à sua interface:

Button {
    // ação
} label: {
    Label("Favoritos", systemImage: "heart.fill")
        .frame(width: 50, height: 50)
}
.glassEffect(.regular.tint(.purple.opacity(0.8)))

Neste exemplo, o vidro ganha uma tonalidade roxa com 80% de opacidade. A cor se mescla com a refração, criando um vidro colorido que ainda mantém a translucidez e os reflexos. Você pode usar qualquer cor do SwiftUI, incluindo cores do Asset Catalog.

A opacidade da tonalidade controla a intensidade — valores mais baixos criam um vidro levemente colorido, quase imperceptível, enquanto valores mais altos produzem algo vibrante e chamativo. Encontrar o equilíbrio certo depende do contexto da sua interface.

Interatividade com .interactive()

O Liquid Glass não é apenas visual — ele também responde ao toque do usuário de maneiras bem legais. O modificador .interactive() adiciona feedback tátil ao efeito de vidro, tornando os elementos muito mais envolventes.

Button {
    // ação
} label: {
    Label("Início", systemImage: "house.fill")
        .labelStyle(.iconOnly)
        .frame(width: 50, height: 50)
}
.glassEffect(.regular.interactive())

Quando o usuário interage com um elemento que tem .interactive(), três coisas acontecem:

  1. Escalonamento: O elemento de vidro se contrai levemente quando pressionado e retorna ao tamanho original quando solto — aquela sensação satisfatória de "clique" visual.
  2. Quique (bounce): Ao soltar, o elemento faz um leve rebote, como se fosse feito de um material elástico. A física é calibrada pra ser sutil mas perceptível.
  3. Brilho (shimmer): Um reflexo de luz percorre a superfície do vidro durante a interação, reforçando a impressão de tridimensionalidade.

Esses efeitos combinados criam um feedback visual que complementa o feedback háptico do dispositivo. O resultado é uma interface que parece tangível, como se você estivesse tocando em peças de vidro de verdade.

GlassEffectContainer — Agrupando Elementos

Quando você tem múltiplos elementos com efeito de vidro próximos uns dos outros, usar .glassEffect() individualmente pode criar uma aparência fragmentada. É aí que entra o GlassEffectContainer — ele agrupa elementos de vidro, permitindo que compartilhem um fundo visual unificado e façam transições suaves entre si.

GlassEffectContainer(spacing: 20) {
    HStack(spacing: 16) {
        Button("Início") { }
            .glassEffect()

        Button("Buscar") { }
            .glassEffect()

        Button("Perfil") { }
            .glassEffect()
    }
    .padding()
}

O parâmetro spacing controla o espaçamento visual entre os elementos. Quando estão próximos o suficiente (dentro do valor de spacing), eles se fundem numa única peça de vidro, com divisores sutis entre cada item. Quando estão mais afastados, cada um mantém sua própria "peça" independente.

O GlassEffectContainer também é essencial pra habilitar as animações de morphing — uma das funcionalidades mais impressionantes do Liquid Glass, que vamos ver a seguir.

Benefícios do GlassEffectContainer

  • Coerência visual: Elementos agrupados compartilham o mesmo contexto de refração, criando uma aparência unificada.
  • Performance otimizada: O sistema pode otimizar a renderização de múltiplos efeitos quando estão agrupados.
  • Morphing habilitado: Apenas elementos dentro de um mesmo contêiner podem fazer animações de morphing entre si.
  • Espaçamento inteligente: O contêiner gerencia automaticamente a fusão e separação visual baseado no espaçamento.

Animações de Morphing com .glassEffectID()

As animações de morphing são, pra mim, o recurso mais visualmente espetacular do Liquid Glass. Elas permitem que um elemento de vidro se transforme suavemente em outro, mantendo a continuidade visual durante transições de estado.

Pra criar uma animação de morphing, você precisa de três coisas: um GlassEffectContainer, um @Namespace para identificação, e o modificador .glassEffectID(_:in:) para vincular os estados:

struct MorphingView: View {
    @Namespace var glassNamespace
    @State private var isExpanded = false

    var body: some View {
        GlassEffectContainer {
            if isExpanded {
                HStack(spacing: 12) {
                    Button("Casa") { }
                        .glassEffect()
                        .glassEffectID("nav", in: glassNamespace)
                    Button("Buscar") { }
                        .glassEffect()
                    Button("Perfil") { }
                        .glassEffect()
                }
            } else {
                Button {
                    withAnimation {
                        isExpanded.toggle()
                    }
                } label: {
                    Image(systemName: "line.3.horizontal")
                }
                .glassEffect()
                .glassEffectID("nav", in: glassNamespace)
            }
        }
    }
}

Repare como o identificador "nav" é usado em ambos os estados. Quando o estado muda, o SwiftUI anima a transição automaticamente: o botão de menu se expande pra virar a barra de navegação completa, e vice-versa. O vidro se estica, se deforma e se recompõe de maneira fluida — como se fosse um material maleável de verdade.

O @Namespace garante que a vinculação é única dentro do escopo da view. Você pode ter múltiplas animações de morphing simultâneas, desde que cada par use um identificador diferente.

Dicas para animações de morphing eficazes

Pra obter os melhores resultados, mantenha os elementos relativamente próximos em tamanho. Transições entre elementos com diferenças extremas de tamanho podem ficar meio estranhas. E sempre use withAnimation pra disparar a mudança de estado — sem a animação explícita, a transição será abrupta e o morphing não vai acontecer.

Estilos de Botão: .glass e .glassProminent

A Apple introduziu dois novos estilos de botão dedicados ao Liquid Glass, facilitando a adoção do novo design sem precisar configurar o efeito na mão:

VStack(spacing: 20) {
    Button("Ação Secundária") { }
        .buttonStyle(.glass)

    Button("Ação Principal") { }
        .buttonStyle(.glassProminent)
}

O estilo .glass cria um botão com aparência de vidro sutil e transparente — ideal pra ações secundárias. Já o .glassProminent produz um botão mais opaco e destacado, com uma tonalidade que chama atenção — perfeito pra ações primárias.

A diferença é proposital e segue as diretrizes de hierarquia visual da Apple. Use .glassProminent com moderação — assim como o antigo .borderedProminent, ele deve ser reservado pra ação mais importante da tela. O .glass pode ser usado de forma mais liberal.

Ambos os estilos se adaptam automaticamente ao modo claro e escuro, ajustando reflexos e opacidade pra garantir legibilidade em qualquer situação.

Navegação e Tab Bars com Liquid Glass

Uma das mudanças mais visíveis do iOS 26 é a transformação completa das barras de navegação e tab bars. Agora elas usam Liquid Glass por padrão, e a Apple trouxe várias APIs novas pra personalizar esse comportamento.

Minimização da Tab Bar ao rolar

Um dos padrões mais elegantes do iOS 26 é a tab bar se minimizar automaticamente quando o usuário rola o conteúdo pra baixo, liberando mais espaço na tela pro que realmente importa:

TabView {
    Tab("Início", systemImage: "house.fill") {
        ScrollView {
            // conteúdo
        }
    }

    Tab("Buscar", systemImage: "magnifyingglass") {
        // conteúdo
    }
}
.tabBarMinimizeBehavior(.onScrollDown)

O modificador .tabBarMinimizeBehavior(.onScrollDown) faz a tab bar encolher suavemente quando o usuário rola pra baixo e retornar ao tamanho completo quando rola pra cima. A animação é extremamente fluida e mantém o efeito de vidro durante toda a transição.

Acessório inferior da Tab View

O tabViewBottomAccessory permite adicionar conteúdo personalizado abaixo da tab bar, como um player de música ou uma barra de progresso. Esse acessório se integra visualmente com o Liquid Glass da tab bar, criando uma experiência coesa.

Extensão do fundo e efeitos de borda

O modificador backgroundExtensionEffect permite que o efeito de vidro se estenda pra cobrir áreas adicionais, como barras de status personalizadas. Já o scrollEdgeEffectStyle controla como o vidro interage com as bordas do scroll — por padrão, fica mais transparente quando o conteúdo está no topo e mais opaco conforme o usuário rola.

Esses detalhes podem parecer sutis, mas fazem uma diferença enorme na percepção de qualidade. São essas micro-interações que distinguem um app bem feito de um app medíocre no ecossistema Apple.

Personalização de Toolbars

As toolbars do SwiftUI também foram atualizadas pra se integrar com o Liquid Glass. As novas APIs permitem agrupar itens, compartilhar fundos visuais e adicionar badges.

ToolbarSpacer para agrupamento

O novo ToolbarSpacer cria separações visuais entre grupos de itens na toolbar. Com o tipo .fixed, ele faz com que os itens de cada lado sejam agrupados em "ilhas" de vidro separadas:

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button("Editar", systemImage: "pencil") { }
    }

    ToolbarSpacer(.fixed)

    ToolbarItem(placement: .topBarTrailing) {
        Button("Compartilhar", systemImage: "square.and.arrow.up") { }
    }
}

Neste exemplo, os botões "Editar" e "Compartilhar" ficam em grupos visuais separados. Sem o ToolbarSpacer, seriam agrupados automaticamente numa única ilha de vidro. Essa separação é útil pra criar hierarquia e agrupar ações relacionadas.

Visibilidade compartilhada do fundo

O modificador sharedBackgroundVisibility controla se os itens da toolbar compartilham um fundo de vidro unificado ou se cada um tem seu próprio fundo independente — dando controle granular sobre a aparência em diferentes contextos.

Badges nos itens da toolbar

O modificador badge agora funciona direto nos itens da toolbar, exibindo indicadores numéricos sobre os botões de vidro. O badge se integra com o Liquid Glass, mantendo tudo coerente:

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button("Notificações", systemImage: "bell.fill") { }
            .badge(5)
    }
}

Integração com Busca

O sistema de busca do SwiftUI foi aprimorado pra funcionar em harmonia com o Liquid Glass. O searchable continua sendo o ponto de entrada, mas agora trabalha junto com dois novos modificadores:

  • searchToolbarBehavior: Controla como a barra de busca se comporta dentro da toolbar de vidro — se aparece sempre visível, se se minimiza com o scroll, ou se só aparece quando o usuário puxa pra baixo.
  • searchRole: Define o papel semântico da busca, afetando a aparência visual e acessibilidade. Uma busca com role de filtro pode ter visual diferente de uma busca de navegação.

A barra de busca agora usa Liquid Glass automaticamente, com o campo de texto dentro de uma cápsula translúcida. Quando o usuário toca no campo, ele se expande com uma animação de morphing, ocupando mais espaço na toolbar.

NavigationStack {
    List {
        // conteúdo da lista
    }
    .searchable(text: $searchText, prompt: "Buscar itens...")
    .searchToolbarBehavior(.minimize)
}

Atualizações em Controles

O Liquid Glass não se limita a barras de navegação e botões. Vários controles fundamentais do SwiftUI receberam atualizações pra se alinhar com o novo design.

Sliders com marcas de tique

Os sliders agora suportam marcas visuais (tick marks) que indicam posições discretas ao longo da faixa de valores. Isso é especialmente útil quando o slider representa incrementos definidos:

Slider(value: $volume, in: 0...100, step: 10) {
    Text("Volume")
}

Quando você define um step, o slider automaticamente exibe marcas nos pontos correspondentes. O controle deslizante "encaixa" nesses pontos com um feedback háptico sutil — a interação fica muito mais precisa e satisfatória.

Valor neutro em Sliders

A nova propriedade neutralValue permite definir um ponto de referência visual. A trilha do slider é colorida de forma diferente acima e abaixo desse ponto neutro, facilitando a visualização de desvios. Ideal pra controles como balanço de áudio, ajuste de temperatura ou qualquer configuração com um valor "zero" central.

Menus com ícones

Os menus do SwiftUI agora exibem ícones de forma mais proeminente, usando o estilo visual do Liquid Glass. Cada item pode ter seu próprio SF Symbol, e a interação de hover/tap mostra o efeito de vidro individualmente.

Concentricidade de Cantos com containerConcentric

Um dos detalhes mais refinados do Liquid Glass é o conceito de concentricidade de cantos. Quando você tem um elemento arredondado dentro de outro (como um botão dentro de um card), os raios de curvatura precisam ser concêntricos — o raio interno deve ser proporcionalmente menor que o externo, mantendo a distância entre as bordas constante.

A Apple introduziu o valor .containerConcentric que calcula automaticamente o raio ideal:

Button("Confirmar") { }
    .frame(maxWidth: .infinity)
    .padding()
    .glassEffect(in: .rect(cornerRadius: .containerConcentric))

Nada de calcular raio de curvatura na mão. O sistema analisa o contêiner pai e determina o raio que mantém a concentricidade perfeita. Adeus àqueles cantos que pareciam "desalinhados" quando elementos arredondados eram aninhados.

Esse nível de atenção ao detalhe é típico da Apple, e o fato de terem exposto isso como API mostra que esperam que a gente também se preocupe com esse acabamento. Num mundo onde o Liquid Glass está em toda parte, cantos não concêntricos se destacam — e não de um jeito bom.

Boas Práticas para Usar Liquid Glass

Antes de sair aplicando .glassEffect() em tudo (eu sei que a tentação é grande), vale entender a filosofia por trás do Liquid Glass e o que a Apple recomenda.

Use vidro apenas na camada de navegação e sobreposição

Essa é talvez a regra mais importante: o Liquid Glass foi feito pra elementos de navegação, controles e sobreposições — não pra conteúdo. Barras de navegação, tab bars, botões flutuantes, cards de ação, toolbars — esses são os candidatos ideais. Não aplique vidro em células de lista, cards de conteúdo ou imagens.

A razão é simples: o Liquid Glass cria uma hierarquia onde a camada de vidro "flutua" sobre o conteúdo. Se o próprio conteúdo for feito de vidro, essa hierarquia desmorona e a interface vira uma confusão translúcida.

Use GlassEffectContainer para múltiplos elementos

Sempre que tiver dois ou mais elementos de vidro próximos na tela, envolva-os num GlassEffectContainer. Isso garante que:

  • Os elementos compartilhem o mesmo contexto de refração, evitando inconsistências.
  • As animações de morphing entre eles sejam possíveis.
  • O sistema otimize a renderização, melhorando a performance.
  • A fusão e separação visual aconteça corretamente.

Anime as transições

O Liquid Glass brilha (literalmente) quando animado. Sempre use withAnimation pra transições de estado que envolvam elementos de vidro. A diferença entre uma transição animada e uma abrupta é dramática — sem animação, o vidro simplesmente aparece e desaparece; com animação, ele se materializa e se dissolve suavemente.

withAnimation(.spring(duration: 0.4, bounce: 0.2)) {
    showOverlay.toggle()
}

Animações com mola (.spring) funcionam particularmente bem com o Liquid Glass, já que o bounce complementa o comportamento visual do vidro.

Cuidado com a legibilidade

Como o vidro é translúcido, o conteúdo por trás pode interferir na legibilidade do texto. A Apple resolveu isso parcialmente com sombras adaptativas, mas em fundos muito complexos pode ser necessário ajustar a tonalidade ou opacidade pra garantir que o texto fique legível.

Respeite a densidade de informação

O Liquid Glass ocupa mais "espaço visual" do que elementos opacos, por causa dos reflexos e sombras. Não tente espremer muitos elementos de vidro numa área pequena — dê espaço pra que cada elemento respire.

Teste em diferentes fundos

Como o efeito depende do que está por baixo, teste sua interface sobre diferentes tipos de conteúdo — imagens claras, escuras, gradientes, cores sólidas. O que funciona perfeitamente sobre uma foto de paisagem pode ficar estranho sobre um fundo branco.

Requisitos de Plataforma

O Liquid Glass está disponível em todos os sistemas da Apple a partir da geração 26:

  • iOS 26.0+ — iPhone
  • iPadOS 26.0+ — iPad
  • macOS 26.0+ — Mac
  • watchOS 26.0+ — Apple Watch
  • tvOS 26.0+ — Apple TV
  • Xcode 26 — necessário para compilar

Se o seu app ainda precisa suportar versões anteriores, vai precisar de verificações de disponibilidade:

if #available(iOS 26.0, *) {
    Text("Novo Design")
        .padding()
        .glassEffect()
} else {
    Text("Novo Design")
        .padding()
        .background(.ultraThinMaterial)
        .clipShape(RoundedRectangle(cornerRadius: 12))
}

Nas versões anteriores, o fallback mais adequado é usar os materiais do SwiftUI (.ultraThinMaterial, .thinMaterial, etc.), que oferecem translucidez similar — mas sem a refração e os reflexos dinâmicos.

O Xcode 26 traz melhorias no canvas de preview, permitindo visualizar o Liquid Glass em tempo real durante o desenvolvimento. O simulador também reproduz o efeito com boa fidelidade, embora a experiência completa (especialmente os reflexos baseados no sensor de movimento) só seja apreciada num dispositivo físico.

Exemplo Prático Completo

Pra consolidar tudo, vamos construir um exemplo mais completo — uma tela de app de música com navegação em Liquid Glass, botões interativos e animações de morphing:

struct MusicPlayerView: View {
    @Namespace var playerNamespace
    @State private var isPlayerExpanded = false
    @State private var volume: Double = 50
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            TabView {
                Tab("Início", systemImage: "house.fill") {
                    ScrollView {
                        VStack(spacing: 24) {
                            ForEach(0..<20) { index in
                                HStack {
                                    RoundedRectangle(cornerRadius: 8)
                                        .fill(.gray.opacity(0.3))
                                        .frame(width: 60, height: 60)

                                    VStack(alignment: .leading) {
                                        Text("Música \(index + 1)")
                                            .font(.headline)
                                        Text("Artista")
                                            .font(.subheadline)
                                            .foregroundStyle(.secondary)
                                    }

                                    Spacer()
                                }
                                .padding(.horizontal)
                            }
                        }
                    }
                    .searchable(text: $searchText, prompt: "Buscar músicas...")
                }

                Tab("Buscar", systemImage: "magnifyingglass") {
                    Text("Explorar")
                }

                Tab("Biblioteca", systemImage: "music.note.list") {
                    Text("Sua Biblioteca")
                }
            }
            .tabBarMinimizeBehavior(.onScrollDown)
            .overlay(alignment: .bottom) {
                GlassEffectContainer {
                    if isPlayerExpanded {
                        VStack(spacing: 16) {
                            RoundedRectangle(cornerRadius: 12)
                                .fill(.gray.opacity(0.3))
                                .frame(height: 200)

                            Text("Nome da Música")
                                .font(.title2.bold())

                            Slider(value: $volume, in: 0...100, step: 10) {
                                Text("Volume")
                            }
                            .padding(.horizontal)

                            HStack(spacing: 40) {
                                Button { } label: {
                                    Image(systemName: "backward.fill")
                                }
                                .buttonStyle(.glass)

                                Button { } label: {
                                    Image(systemName: "pause.fill")
                                        .font(.title)
                                }
                                .buttonStyle(.glassProminent)

                                Button { } label: {
                                    Image(systemName: "forward.fill")
                                }
                                .buttonStyle(.glass)
                            }
                        }
                        .padding()
                        .glassEffect(in: .rect(cornerRadius: 24))
                        .glassEffectID("player", in: playerNamespace)
                        .onTapGesture {
                            withAnimation(.spring(duration: 0.5, bounce: 0.2)) {
                                isPlayerExpanded = false
                            }
                        }
                    } else {
                        HStack {
                            RoundedRectangle(cornerRadius: 6)
                                .fill(.gray.opacity(0.3))
                                .frame(width: 40, height: 40)

                            Text("Nome da Música")
                                .font(.subheadline)

                            Spacer()

                            Button { } label: {
                                Image(systemName: "pause.fill")
                            }
                        }
                        .padding()
                        .glassEffect(in: .capsule)
                        .glassEffectID("player", in: playerNamespace)
                        .onTapGesture {
                            withAnimation(.spring(duration: 0.5, bounce: 0.2)) {
                                isPlayerExpanded = true
                            }
                        }
                    }
                }
                .padding(.horizontal)
                .padding(.bottom, 60)
            }
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button("Perfil", systemImage: "person.circle") { }
                }

                ToolbarSpacer(.fixed)

                ToolbarItem(placement: .topBarTrailing) {
                    Button("Configurações", systemImage: "gearshape") { }
                }
            }
        }
    }
}

Este exemplo combina vários conceitos: tab bar com minimização automática, um player que faz morphing entre versões compacta e expandida, botões .glass e .glassProminent, slider com tick marks, busca integrada e toolbar com ToolbarSpacer. É um bom ponto de partida pra experimentar com o Liquid Glass num contexto real.

Migração de Apps Existentes

Se você tem um app existente, a boa notícia é que muito acontece automaticamente. Quando compila com o SDK do iOS 26, as barras de navegação, tab bars e toolbars padrão adotam o Liquid Glass sem nenhuma alteração de código.

Porém, componentes customizados que replicam barras de navegação ou controles flutuantes vão precisar de atualização manual. Elementos com .background(.ultraThinMaterial) podem migrar pra .glassEffect(), e botões translúcidos podem adotar .buttonStyle(.glass).

A recomendação é fazer a migração gradualmente, começando pelas telas mais visíveis. O Liquid Glass pode revelar problemas de layout que não eram perceptíveis com fundos opacos, então reserve tempo pra polir os detalhes.

Considerações de Performance

O Liquid Glass envolve cálculos gráficos pesados — refração em tempo real, reflexos dinâmicos e sombras adaptativas não são baratos computacionalmente. A Apple otimizou o pipeline de renderização pra isso, e em hardware moderno (A16 e posteriores) o impacto é mínimo.

Ainda assim, vale ficar atento:

  • Evite empilhar camadas de vidro. Vidro sobre vidro sobre vidro cria uma cascata de cálculos que pode impactar a performance, especialmente em dispositivos mais antigos.
  • Use GlassEffectContainer. O contêiner permite otimizações que não são possíveis com elementos soltos.
  • Use o Instruments. O Xcode 26 traz ferramentas de profiling específicas pra efeitos visuais, incluindo Liquid Glass.
  • Teste em dispositivos reais. O simulador não representa fielmente a performance em hardware real. Teste especialmente nos modelos mais antigos suportados.

O Futuro do Design no Ecossistema Apple

O Liquid Glass não é tendência passageira — é a fundação do design da Apple pros próximos anos. Assim como o flat design do iOS 7 definiu uma década de interfaces, o Liquid Glass promete ser o paradigma dominante por um bom tempo.

Pra desenvolvedores, isso significa que investir em dominar essas APIs agora vai valer muito a pena. Os usuários vão se acostumar rápido com a nova estética e esperar que todos os apps estejam alinhados. Apps que não adotarem o Liquid Glass vão parecer desatualizados.

Além disso, a filosofia por trás — interfaces transparentes, que revelam em vez de esconder, que fluem e se transformam — se alinha com tendências como spatial computing e interfaces ambientais. O que aprendemos hoje com Liquid Glass no SwiftUI será diretamente aplicável quando essas tecnologias amadurecerem.

Conclusão

O Liquid Glass é a maior evolução visual do ecossistema Apple desde o iOS 7, e o SwiftUI entrega um conjunto de APIs elegante pra adotá-lo nos seus projetos. Do simples .glassEffect() às animações de morphing com .glassEffectID(), cada ferramenta foi pensada pra ser acessível sem sacrificar flexibilidade.

As chaves pro sucesso: respeitar a hierarquia visual (vidro pra navegação, não pra conteúdo), usar GlassEffectContainer pra agrupar elementos, animar transições com cuidado, e testar em diferentes contextos e dispositivos.

O iOS 26 e companhia inauguram uma nova era de design, e o Xcode 26 traz tudo que você precisa pra fazer parte dela. Comece a experimentar com os exemplos deste guia e, principalmente, divirta-se criando interfaces que realmente parecem mágicas.

O futuro das interfaces é translúcido, refrativo e dinâmico. O futuro é Liquid Glass.