# Skins（Material / iOS / Flutter） > 切换视觉标识 — 结构、形状和间距 — 可全局或按组件切换。 Source: https://crossfly.dev/zh/docs/ui/theming/skins — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt # Skins `Skin` 定义了所有组件的**结构性视觉标识**：形状（圆角）、边框粗细、间距、阴影和默认图标。内置了三种： **`MaterialSkin`**、**`IOSSkin`** 和 **`FlutterSkin`**。 > **Skin ≠ 颜色。** Skin = **结构/渲染器**；而**调色板**（明/暗、primary/surface…）来自 > [`ColorScheme`/`ThemeMode`](/docs/ui/theming/color-schemes)。自定义 skin 改变的是**形状/间距**，而非颜色。 ## 默认 Skin `Skin.get()` 默认返回 `MaterialSkin` — 或**在 iOS 上自动返回 `IOSSkin`**。 ## 完整示例（复制、粘贴并运行） ```java 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 /** 可执行的主界面。将 launcher 指向此类（classname）并运行：gradlew :lwjgl3:run */ public class MainWindow extends Window { @Override public void onShow() throws Exception { super.onShow(); Skin.set(new IOSSkin()); // 全局皮肤 = iOS 的结构/形态（颜色仍来自主题） setLayout(new VerticalLayout()); // 实时切换全局皮肤的按钮： 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); // 按组件设置皮肤：即使全局改变，此按钮仍保持 iOS。 Button fixoIos = new Button("Sempre iOS"); fixoIos.skin(new IOSSkin()); add(LAY_AUTO, fixoIos); } } ``` > 下面的片段只展示了**核心部分**（放入 `onShow()` 内部的内容）。要运行它们，请将其放入上面的 `MainWindow` 骨架中。 ## 切换全局 skin 影响所有没有自身 skin 的组件： ```java Skin.set(new IOSSkin()); // 整个 UI 获得 iOS 外观 Skin.set(new FlutterSkin()); // … 或 Flutter ``` ## 按组件设置 skin 仅在该组件上覆盖全局设置： ```java meuBotao.skin(new IOSSkin()); // 这个按钮用 iOS 风格，其余继续用 Material ``` ## 自定义 skin（改变形状/间距，而非颜色）扩展一个 skin 并覆盖其**结构钩子**： ```java public class RoundedSkin extends MaterialSkin { @Override public float borderRadius() { return 1.5f; } // 圆角很大 @Override public float borderThick() { return 0.05f; } // 细边框 } // 全局应用： Skin.set(new RoundedSkin()); ``` 要将颜色**适配**明/暗，**不要**改动 skin — 请使用 `ColorScheme`/`ThemeMode` （参见 [明/暗模式](/docs/ui/theming/dark-mode)）。 ## 各层如何交互

也就是说：**Skin** 通过读取**主题的颜色**来构建样式 — 更换其中一个不会影响另一个。 ## 最佳实践 - 在启动时选择**一个**全局 skin；仅在例外情况下按组件使用 `.skin(...)`。 - 自定义 skin = **形状/间距/阴影**。颜色和明/暗 = `ColorScheme`。 ## 常见错误 - 试图通过覆盖 skin 来改变**颜色** — 颜色来自 `ColorScheme`，而非 skin。 - 在同一个界面中不必要地混用不同的 skin（视觉不一致）。 ## 另请参阅 - [配色方案](/docs/ui/theming/color-schemes) · [明/暗模式](/docs/ui/theming/dark-mode) · [组件样式设置](/docs/ui/theming/styling-components)