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