桌面应用跨平台【免费下载链接】nodeguiA library for building cross-platform native desktop applications with Node.js and CSS . React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org项目地址https://gitcode.com/gh_mirrors/no/nodegui点击查看免费下载QPalette 是 Qt 中负责控件配色方案的调色板类NodeGui 通过 NAPI 将其封装为 TypeScript 类供开发者以QPaletteQColor的组合查询任意控件角色在任意状态分组下的颜色。本文以仓库中 QPalette 类文档 为核心结合 TypeScript 封装源码、C 绑定实现与 Qt 枚举定义完整讲解 QPalette 在 NodeGui 中的构造函数、native属性、color()方法及其底层调用链并给出可直接运行的取色示例。QPalette 类总览继承关系与公开 API在 NodeGui 的世界里QPalette并不是一个独立构造出来的 UI 控件而是作为配色查询与传递的载体存在。根据生成的 API 文档QPalette的继承关系与成员清单如下继承层级QPalette直接继承自 Component而Component是所有 NodeGui 控件与布局的公共基类负责维护指向原生 C 实例的引用防止子元素被 GC 回收。公开成员构造函数constructor(native: NativeElement)属性native: NativeElement | null方法color(group: ColorGroup, role: ColorRole): QColorTypeScript 侧的全部实现位于 src/lib/QtGui/QPalette.ts核心代码只有十余行export class QPalette extends Component { color(group: ColorGroup, role: ColorRole): QColor { return new QColor(this.native.color(group, role)); } }可以看到QPalette在 JS 层并未保存任何颜色数据它只是一个查询入口——真正的调色板状态全部保存在 C 的QPalette实例中JS 侧只负责转发调用并把返回的原生QColor包装成 TypeScript 对象。构造函数与 native 属性NativeElement 的来龙去脉constructor(native: NativeElement)API 文档声明构造函数签名与基类一致new QPalette(native: NativeElement): QPaletteNativeElement的定义在 src/lib/core/Component.tsexport type NativeElement { type: native; [key: string]: any };即一个type: native的普通对象内部承载着 NAPI 绑定的 C 实例引用。QPalette的构造函数直接调super(native)把该引用存入native属性——也就是说你几乎不会直接new QPalette()而是通过其他 API 拿到一个已存在的调色板。仓库中QPalette最常见的来源是 QApplication.palette()palette(): QPalette { return new QPalette(this.native.palette()); }它返回应用级的默认调色板即当前平台风格下所有控件的默认配色方案。这里this.native.palette()调用的正是 NAPI 绑定层的原生方法其 C 实现在 src/cpp/lib/QtGui/QPalette/qpalette_wrap.cppQPaletteWrap::QPaletteWrap(const Napi::CallbackInfo info) : Napi::ObjectWrapQPaletteWrap(info) { Napi::Env env info.Env(); if (info.Length() 0) { this-instance std::make_uniqueQPalette(); } else if (info.Length() 1) { this-instance std::unique_ptrQPalette( info[0].AsNapi::ExternalQPalette().Data()); } else { Napi::TypeError::New(env, Wrong number of arguments) .ThrowAsJavaScriptException(); } this-rawData extrautils::configureComponent(this-getInternalInstance()); }从 C 构造函数可以看出两个事实支持两种入参形态零参数时创建一个全新的空QPalette单参数时接收Napi::ExternalQPalette即从其他原生实例转移所有权。这与 TypeScript 侧只收 NativeElement的公开签名并不冲突——JS 层限制了入口底层保留了灵活性。构造完成后会调用extrautils::configureComponent为实例配置rawData并经由 component_macro.h 中的宏导出type与wrapperType两个实例值这正是 JS 侧NativeElement得以存在的基础。native: NativeElement | nullnative属性继承自Component始终保存着与当前QPalette对应的 C 实例句柄。文档标注其类型为NativeElement | null与 Component.ts 的定义一致。凡是通过this.native.xxx()形式调用的一切方法最终都会经 NAPI 桥接进入对应的 CQPaletteWrap方法。color() 方法按 ColorGroup 与 ColorRole 取色color()是QPalette唯一的方法也是它的核心价值所在color(group: ColorGroup, role: ColorRole): QColor它接收两个参数参数类型含义groupColorGroup控件的状态分组如 Active激活窗口、Disabled禁用、Inactive非激活窗口、NormalroleColorRole颜色角色即调色板中某个用途槽位如 Window窗口背景、Text文字、Highlight高亮返回值为一个QColor对象可继续调用 QColor.ts 中的red()、green()、blue()、alpha()、rgb()、rgba()等方法提取具体颜色分量。C 侧的调用链color()在 C 侧的实现在 qpalette_wrap.cppNapi::Value QPaletteWrap::color(const Napi::CallbackInfo info) { Napi::Env env info.Env(); QPalette::ColorGroup colorGroup static_castQPalette::ColorGroup( info[0].AsNapi::Number().Int32Value()); QPalette::ColorRole colorRole static_castQPalette::ColorRole(info[1].AsNapi::Number().Int32Value()); QColor color this-instance-color(colorGroup, colorRole); auto instance QColorWrap::constructor.New( {Napi::ExternalQColor::New(env, new QColor(color))}); return instance; }这条调用链可以拆解为四步JS 层传入的ColorGroup与ColorRole枚举值以整数形式被读取Int32Value()通过static_cast分别转换为 C 侧的QPalette::ColorGroup与QPalette::ColorRole枚举——这正是两个枚举数值必须与 Qt 原生枚举严格对齐的原因调用底层 Qt 的QPalette::color(group, role)获得一个QColor将QColor包装为QColorWrap的原生实例并返回 JS 层JS 侧再用new QColor(...)包成 TypeScript 对象。对应的绑定声明在头文件 qpalette_wrap.h 中color是唯一被导出的实例方法其余导出均来自COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE宏。ColorGroup 与 ColorRole 枚举数值对齐是正确取色的前提两个枚举在 TypeScript 侧定义于 src/lib/QtGui/QPalette.ts与 Qt C 原生枚举一一对应。ColorGroup状态分组export enum ColorGroup { Disabled 1, Active 0, Inactive 2, Normal 0, }成员值说明Disabled1控件处于禁用状态如不可点击的按钮Active0控件属于当前激活的窗口Inactive2控件属于非激活窗口Normal0默认状态与Active数值相同Qt 语义中 Normal 即 Active注意Active与Normal同为0这与 Qt 中QPalette::Active与QPalette::Normal枚举别名等价的设计一致。生成的枚举文档 colorgroup.md 也确认了这些数值。ColorRole颜色角色export enum ColorRole { WindowText 0, Button 1, Light 2, Midlight 3, Dark 4, Mid 5, Text 6, BrightText 7, ButtonText 8, Base 9, Window 10, Shadow 11, Highlight 12, HighlightedText 13, Link 14, LinkVisited 15, AlternateBase 16, NoRole 17, ToolTipBase 18, ToolTipText 19, PlaceholderText 20, }常用角色速查角色值典型用途Window10窗口背景色WindowText0窗口背景上的文字颜色Base9输入类控件如 QLineEdit、QTextEdit的背景Text6Base 之上的文字颜色Button1按钮背景色ButtonText8按钮上的文字颜色Highlight12选中/高亮区域的背景HighlightedText13高亮区域上的文字Link/LinkVisited14 / 15链接文本及其访问后的颜色AlternateBase16列表等控件交替行背景PlaceholderText20输入框占位提示文字组合规则color(group, role)的语义是在 group 状态下、role 槽位中的颜色例如color(ColorGroup.Active, ColorRole.Highlight)即当前激活窗口中高亮选区使用的背景色。实战示例读取并分析应用调色板结合前文所有内容下面给出一个完整可运行的示例——启动一个 NodeGui 应用读取默认调色板并输出关键角色的 RGBA 值import { QApplication, QColor, ColorGroup, ColorRole } from nodegui/nodegui; const app new QApplication(); // 获取应用级默认调色板 const palette app.palette(); // 读取激活状态下窗口背景色与文字色 const windowBg: QColor palette.color(ColorGroup.Active, ColorRole.Window); const textColor: QColor palette.color(ColorGroup.Active, ColorRole.WindowText); console.log(窗口背景 RGBA:, windowBg.red(), windowBg.green(), windowBg.blue(), windowBg.alpha()); console.log(窗口文字 RGBA:, textColor.red(), textColor.green(), textColor.blue(), textColor.alpha()); // 对比禁用状态下的按钮文字色直观感受 Disabled 分组的差异 const disabledText: QColor palette.color(ColorGroup.Disabled, ColorRole.ButtonText); console.log(禁用按钮文字 RGBA:, disabledText.red(), disabledText.green(), disabledText.blue(), disabledText.alpha()); app.exec();运行该脚本可验证两点取色链路通畅app.palette()到QPalette.color()再到QColor分量的完整调用链工作正常分组语义生效同一role在不同group下返回不同的颜色值Disabled 分组的文字色通常比 Active 更浅淡这正是 Qt 调色板机制的价值所在。使用边界与注意事项从源码可以明确以下边界避免误用QPalette目前只提供读接口。color()是唯一导出的方法QWidget.ts 与 QApplication.ts 中palette()/setPalette()均标注为TODO未实现。因此当前仓库中无法直接修改某个控件的调色板只能查询。若需自定义配色应改用 NodeGui 的 StyleSheet 方案如setStyleSheet设置background-color、color等属性。枚举数值不得改动。C 绑定通过static_cast把 JS 传入的整数直接映射为 Qt 原生枚举任何对 QPalette.ts 中枚举值的改动都会导致取色错位或返回错误角色。返回的 QColor 可自由操作。color()返回的是新建的QColorWrap实例调用 QColor.ts 中如fromRgb、fromHsl、fromHsv等静态工厂方法与red()/green()/blue()/alpha()取值方法不受影响可用于颜色换算或与样式表搭配调试。延伸阅读TypeScript 封装源码src/lib/QtGui/QPalette.tsC NAPI 绑定实现src/cpp/lib/QtGui/QPalette/qpalette_wrap.cpp、src/cpp/include/nodegui/QtGui/QPalette/qpalette_wrap.h基类定义src/lib/core/Component.ts返回类型 QColorsrc/lib/QtGui/QColor.ts枚举文档ColorGroup、ColorRole获取调色板的入口src/lib/QtGui/QApplication.ts赞分享桌面应用跨平台【免费下载链接】nodeguiA library for building cross-platform native desktop applications with Node.js and CSS . React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org项目地址https://gitcode.com/gh_mirrors/no/nodegui点击查看免费下载相关推荐NodeGui ColorGroup 枚举全解析Qt 调色板色彩组取值与 QPalette 实战指南NodeGui ColorGroup 枚举全解析Qt 调色板色彩组取值与 QPalette 实战指南 ColorGroup色彩组是 NodeGui 中用于桌面应用跨平台NodeGui 中的 ColorRole 枚举Qt 调色板角色全解析与实战用法NodeGui 中的 ColorRole 枚举Qt 调色板角色全解析与实战用法 导读 ColorRole 是 NodeGui基于 Qt 的跨平台原生桌面应用桌面应用跨平台NodeGUI 中的 QDoubleSpinBoxSignals 接口全解析从 Qt 信号到 TypeScript 事件回调NodeGUI 中的 QDoubleSpinBoxSignals 接口全解析从 Qt 信号到 TypeScript 事件回调 导读 QDoubleSpinBo桌面应用跨平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考