5. 样式与主题

你将学到: 在不写死数值的情况下赋予外观,并实时切换明暗主题。前置条件: 布局。

完整示例(复制、粘贴、运行)

定义应用主题(种子色 + skin),按状态为一个按钮设置样式,以及一个实时切换明↔暗的按钮 —— 整个 UI 无需手动重设样式即会跟随。可直接编译运行。

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;
import dev.crossfly.ui.skin.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // 主题：一个种子生成完整方案；skin 定义形状
      Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);
      Skin.set(new IOSSkin());

      Button botao = new Button("Salvar");
      botao.style(new ComponentStyle()
         .backColor(Styles.primaryColor)   // 主题的 PalColor（跟随亮色/暗色）
         .textColor(0xFFFFFFFF)            // 固定的 int ARGB 0xAARRGGBB
         .borderRadius(0.6f)
         .pressable());                    // 启用按压反馈
      add(LAY_AUTO, botao);

      Button botaoTema = new Button("Alternar claro/escuro");
      botaoTema.onAction(c -> Styles.toggleDarkMode());   // 自动为整个 UI 重新换肤
      add(LAY_AUTO, botaoTema);
   }
}

下面的片段只展示核心部分(放在 onShow() 里的内容)。要运行,请把它们放进上面的 MainWindow 骨架里。

ComponentStyle 与按状态的样式

每个组件都可以有三种样式,按帧选取:default / focused / pressed。

botao.style(new ComponentStyle()
   .backColor(Styles.primaryColor)     // 主题的 PalColor（跟随亮色/暗色）
   .textColor(0xFFFFFFFF)              // 或固定的 int ARGB 0xAARRGGBB
   .borderRadius(0.6f)
   .pressable());                      // 启用按压反馈

Skin 与配色方案

Skin 定义形状(Material/iOS/Flutter);ColorScheme 则从一个种子色定义调色板:

Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);   // 一个种子 → 完整方案
Skin.set(new IOSSkin());                               // 更换全局视觉标识

在运行时切换明↔暗(无需重建 UI)

setDarkMode(...) 会自动在所有窗口上重新应用主题 —— 如果你的样式使用了主题的 PalColor(Styles.primaryColor 等),颜色会自行变化:

Button botaoTema = new Button("Modo escuro");
botaoTema.onAction(c -> Styles.toggleDarkMode());   // 整个 UI 随之更新，无需手动 restyle

对于会随模式改变形状的样式,请用 styled(...) 注册(见明暗模式)。

本步骤所构建的

应用的主题(种子色 + skin)+ 一个实时切换明/暗的按钮。

回顾

ComponentStyle(default/focused/pressed);ARGB 颜色或主题的 PalColor;Skin = 形状,ColorScheme = 调色板;toggleDarkMode() 自行重设一切。

下一步

→ 处理输入

另见

• 主题与样式(ui) · 概念:样式与主题