Оформите окно под свой инструмент

У каждого окна может быть своя палитра. Контейнеры, подписи, поля и кнопки принимают стили: цвет, шрифт, скругление, границу, отступы и состояния. Настройки действуют только внутри этого окна. Привычные клавиатурное управление, масштабирование и фокус сохраняются.

Начните с рабочего примера

Откройте examples/styled-workbench/main.lua в Creator и нажмите «Предпросмотр». Для установки всего примера упакуйте папку командой CLI из руководства SDK; манифест лежит рядом с исходником. Пример не требует разрешений и не меняет проект. Переключайте палитру, меняйте название и двигайте рисунок мышью или стрелками. Изменение палитры сохраняет введённые значения.

Палитра, карточка и основная кнопка

vlt.ui.window{
  id="tool", title="Мой инструмент", width=520, height=340,
  theme={background="#151d26", surface="#223140", field="#101820",
         text="#f0f6fc", muted="#a7b9c9", accent="#78e3bc",
         onAccent="#102820", border="#3b5063"},
  style={padding=24, fontSize=14},
  styles={
    card={background="$surface", radius=12, padding=18},
    title={fontSize=24, fontWeight=700},
    action={background="$accent", color="$onAccent", radius=8,
            borderWidth=0, padding=10,
            pressed={background="$surface",color="$text"}}
  },
  children={
    {type="label", text="Новый инструмент", style="title"},
    {type="column", style="card", spacing=12, children={
      {type="field", id="name", value="Мой пресет"},
      {type="button", text="Применить", style="action", onClick=function()
        vlt.ui.set{id="result", text=vlt.ui.get{id="name"}.value}
      end}
    }},
    {type="label", id="result", text="Готово к работе", style={color="$muted"}}
  }
}

Как работают стили

theme задаётся у окна. Все восемь цветов необязательны: пропущенные берутся из темы VLTONE. Цвета темы должны быть непрозрачными. Для стилей подходят цвета Qt: #RRGGBB, #AARRGGBB, transparent и имена цветов. Токены $background, $surface, $field, $text, $muted, $accent, $onAccent, $border ссылаются на текущую палитру окна.

styles — словарь до 64 именованных стилей. У виджета укажите style="card", объект style={radius=10} или сочетание style={use="card",padding=24}. Поля объекта заменяют одноимённые поля именованного стиля; вложенное состояние заменяется целиком. Именованные определения не ссылаются друг на друга.

Если accent изменён, а onAccent не указан, цвет текста на акценте выбирается по контрасту.

Размеры указаны в логических пикселях: Qt учитывает масштаб дисплея. Цвет текста и шрифты наследуются дочерними элементами. Фон, граница и отступы относятся к самому виджету. У штатной ручки сохраняется её геометрия; для полностью собственного вида ручки используйте canvas с событиями указателя и клавиш. Для изображений есть image с ресурсом пакета.

Меняйте оформление без пересоздания

-- Заменить локальные стили, сохранив значение и обработчики:
vlt.ui.set{id="name", style={color="$accent",fontWeight=600}}
-- Сбросить локальные переопределения:
vlt.ui.set{id="name", style={}}
-- Заменить палитру окна; остальные цвета возьмутся из темы VLTONE:
vlt.ui.set{id="tool", theme={accent="#d795ff"}}
-- Полностью следовать теме приложения:
vlt.ui.set{id="tool", theme={}}

ui.set заменяет переданный объект style/theme целиком, а не объединяет с прошлым. При ошибке аргументов контролы остаются прежними. ui.get{id}.style возвращает развёрнутые локальные свойства, без наследуемых значений. ui.replace сохраняет тему, определения и корневой стиль, если новые не переданы, но заменяет все дочерние контролы. Для смены значений или оформления используйте ui.set.

Собирайте понятные окна

Используйте column/row для потока, grid для равномерных ячеек, scroll для длинного содержимого и tabs для отдельных задач. stretch распределяет свободное место в строке, колонке и корне окна. spacing задаёт расстояние между элементами; margin — внутренние отступы контейнера. У label доступны wrap и align: left/center/right. У ui.set width/height, как и в дереве, фиксируют размер виджета; размер самого окна остаётся изменяемым пользователем.

Оставляйте один основной акцент, проверяйте контраст текста и подписывайте неоднозначные элементы. Проверяйте клавишу Tab, длинные русские подписи и масштабы 100/150/200%. Не полагайтесь только на цвет для ошибок и состояния. Для адаптации к светлой и тёмной теме удобнее токены, чем жёстко заданные цвета.

Сырые CSS/QSS, селекторы и URL не принимаются: ошибочное оформление не меняет интерфейс DAW и не открывает файлы. Это API собственных окон VLTONE, а не средство управления другими программами.