Skip to content
TransBoxTransBox

QML 界面插槽与 HostContext

mod.jsonui_extensions 里把插槽名映射到包内 .qml 文件,即可替换对应视觉区域,无需改主程序。

默认悬浮字幕条展开态(插槽宿主参考)


1. 已消费插槽(可安全使用)

插槽替换区域用途
overlay_background字幕悬浮窗底板毛玻璃、渐变、噪点
caption_view字幕排版区自定义双语布局
audio_level右下角音量/律动条波形、频谱
alert_capsule缺 Key / 模型未就绪提示胶囊自定义告警 UI
overlay_decorations悬浮窗顶层装饰HUD 切角、粒子
style_bar_actions控制条动作扩展区额外按钮
settings_background设置中心底板与主题统一
history_background历史窗口底板
dialog_background对话框/模态底板
window_background多窗口级联回退层设置/历史等 fallback

当前未消费(注册了但没有 Loader,不要依赖):
overlay_rootstyle_bar

非标准键 settings_view
不走上述插槽链,由设置页插件容器读取,用于引擎/套件的完整配置界面。


2. 级联回退

多窗口背景会按顺序尝试:

  • 对话框类:dialog_backgroundwindow_backgroundoverlay_background
  • 设置/历史:window_backgroundoverlay_background

因此只写 overlay_background 时,其它窗口仍可能复用你的底板风格。


3. window_backdrop

写在 theme.json(不是 mod.json):

含义
acrylicWindows 亚克力
mica / mica_alt云母(Win11)
blur模糊
none不用系统材质

QML 内也可调用 hostContext.window.setBackdrop("acrylic")


4. HostContext(悬浮窗类插槽)

宿主向组件根对象注入 property var hostContext

qml
import QtQuick 2.15

Item {
    id: root
    property var hostContext: null

    readonly property color textColor:
        hostContext ? hostContext.style.textColor : "#ffffff"
    readonly property string translation:
        hostContext ? hostContext.subtitle.currTranslation : ""
    readonly property bool hovered:
        hostContext ? hostContext.window.hovered : false

    function callPython() {
        if (!hostContext) return
        hostContext.invoke("my.plugin.id", "ping", { "n": 1 })
    }

    Rectangle {
        anchors.fill: parent
        color: hostContext ? hostContext.style.bgColor : "#00000000"
        opacity: hostContext ? hostContext.style.bgOpacity : 1.0

        Text {
            anchors.centerIn: parent
            text: translation
            color: textColor
            font.pixelSize: hostContext ? hostContext.style.fontSize : 24
            font.family: hostContext ? hostContext.style.fontFamily : "sans-serif"
        }
    }
}

子系统

style
textColor · bgColor · fontOpacity · bgOpacity · fontSize · fontFamily · themeId · primary · primaryHover · primaryGlow · radiusLarge

subtitle
currSource · currTranslation · hasRealSubtitle · prevSource · prevTranslation · hasPrev · isTyping · isSourceActive · isTranslationActive

audio
isMicMuted · audioDuckingEnabled · playbackDevice

window
hovered · dragging · width · height · setBackdrop(type) · setClickThrough(bool)

RPC
hostContext.invoke(pluginId, action, params) → Python handle_actionaction_<action>(**params)


5. 额外注入属性(按插槽)

插槽额外属性 / 信号
overlay_backgroundhovered, appState
caption_viewappState, bridge
alert_capsulealertType, alertCategory, showCapsule;信号 closeRequested, gotoSettingsRequested, switchLocalRequested
style_bar_actionshostContext
窗口底板类window, appState, 可用 customRadius

多窗口底板可声明:

qml
property bool enforceCustomRadius: true
property real customRadius: 16
property real customOpacity: 0.85

6. settings_view(插件设置页)

mod.json

json
{
  "ui_extensions": {
    "settings_view": "CustomSettingsView.qml"
  },
  "has_settings_tab": true,
  "tab_id": "my_plugin",
  "tab_title": "我的插件"
}

组件根对象可声明(宿主按需赋值):

qml
property string pluginId: ""
property var bridge: null
property var rootWin: null
property var pluginConfig: ({})

保存示例:

qml
if (bridge) {
    bridge.setPluginConfigValue(pluginId, "gain_db", 12.5)
}

仅需表单时:不必settings_view,用 config_schema 即可。


7. 实战:替换音量条

mod.json 片段:

json
{
  "type": "theme",
  "ui_extensions": { "audio_level": "CustomWaveform.qml" }
}
qml
import QtQuick 2.15

Item {
    id: root
    anchors.fill: parent
    property real level: 0.0
    property var hostContext: null

    // 若宿主未提供电平信号,可自行用 Connections 接 bridge(视版本)
    Row {
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.margins: 8
        spacing: 2
        opacity: root.level > 0.01 ? 0.95 : 0.0

        Repeater {
            model: 5
            Rectangle {
                width: 2
                height: Math.max(2, Math.min(10, root.level * 10))
                color: "#00f0ff"
            }
        }
    }
}

完整可运行参考:extensions/example_custom_waveform_ui/example_theme_cyberpunk/


8. 设计与兼容建议

  1. 组件根上保留 anchors.fill: parent,避免撑破宿主布局。
  2. 所有 hostContext 访问做空判断,便于预览。
  3. 不要依赖未在本文出现的全局对象名。
  4. 同一插槽同时只启用一个扩展;启用时会自动互斥。

TransBox - 赋能全人类无界限跨语言交流