📝
XML声明式 + 响应式绑定
XML定义UI结构，$表达式实现条件渲染，变量修改UI自动更新
Quik响应式XML UI框架
无需QML，用XML声明式构建Qt响应式界面。简洁、高效、类型安全。
Skip to content
20行代码，看见联动与动态列表
- 联动：勾选启用后，滑块/下拉框自动可用
- 共享变量：同一个
volume同步驱动 Slider + ProgressBar - 动态列表：点击按钮即时追加下拉选项（
q-for） - 实时响应：音量变化即时更新提示文本（
watch） - 按钮交互：点击按钮追加模式选项
xml
<Panel>
<CheckBox title="启用联动" var="enable" default="1"/>
<LineEdit title="提示" var="message" enabled="0"/>
<Slider title="音量" var="volume" min="0" max="100" enabled="$enable==1"/>
<ProgressBar var="volume" min="0" max="100"/>
<ComboBox title="模式" var="mode" enabled="$enable==1">
<Choice q-for="item in modes" text="$item.label" val="$item.value"/>
</ComboBox>
<HLayoutWidget>
<addStretch/>
<PushButton text="添加模式" var="btnAddMode"/>
</HLayoutWidget>
</Panel>cpp
Quik::XMLUIBuilder builder;
QWidget* ui = Quik_BUILD(builder, "Panel.xml"); // 自动启用热更新
Quik::QuikViewModel vm(&builder);
auto enable = vm.var<bool>("enable");
auto message = vm.var<QString>("message");
auto volume = vm.var<int>("volume");
auto mode = vm.var<QString>("mode");
auto modes = vm.list("modes");
auto btnAddMode = vm.button("btnAddMode");
modes = {
{{"label", "快速"}, {"value", "fast"}},
{{"label", "标准"}, {"value", "normal"}},
{{"label", "精确"}, {"value", "accurate"}}
};
volume.watch([&](int v) {
message = QString("当前音量：%1").arg(v);
});
btnAddMode.onClick([&]() {
modes.append({{"label", "自定义"}, {"value", "custom"}});
});