Skins

Um Skin define a identidade visual estrutural de todos os componentes: forma (cantos), espessura de borda, espaçamento, sombras e ícones padrão. Há três embutidos: MaterialSkin, IOSSkin e FlutterSkin.

Skin ≠ cores. Skin = estrutura/renderer; a paleta (claro/escuro, primary/surface…) vem do ColorScheme/ThemeMode. Um skin custom muda forma/espaçamento, não cor.

Skin padrão

Skin.get() retorna MaterialSkin por padrão — ou IOSSkin automaticamente no iOS.

Exemplo completo (copiar, colar e rodar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // Styles
import dev.crossfly.ui.skin.*;    // Skin, MaterialSkin, IOSSkin, FlutterSkin

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      Skin.set(new IOSSkin());   // skin global = estrutura/forma iOS (cores continuam vindo do tema)
      setLayout(new VerticalLayout());

      // Botões para trocar o skin global em tempo real:
      Button material = new Button("Skin Material");
      material.onAction(c -> { Skin.set(new MaterialSkin()); restyle(); });
      add(LAY_AUTO, material);

      Button ios = new Button("Skin iOS");
      ios.onAction(c -> { Skin.set(new IOSSkin()); restyle(); });
      add(LAY_AUTO, ios);

      Button flutter = new Button("Skin Flutter");
      flutter.onAction(c -> { Skin.set(new FlutterSkin()); restyle(); });
      add(LAY_AUTO, flutter);

      // Skin por componente: este botão fica iOS mesmo que o global mude.
      Button fixoIos = new Button("Sempre iOS");
      fixoIos.skin(new IOSSkin());
      add(LAY_AUTO, fixoIos);
   }
}

Os trechos abaixo mostram só o miolo (o que vai dentro de onShow()). Para rodar, coloque-os no esqueleto MainWindow acima.

Trocar o skin global

Afeta todos os componentes que não têm skin próprio:

Skin.set(new IOSSkin());       // toda a UI ganha o visual iOS
Skin.set(new FlutterSkin());   // … ou Flutter

Skin por componente

Sobrescreve o global só naquele componente:

meuBotao.skin(new IOSSkin());  // este botão fica iOS, o resto continua Material

Skin customizado (mude forma/espaçamento, não cor)

Estenda um skin e sobrescreva os hooks de estrutura:

public class RoundedSkin extends MaterialSkin {
   @Override public float borderRadius() { return 1.5f; }  // cantos bem arredondados
   @Override public float borderThick()  { return 0.05f; } // borda fina
}
// aplicar globalmente:
Skin.set(new RoundedSkin());

Para adaptar cores ao claro/escuro, não mexa no skin — use ColorScheme/ThemeMode (ver Modo claro/escuro).

Como as camadas interagem

Boas práticas

• Escolha um skin global no bootstrap; use .skin(...) por componente só em exceções.
• Skin custom = forma/espaçamento/sombra. Cor e claro/escuro = ColorScheme.

Erros comuns

• Tentar mudar cores sobrescrevendo o skin — cores vêm do ColorScheme, não do skin.
• Misturar skins diferentes na mesma tela sem necessidade (inconsistência visual).

Veja também

• Esquemas de cores · Modo claro/escuro · Estilizar componentes