色板封裝：從 TypeScript 到 Qt C++ 的取色調(diào)用鏈全解析)
桌面應(yīng)用跨平臺(tái)【免費(fèi)下載鏈接】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項(xiàng)目地址https://gitcode.com/gh_mirrors/no/nodegui點(diǎn)擊查看免費(fèi)下載QPalette 是 Qt 中負(fù)責(zé)控件配色方案的調(diào)色板類NodeGui 通過 NAPI 將其封裝為 TypeScript 類供開發(fā)者以QPaletteQColor的組合查詢?nèi)我饪丶巧谌我鉅顟B(tài)分組下的顏色。本文以倉庫中 QPalette 類文檔 為核心結(jié)合 TypeScript 封裝源碼、C 綁定實(shí)現(xiàn)與 Qt 枚舉定義完整講解 QPalette 在 NodeGui 中的構(gòu)造函數(shù)、native屬性、color()方法及其底層調(diào)用鏈并給出可直接運(yùn)行的取色示例。QPalette 類總覽繼承關(guān)系與公開 API在 NodeGui 的世界里QPalette并不是一個(gè)獨(dú)立構(gòu)造出來的 UI 控件而是作為配色查詢與傳遞的載體存在。根據(jù)生成的 API 文檔QPalette的繼承關(guān)系與成員清單如下繼承層級(jí)QPalette直接繼承自 Component而Component是所有 NodeGui 控件與布局的公共基類負(fù)責(zé)維護(hù)指向原生 C 實(shí)例的引用防止子元素被 GC 回收。公開成員構(gòu)造函數(shù)constructor(native: NativeElement)屬性native: NativeElement | null方法color(group: ColorGroup, role: ColorRole): QColorTypeScript 側(cè)的全部實(shí)現(xiàn)位于 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 層并未保存任何顏色數(shù)據(jù)它只是一個(gè)查詢?nèi)肟凇嬲恼{(diào)色板狀態(tài)全部保存在 C 的QPalette實(shí)例中JS 側(cè)只負(fù)責(zé)轉(zhuǎn)發(fā)調(diào)用并把返回的原生QColor包裝成 TypeScript 對(duì)象。構(gòu)造函數(shù)與 native 屬性NativeElement 的來龍去脈constructor(native: NativeElement)API 文檔聲明構(gòu)造函數(shù)簽名與基類一致new QPalette(native: NativeElement): QPaletteNativeElement的定義在 src/lib/core/Component.tsexport type NativeElement { type: native; [key: string]: any };即一個(gè)type: native的普通對(duì)象內(nèi)部承載著 NAPI 綁定的 C 實(shí)例引用。QPalette的構(gòu)造函數(shù)直接調(diào)super(native)把該引用存入native屬性——也就是說你幾乎不會(huì)直接new QPalette()而是通過其他 API 拿到一個(gè)已存在的調(diào)色板。倉庫中QPalette最常見的來源是 QApplication.palette()palette(): QPalette { return new QPalette(this.native.palette()); }它返回應(yīng)用級(jí)的默認(rèn)調(diào)色板即當(dāng)前平臺(tái)風(fēng)格下所有控件的默認(rèn)配色方案。這里this.native.palette()調(diào)用的正是 NAPI 綁定層的原生方法其 C 實(shí)現(xiàn)在 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 構(gòu)造函數(shù)可以看出兩個(gè)事實(shí)支持兩種入?yún)⑿螒B(tài)零參數(shù)時(shí)創(chuàng)建一個(gè)全新的空QPalette單參數(shù)時(shí)接收Napi::ExternalQPalette即從其他原生實(shí)例轉(zhuǎn)移所有權(quán)。這與 TypeScript 側(cè)只收 NativeElement的公開簽名并不沖突——JS 層限制了入口底層保留了靈活性。構(gòu)造完成后會(huì)調(diào)用extrautils::configureComponent為實(shí)例配置rawData并經(jīng)由 component_macro.h 中的宏導(dǎo)出type與wrapperType兩個(gè)實(shí)例值這正是 JS 側(cè)NativeElement得以存在的基礎(chǔ)。native: NativeElement | nullnative屬性繼承自Component始終保存著與當(dāng)前QPalette對(duì)應(yīng)的 C 實(shí)例句柄。文檔標(biāo)注其類型為NativeElement | null與 Component.ts 的定義一致。凡是通過this.native.xxx()形式調(diào)用的一切方法最終都會(huì)經(jīng) NAPI 橋接進(jìn)入對(duì)應(yīng)的 CQPaletteWrap方法。color() 方法按 ColorGroup 與 ColorRole 取色color()是QPalette唯一的方法也是它的核心價(jià)值所在color(group: ColorGroup, role: ColorRole): QColor它接收兩個(gè)參數(shù)參數(shù)類型含義groupColorGroup控件的狀態(tài)分組如 Active激活窗口、Disabled禁用、Inactive非激活窗口、NormalroleColorRole顏色角色即調(diào)色板中某個(gè)用途槽位如 Window窗口背景、Text文字、Highlight高亮返回值為一個(gè)QColor對(duì)象可繼續(xù)調(diào)用 QColor.ts 中的red()、green()、blue()、alpha()、rgb()、rgba()等方法提取具體顏色分量。C 側(cè)的調(diào)用鏈color()在 C 側(cè)的實(shí)現(xiàn)在 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; }這條調(diào)用鏈可以拆解為四步JS 層傳入的ColorGroup與ColorRole枚舉值以整數(shù)形式被讀取Int32Value()通過static_cast分別轉(zhuǎn)換為 C 側(cè)的QPalette::ColorGroup與QPalette::ColorRole枚舉——這正是兩個(gè)枚舉數(shù)值必須與 Qt 原生枚舉嚴(yán)格對(duì)齊的原因調(diào)用底層 Qt 的QPalette::color(group, role)獲得一個(gè)QColor將QColor包裝為QColorWrap的原生實(shí)例并返回 JS 層JS 側(cè)再用new QColor(...)包成 TypeScript 對(duì)象。對(duì)應(yīng)的綁定聲明在頭文件 qpalette_wrap.h 中color是唯一被導(dǎo)出的實(shí)例方法其余導(dǎo)出均來自COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE宏。ColorGroup 與 ColorRole 枚舉數(shù)值對(duì)齊是正確取色的前提兩個(gè)枚舉在 TypeScript 側(cè)定義于 src/lib/QtGui/QPalette.ts與 Qt C 原生枚舉一一對(duì)應(yīng)。ColorGroup狀態(tài)分組export enum ColorGroup { Disabled 1, Active 0, Inactive 2, Normal 0, }成員值說明Disabled1控件處于禁用狀態(tài)如不可點(diǎn)擊的按鈕Active0控件屬于當(dāng)前激活的窗口Inactive2控件屬于非激活窗口Normal0默認(rèn)狀態(tài)與Active數(shù)值相同Qt 語義中 Normal 即 Active注意Active與Normal同為0這與 Qt 中QPalette::Active與QPalette::Normal枚舉別名等價(jià)的設(shè)計(jì)一致。生成的枚舉文檔 colorgroup.md 也確認(rèn)了這些數(shù)值。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, }常用角色速查角色值典型用途W(wǎng)indow10窗口背景色WindowText0窗口背景上的文字顏色Base9輸入類控件如 QLineEdit、QTextEdit的背景Text6Base 之上的文字顏色Button1按鈕背景色ButtonText8按鈕上的文字顏色Highlight12選中/高亮區(qū)域的背景HighlightedText13高亮區(qū)域上的文字Link/LinkVisited14 / 15鏈接文本及其訪問后的顏色AlternateBase16列表等控件交替行背景PlaceholderText20輸入框占位提示文字組合規(guī)則color(group, role)的語義是在 group 狀態(tài)下、role 槽位中的顏色例如color(ColorGroup.Active, ColorRole.Highlight)即當(dāng)前激活窗口中高亮選區(qū)使用的背景色。實(shí)戰(zhàn)示例讀取并分析應(yīng)用調(diào)色板結(jié)合前文所有內(nèi)容下面給出一個(gè)完整可運(yùn)行的示例——啟動(dòng)一個(gè) NodeGui 應(yīng)用讀取默認(rèn)調(diào)色板并輸出關(guān)鍵角色的 RGBA 值import { QApplication, QColor, ColorGroup, ColorRole } from nodegui/nodegui; const app new QApplication(); // 獲取應(yīng)用級(jí)默認(rèn)調(diào)色板 const palette app.palette(); // 讀取激活狀態(tài)下窗口背景色與文字色 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()); // 對(duì)比禁用狀態(tài)下的按鈕文字色直觀感受 Disabled 分組的差異 const disabledText: QColor palette.color(ColorGroup.Disabled, ColorRole.ButtonText); console.log(禁用按鈕文字 RGBA:, disabledText.red(), disabledText.green(), disabledText.blue(), disabledText.alpha()); app.exec();運(yùn)行該腳本可驗(yàn)證兩點(diǎn)取色鏈路通暢app.palette()到QPalette.color()再到QColor分量的完整調(diào)用鏈工作正常分組語義生效同一role在不同group下返回不同的顏色值Disabled 分組的文字色通常比 Active 更淺淡這正是 Qt 調(diào)色板機(jī)制的價(jià)值所在。使用邊界與注意事項(xiàng)從源碼可以明確以下邊界避免誤用QPalette目前只提供讀接口。color()是唯一導(dǎo)出的方法QWidget.ts 與 QApplication.ts 中palette()/setPalette()均標(biāo)注為TODO未實(shí)現(xiàn)。因此當(dāng)前倉庫中無法直接修改某個(gè)控件的調(diào)色板只能查詢。若需自定義配色應(yīng)改用 NodeGui 的 StyleSheet 方案如setStyleSheet設(shè)置background-color、color等屬性。枚舉數(shù)值不得改動(dòng)。C 綁定通過static_cast把 JS 傳入的整數(shù)直接映射為 Qt 原生枚舉任何對(duì) QPalette.ts 中枚舉值的改動(dòng)都會(huì)導(dǎo)致取色錯(cuò)位或返回錯(cuò)誤角色。返回的 QColor 可自由操作。color()返回的是新建的QColorWrap實(shí)例調(diào)用 QColor.ts 中如fromRgb、fromHsl、fromHsv等靜態(tài)工廠方法與red()/green()/blue()/alpha()取值方法不受影響可用于顏色換算或與樣式表搭配調(diào)試。延伸閱讀TypeScript 封裝源碼src/lib/QtGui/QPalette.tsC NAPI 綁定實(shí)現(xiàn)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獲取調(diào)色板的入口src/lib/QtGui/QApplication.ts贊分享桌面應(yīng)用跨平臺(tái)【免費(fèi)下載鏈接】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項(xiàng)目地址https://gitcode.com/gh_mirrors/no/nodegui點(diǎn)擊查看免費(fèi)下載相關(guān)推薦NodeGui ColorGroup 枚舉全解析Qt 調(diào)色板色彩組取值與 QPalette 實(shí)戰(zhàn)指南NodeGui ColorGroup 枚舉全解析Qt 調(diào)色板色彩組取值與 QPalette 實(shí)戰(zhàn)指南 ColorGroup色彩組是 NodeGui 中用于桌面應(yīng)用跨平臺(tái)NodeGui 中的 ColorRole 枚舉Qt 調(diào)色板角色全解析與實(shí)戰(zhàn)用法NodeGui 中的 ColorRole 枚舉Qt 調(diào)色板角色全解析與實(shí)戰(zhàn)用法 導(dǎo)讀 ColorRole 是 NodeGui基于 Qt 的跨平臺(tái)原生桌面應(yīng)用桌面應(yīng)用跨平臺(tái)NodeGUI 中的 QDoubleSpinBoxSignals 接口全解析從 Qt 信號(hào)到 TypeScript 事件回調(diào)NodeGUI 中的 QDoubleSpinBoxSignals 接口全解析從 Qt 信號(hào)到 TypeScript 事件回調(diào) 導(dǎo)讀 QDoubleSpinBo桌面應(yīng)用跨平臺(tái)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 NodeGui 的 QPalette 調(diào)色板封裝：從 TypeScript 到 Qt C++ 的取色調(diào)用鏈全解析
桌面應(yīng)用跨平臺(tái)【免費(fèi)下載鏈接】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項(xiàng)目地址https://gitcode.com/gh_mirrors/no/nodegui點(diǎn)擊查看免費(fèi)下載QPalette 是 Qt 中負(fù)責(zé)控件配色方案的調(diào)色板類NodeGui 通過 NAPI 將其封裝為 TypeScript 類供開發(fā)者以QPaletteQColor的組合查詢?nèi)我饪丶巧谌我鉅顟B(tài)分組下的顏色。本文以倉庫中 QPalette 類文檔 為核心結(jié)合 TypeScript 封裝源碼、C 綁定實(shí)現(xiàn)與 Qt 枚舉定義完整講解 QPalette 在 NodeGui 中的構(gòu)造函數(shù)、native屬性、color()方法及其底層調(diào)用鏈并給出可直接運(yùn)行的取色示例。QPalette 類總覽繼承關(guān)系與公開 API在 NodeGui 的世界里QPalette并不是一個(gè)獨(dú)立構(gòu)造出來的 UI 控件而是作為配色查詢與傳遞的載體存在。根據(jù)生成的 API 文檔QPalette的繼承關(guān)系與成員清單如下繼承層級(jí)QPalette直接繼承自 Component而Component是所有 NodeGui 控件與布局的公共基類負(fù)責(zé)維護(hù)指向原生 C 實(shí)例的引用防止子元素被 GC 回收。公開成員構(gòu)造函數(shù)constructor(native: NativeElement)屬性native: NativeElement | null方法color(group: ColorGroup, role: ColorRole): QColorTypeScript 側(cè)的全部實(shí)現(xiàn)位于 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 層并未保存任何顏色數(shù)據(jù)它只是一個(gè)查詢?nèi)肟凇嬲恼{(diào)色板狀態(tài)全部保存在 C 的QPalette實(shí)例中JS 側(cè)只負(fù)責(zé)轉(zhuǎn)發(fā)調(diào)用并把返回的原生QColor包裝成 TypeScript 對(duì)象。構(gòu)造函數(shù)與 native 屬性NativeElement 的來龍去脈constructor(native: NativeElement)API 文檔聲明構(gòu)造函數(shù)簽名與基類一致new QPalette(native: NativeElement): QPaletteNativeElement的定義在 src/lib/core/Component.tsexport type NativeElement { type: native; [key: string]: any };即一個(gè)type: native的普通對(duì)象內(nèi)部承載著 NAPI 綁定的 C 實(shí)例引用。QPalette的構(gòu)造函數(shù)直接調(diào)super(native)把該引用存入native屬性——也就是說你幾乎不會(huì)直接new QPalette()而是通過其他 API 拿到一個(gè)已存在的調(diào)色板。倉庫中QPalette最常見的來源是 QApplication.palette()palette(): QPalette { return new QPalette(this.native.palette()); }它返回應(yīng)用級(jí)的默認(rèn)調(diào)色板即當(dāng)前平臺(tái)風(fēng)格下所有控件的默認(rèn)配色方案。這里this.native.palette()調(diào)用的正是 NAPI 綁定層的原生方法其 C 實(shí)現(xiàn)在 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 構(gòu)造函數(shù)可以看出兩個(gè)事實(shí)支持兩種入?yún)⑿螒B(tài)零參數(shù)時(shí)創(chuàng)建一個(gè)全新的空QPalette單參數(shù)時(shí)接收Napi::ExternalQPalette即從其他原生實(shí)例轉(zhuǎn)移所有權(quán)。這與 TypeScript 側(cè)只收 NativeElement的公開簽名并不沖突——JS 層限制了入口底層保留了靈活性。構(gòu)造完成后會(huì)調(diào)用extrautils::configureComponent為實(shí)例配置rawData并經(jīng)由 component_macro.h 中的宏導(dǎo)出type與wrapperType兩個(gè)實(shí)例值這正是 JS 側(cè)NativeElement得以存在的基礎(chǔ)。native: NativeElement | nullnative屬性繼承自Component始終保存著與當(dāng)前QPalette對(duì)應(yīng)的 C 實(shí)例句柄。文檔標(biāo)注其類型為NativeElement | null與 Component.ts 的定義一致。凡是通過this.native.xxx()形式調(diào)用的一切方法最終都會(huì)經(jīng) NAPI 橋接進(jìn)入對(duì)應(yīng)的 CQPaletteWrap方法。color() 方法按 ColorGroup 與 ColorRole 取色color()是QPalette唯一的方法也是它的核心價(jià)值所在color(group: ColorGroup, role: ColorRole): QColor它接收兩個(gè)參數(shù)參數(shù)類型含義groupColorGroup控件的狀態(tài)分組如 Active激活窗口、Disabled禁用、Inactive非激活窗口、NormalroleColorRole顏色角色即調(diào)色板中某個(gè)用途槽位如 Window窗口背景、Text文字、Highlight高亮返回值為一個(gè)QColor對(duì)象可繼續(xù)調(diào)用 QColor.ts 中的red()、green()、blue()、alpha()、rgb()、rgba()等方法提取具體顏色分量。C 側(cè)的調(diào)用鏈color()在 C 側(cè)的實(shí)現(xiàn)在 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; }這條調(diào)用鏈可以拆解為四步JS 層傳入的ColorGroup與ColorRole枚舉值以整數(shù)形式被讀取Int32Value()通過static_cast分別轉(zhuǎn)換為 C 側(cè)的QPalette::ColorGroup與QPalette::ColorRole枚舉——這正是兩個(gè)枚舉數(shù)值必須與 Qt 原生枚舉嚴(yán)格對(duì)齊的原因調(diào)用底層 Qt 的QPalette::color(group, role)獲得一個(gè)QColor將QColor包裝為QColorWrap的原生實(shí)例并返回 JS 層JS 側(cè)再用new QColor(...)包成 TypeScript 對(duì)象。對(duì)應(yīng)的綁定聲明在頭文件 qpalette_wrap.h 中color是唯一被導(dǎo)出的實(shí)例方法其余導(dǎo)出均來自COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE宏。ColorGroup 與 ColorRole 枚舉數(shù)值對(duì)齊是正確取色的前提兩個(gè)枚舉在 TypeScript 側(cè)定義于 src/lib/QtGui/QPalette.ts與 Qt C 原生枚舉一一對(duì)應(yīng)。ColorGroup狀態(tài)分組export enum ColorGroup { Disabled 1, Active 0, Inactive 2, Normal 0, }成員值說明Disabled1控件處于禁用狀態(tài)如不可點(diǎn)擊的按鈕Active0控件屬于當(dāng)前激活的窗口Inactive2控件屬于非激活窗口Normal0默認(rèn)狀態(tài)與Active數(shù)值相同Qt 語義中 Normal 即 Active注意Active與Normal同為0這與 Qt 中QPalette::Active與QPalette::Normal枚舉別名等價(jià)的設(shè)計(jì)一致。生成的枚舉文檔 colorgroup.md 也確認(rèn)了這些數(shù)值。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, }常用角色速查角色值典型用途W(wǎng)indow10窗口背景色WindowText0窗口背景上的文字顏色Base9輸入類控件如 QLineEdit、QTextEdit的背景Text6Base 之上的文字顏色Button1按鈕背景色ButtonText8按鈕上的文字顏色Highlight12選中/高亮區(qū)域的背景HighlightedText13高亮區(qū)域上的文字Link/LinkVisited14 / 15鏈接文本及其訪問后的顏色AlternateBase16列表等控件交替行背景PlaceholderText20輸入框占位提示文字組合規(guī)則color(group, role)的語義是在 group 狀態(tài)下、role 槽位中的顏色例如color(ColorGroup.Active, ColorRole.Highlight)即當(dāng)前激活窗口中高亮選區(qū)使用的背景色。實(shí)戰(zhàn)示例讀取并分析應(yīng)用調(diào)色板結(jié)合前文所有內(nèi)容下面給出一個(gè)完整可運(yùn)行的示例——啟動(dòng)一個(gè) NodeGui 應(yīng)用讀取默認(rèn)調(diào)色板并輸出關(guān)鍵角色的 RGBA 值import { QApplication, QColor, ColorGroup, ColorRole } from nodegui/nodegui; const app new QApplication(); // 獲取應(yīng)用級(jí)默認(rèn)調(diào)色板 const palette app.palette(); // 讀取激活狀態(tài)下窗口背景色與文字色 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()); // 對(duì)比禁用狀態(tài)下的按鈕文字色直觀感受 Disabled 分組的差異 const disabledText: QColor palette.color(ColorGroup.Disabled, ColorRole.ButtonText); console.log(禁用按鈕文字 RGBA:, disabledText.red(), disabledText.green(), disabledText.blue(), disabledText.alpha()); app.exec();運(yùn)行該腳本可驗(yàn)證兩點(diǎn)取色鏈路通暢app.palette()到QPalette.color()再到QColor分量的完整調(diào)用鏈工作正常分組語義生效同一role在不同group下返回不同的顏色值Disabled 分組的文字色通常比 Active 更淺淡這正是 Qt 調(diào)色板機(jī)制的價(jià)值所在。使用邊界與注意事項(xiàng)從源碼可以明確以下邊界避免誤用QPalette目前只提供讀接口。color()是唯一導(dǎo)出的方法QWidget.ts 與 QApplication.ts 中palette()/setPalette()均標(biāo)注為TODO未實(shí)現(xiàn)。因此當(dāng)前倉庫中無法直接修改某個(gè)控件的調(diào)色板只能查詢。若需自定義配色應(yīng)改用 NodeGui 的 StyleSheet 方案如setStyleSheet設(shè)置background-color、color等屬性。枚舉數(shù)值不得改動(dòng)。C 綁定通過static_cast把 JS 傳入的整數(shù)直接映射為 Qt 原生枚舉任何對(duì) QPalette.ts 中枚舉值的改動(dòng)都會(huì)導(dǎo)致取色錯(cuò)位或返回錯(cuò)誤角色。返回的 QColor 可自由操作。color()返回的是新建的QColorWrap實(shí)例調(diào)用 QColor.ts 中如fromRgb、fromHsl、fromHsv等靜態(tài)工廠方法與red()/green()/blue()/alpha()取值方法不受影響可用于顏色換算或與樣式表搭配調(diào)試。延伸閱讀TypeScript 封裝源碼src/lib/QtGui/QPalette.tsC NAPI 綁定實(shí)現(xiàn)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獲取調(diào)色板的入口src/lib/QtGui/QApplication.ts贊分享桌面應(yīng)用跨平臺(tái)【免費(fèi)下載鏈接】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項(xiàng)目地址https://gitcode.com/gh_mirrors/no/nodegui點(diǎn)擊查看免費(fèi)下載相關(guān)推薦NodeGui ColorGroup 枚舉全解析Qt 調(diào)色板色彩組取值與 QPalette 實(shí)戰(zhàn)指南NodeGui ColorGroup 枚舉全解析Qt 調(diào)色板色彩組取值與 QPalette 實(shí)戰(zhàn)指南 ColorGroup色彩組是 NodeGui 中用于桌面應(yīng)用跨平臺(tái)NodeGui 中的 ColorRole 枚舉Qt 調(diào)色板角色全解析與實(shí)戰(zhàn)用法NodeGui 中的 ColorRole 枚舉Qt 調(diào)色板角色全解析與實(shí)戰(zhàn)用法 導(dǎo)讀 ColorRole 是 NodeGui基于 Qt 的跨平臺(tái)原生桌面應(yīng)用桌面應(yīng)用跨平臺(tái)NodeGUI 中的 QDoubleSpinBoxSignals 接口全解析從 Qt 信號(hào)到 TypeScript 事件回調(diào)NodeGUI 中的 QDoubleSpinBoxSignals 接口全解析從 Qt 信號(hào)到 TypeScript 事件回調(diào) 導(dǎo)讀 QDoubleSpinBo桌面應(yīng)用跨平臺(tái)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考