桌面应用跨平台【免费下载链接】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点击查看免费下载QRadioButton 是 NodeGui 中负责“原生单选按钮”的封装类底层对应 Qt 的QRadioButton用于在桌面应用中实现多选一的互斥选项场景。本文基于 NodeGui 官方 API 文档qradiobutton.md并结合仓库源码完整讲解它的构造方式、继承体系、核心按钮行为、信号事件体系、源码实现原理与测试验证读完后你将能熟练在 NodeGui 应用中创建、控制并监听原生单选按钮。QRadioButton 是什么根据官方文档的类说明Create and control radio button.该类的本质是一个 JS wrapper底层封装了 Qt 的 QRadioButtonC 类。一个QRadioButton实例提供了添加并操控原生单选按钮控件的能力——它在界面上渲染为带圆形指示点的选项用户点击后进入选中状态同一父控件下的一组单选按钮默认互斥即同一时刻只有一个处于选中态。在 NodeGui 中创建一个最简单的单选按钮只需要两行代码这也是官方文档给出的最小示例const { QRadioButton } require(nodegui/nodegui); const radioButton new QRadioButton(); radioButton.setText(Hello);setText设置按钮右侧显示的文本与之对应的读取方法为text()。这个最小示例的完整实现位于 src/lib/QtWidgets/QRadioButton.ts其余所有方法均来自父类QAbstractButton以及QWidget体系。类的继承层次Hierarchy官方文档给出了QRadioButton的继承关系QRadioButton ↳ QAbstractButton‹QRadioButtonSignals› ↳ QWidget经由 QWidgetSignals从源码看这一继承关系非常清晰// src/lib/QtWidgets/QRadioButton.ts export class QRadioButton extends QAbstractButtonQRadioButtonSignals { ... }而QAbstractButton本身又继承自QWidget见 src/lib/QtWidgets/QAbstractButton.tsexport abstract class QAbstractButtonSignals extends QAbstractButtonSignals extends QWidgetSignals { ... }QAbstractButton是按钮类控件的抽象基类在 NodeGui 中它被QCheckBox、QPushButton、QRadioButton、QToolButton共同继承注释中明确说明了这一点。再往上方法列表中还大量出现来自QObject对象元信息与生命周期、EventWidget事件监听、YogaWidgetFlex 布局节点与Component底层原生句柄的继承方法——这些共同构成了QRadioButton完整的 API 面。需要注意的是生成的文档中大量通用控件方法被标注为“Inherited from QMenu”这是文档生成器以QMenu作为QWidget通用方法的采样类所致实际继承链是QRadioButton → QAbstractButton → QWidget。构造函数与实例化方式构造函数签名如下 new QRadioButton(arg?: QWidget‹QWidgetSignals› | NativeElement): QRadioButton参数arg是可选的其类型为QWidget父控件或NativeElement底层原生对象句柄。对应源码中的三种构造路径src/lib/QtWidgets/QRadioButton.ts不传参new QRadioButton()—— 创建一个无父级的独立按钮传入QWidget父控件new QRadioButton(parentWidget)—— 新按钮以该控件为父级源码中通过new addon.QRadioButton(parent.native)把父控件的原生句柄传给 C 层传入NativeElement通过checkIfNativeElement(arg)判定后直接包装已有的原生实例这通常用于从 C 侧拿回已经创建好的对象。C 侧同样支持这三种分支见 src/cpp/lib/QtWidgets/QRadioButton/qradiobutton_wrap.cpp零参数时new NRadioButton()单参数且为External时包装已有实例单参数为对象时以parentWidgetWrap-getInternalInstance()作为父级创建new NRadioButton(parent)参数数量不合法时抛出 TypeError。创建完成后会通过extrautils::configureQWidget(...)完成控件的基础配置如事件桥接。一个完整的实战示例——把两个单选按钮放进主窗口const { QMainWindow, QWidget, QRadioButton } require(nodegui/nodegui); const win new QMainWindow(); const central new QWidget(); const radio1 new QRadioButton(central); // 传入父级 widget radio1.setText(选项 A); radio1.setChecked(true); // 默认选中 A const radio2 new QRadioButton(central); radio2.setText(选项 B); win.setCentralWidget(central); win.show(); global.win win; // 防止窗口被垃圾回收在构造函数中直接传入父级是让一组按钮共享父容器、从而获得 Qt 默认互斥行为的最简单方式。依据 Qt 的既定行为QRadioButton默认是checkable可勾选且autoExclusive自动互斥的因此同一父级下的多个单选按钮天然保证多选一。属性PropertiesQRadioButton实例上暴露了三个属性均继承自上层类属性类型说明_rawInlineStylestring控件当前保存的原始内联样式字符串配合setInlineStyle使用nativeNativeElement \| null底层 C 原生对象句柄继承自Component用于与原生层交互typestring控件类型标识字符串核心按钮行为继承自 QAbstractButtonQRadioButton本身不新增任何方法所有按钮行为都来自QAbstractButton。最常用的一组 API 如下方法作用参数/返回值setText(text)/text()设置/读取按钮文本stringsetChecked(checked)/isChecked()设置/读取选中状态booleansetCheckable(checkable)/isCheckable()设置/读取是否可勾选booleansetAutoExclusive(enable)/autoExclusive()设置/读取自动互斥开关booleansetIcon(icon)/icon()设置/读取图标QIconQIconsetIconSize(size)/iconSize()设置/读取图标尺寸QSizeQSizesetShortcut(key)/shortcut()设置/读取键盘快捷键QKeySequenceQKeySequenceclick()程序化模拟一次点击voidanimateClick()以动画效果模拟一次点击voidtoggle()切换选中状态voidsetDown(down)/isDown()设置/读取按下状态booleansetAutoRepeat(enable)/autoRepeat()设置/读取长按自动重复触发booleansetAutoRepeatDelay(delay)/autoRepeatDelay()设置/读取自动重复延迟毫秒numbersetAutoRepeatInterval(interval)/autoRepeatInterval()设置/读取自动重复间隔毫秒number实现层面值得注意这些方法几乎全部通过 Qt 的属性系统完成即setProperty(checked, checked)/property(checked).toBool()的读写模式见 src/lib/QtWidgets/QAbstractButton.ts。例如setChecked(checked: boolean): void { this.setProperty(checked, checked); } isChecked(): boolean { return this.property(checked).toBool(); }这意味着修改状态会触发 Qt 属性系统与底层信号的联动setChecked(true)会让该按钮进入选中态在互斥组内同时自动取消其他按钮的选中态并向外发出toggled信号。信号与事件监听用户交互QRadioButtonSignals与QAbstractButtonSignals完全一致源码中直接做了类型别名export type QRadioButtonSignals QAbstractButtonSignals;其信号接口定义如下src/lib/QtWidgets/QAbstractButton.tsexport interface QAbstractButtonSignals extends QWidgetSignals { clicked: (checked: boolean) void; pressed: () void; released: () void; toggled: (checked: boolean) void; }clicked(checked)按钮被完整点击按下并释放时触发参数为当前选中状态pressed()按下瞬间触发released()释放瞬间触发toggled(checked)选中状态发生变化时触发参数为新状态。监听方式使用addEventListener(signalType, callback)radio1.addEventListener(clicked, (checked) { console.log(radio1 clicked, checked , checked); }); radio1.addEventListener(toggled, (checked) { console.log(radio1 toggled, checked , checked); });addEventListener还有第二种重载形式用于监听WidgetEventTypes枚举定义的原生事件如HoverEnter回调签名是(event?: NativeRawPointerQEvent) void与之对应的移除方法是removeEventListener两种重载与添加时一一对应。此外还有一对事件处理标记方法eventProcessed()读取当前事件的已处理标记setEventProcessed(isProcessed)将当前事件标记为已处理此后 NodeGui 的QObject::event()会直接返回 true 而不再调用父类event()从而阻止事件被进一步处理仅应在事件处理器内部调用。信号桥接的底层原理信号并非凭空产生——C 侧的NRadioButton在connectSignalsToEventEmitter()中通过宏QABSTRACT_BUTTON_SIGNALS把 Qt 原生信号逐一连接到 Node.js 事件发射器src/cpp/include/nodegui/QtWidgets/QAbstractButton/qabstractbutton_macro.hQObject::connect(this, QAbstractButton::clicked, { Napi::Env env this-emitOnNode.Env(); Napi::HandleScope scope(env); this-emitOnNode.Call( {Napi::String::New(env, clicked), Napi::Value::From(env, checked)}); });clicked、pressed、released、toggled四个 Qt 信号都在这里被转发为 Node 侧的同名事件而emitOnNode正是 NodeWidget 基类提供的向 Node.js 事件发射器的桥接通道NRadioButton通过NODEWIDGET_IMPLEMENTATIONS(QRadioButton)宏获得该能力见 src/cpp/include/nodegui/QtWidgets/QRadioButton/nradiobutton.hpp。除此之外QWidgetSignals中的通用信号如objectNameChanged、windowTitleChanged也经由QWIDGET_SIGNALS宏一并桥接。完整方法索引除上述按钮专属方法外QRadioButton还完整继承了QWidget体系、QObject、EventWidget、YogaWidget的 API。以下为官方文档列出的全部方法按来源分组便于检索Flex 布局YogaWidgetgetFlexNode()、setFlexNodeSizeControlled(isSizeControlled)—— 获取 Flex 布局节点设置尺寸是否由外部控制例如窗口拖拽时由窗口框架控制尺寸。对象生命周期与元信息QObject_id()—— 返回标识底层 C 对象的唯一数字为 C 对象内存地址的哈希可结合setLogCreateQObject()/setLogDestroyQObject()排查内存问题delete()、deleteLater()、children()、inherits(className)、objectName()、setObjectName(name)、parent()、setParent(parent)、property(name)、setProperty(name, value)、dumpObjectInfo()、dumpObjectTree()、startTimer(intervalMS, timerType)、killTimer(timerId)。事件监听EventWidgetaddEventListener(signalType, callback, options?)/addEventListener(eventType, callback, options?)、removeEventListener(...)、eventProcessed()、setEventProcessed(isProcessed)。通用控件操作QWidget 体系显示与窗口show()、hide()、close()、setVisible(visible)、setHidden(hidden)、setDisabled(disable)、setEnabled(enabled)、isVisible()、isHidden()、isEnabled()、isWindow()、isModal()、isActiveWindow()、activateWindow()、showFullScreen()、showMaximized()、showMinimized()、showNormal()、setWindowTitle(title)、setWindowIcon(icon)、setWindowOpacity(opacity)、setWindowState(state)、setWindowFlag(windowType, switchOn)、setWindowModified(modified)、setWindowFilePath(filePath)、setWindowRole(role)、windowTitle()、windowIcon()、windowOpacity()、windowState()、windowFilePath()、windowRole()、windowHandle()、winId()、window()、isFullScreen()、isMaximized()、isMinimized()、isWindowModified()。几何与尺寸resize(w, h)、move(x, y)、setGeometry(x, y, w, h)、setFixedSize(w, h)、setFixedWidth(w)、setFixedHeight(h)、setMinimumSize(minw, minh)、setMaximumSize(maxw, maxh)、setMinimumWidth(minw)、setMaximumWidth(maxw)、setMinimumHeight(minh)、setMaximumHeight(maxh)、setBaseSize(size)、setSizeIncrement(w_or_size, h)、setSizePolicy(horizontal, vertical)、geometry()、size()、sizeHint()、minimumSize()、maximumSize()、minimumSizeHint()、baseSize()、sizeIncrement()、width()、height()、widthMM()、heightMM()、pos()、rect()、frameGeometry()、frameSize()、childrenRect()、contentsRect()、childAt(x, y)、hasHeightForWidth(w)、heightForWidth(w)、adjustSize()。坐标映射mapTo(parent, pos)、mapFrom(parent, pos)、mapToGlobal(pos)、mapFromGlobal(pos)、mapToParent(pos)、mapFromParent(pos)。外观与样式setStyleSheet(styleSheet, postprocess)、styleSheet()、setInlineStyle(style, postprocess)、repolish()、setFont(font)、font()、setCursor(cursor)、unsetCursor()、setGraphicsEffect(effect)、setAcceptDrops(on)、acceptDrops()、setAutoFillBackground(enabled)、autoFillBackground()、setAttribute(attribute, switchOn)、testAttribute(attribute)、setMouseTracking(isMouseTracked)、hasMouseTracking()、setTabletTracking(enable)、hasTabletTracking()、setUpdatesEnabled(enable)、updatesEnabled()、setInputMethodHints(hints)、inputMethodHints()、style()、underMouse()、grab(rect?)、paintingActive()、depth()、devicePixelRatio()、devicePixelRatioF()、logicalDpiX()、logicalDpiY()、physicalDpiX()、physicalDpiY()、update()、repaint()、updateGeometry()、updateMicroFocus(query)、clearMask()、clearFocus()、setFocus(reason)、setFocusPolicy(policy)、setFocusProxy(widget)、focusProxy()、focusWidget()、hasFocus()、nextInFocusChain()、previousInFocusChain()、setShortcutAutoRepeat(id, enable)、setShortcutEnabled(id, enable)、releaseShortcut(id)。辅助信息与提示setAccessibleName(name)、accessibleName()、setAccessibleDescription(description)、accessibleDescription()、setToolTip(text)、toolTip()、setToolTipDuration(msec)、toolTipDuration()、setStatusTip(statusTip)、statusTip()、setWhatsThis(whatsThis)、whatsThis()、addAction(action)、removeAction(action)、setLayout(layout)、layout()、grabKeyboard()、releaseKeyboard()、grabMouse()、releaseMouse()、raise()、lower()、stackUnder(w)、isAncestorOf(child)、isEnabledTo(ancestor)、isVisibleTo(ancestor)、nativeParentWidget()、parentWidget()、normalGeometry()、unsetLayoutDirection()、unsetLocale()、ensurePolished()、setObjectName(objectName)。各方法的参数与返回类型细节均可直接查阅 qradiobutton.md 原文或按类进入 QAbstractButton 文档、QWidget 文档、QObject 文档 等对应页面。源码实现与注册机制QRadioButton的 TypeScript 包装类非常精简src/lib/QtWidgets/QRadioButton.ts核心逻辑只有构造函数分支判断随后通过wrapperCache.registerWrapper(QRadioButtonWrap, QRadioButton)把 JS 类注册进 NodeGui 的包装缓存见 src/lib/core/WrapperCache.ts。这意味着当 C 侧需要把一个原生QRadioButton实例还回 JS 层时会优先复用缓存中已存在的 JS 包装对象避免重复包装导致身份不一致。C 侧由三个文件构成qradiobutton_wrap.h声明QRadioButtonWrapN-API 包装类通过QABSTRACTBUTTON_WRAPPED_METHODS_DECLARATION宏批量导入按钮方法qradiobutton_wrap.cpp完成 N-API 类的初始化、构造分支处理与析构清理nradiobutton.hpp定义NRadioButton多重继承自QRadioButton与NodeWidget通过NODEWIDGET_IMPLEMENTATIONS与信号宏接入事件发射器。按钮的animateClick、click、toggle三个方法在 C 宏中直接转发给 Qt 实例qabstractbutton_macro.h其余属性类方法则依赖 Qt 属性系统在 N-API 层的property/setProperty桥接。测试验证仓库为QRadioButton提供了完整的单元测试src/lib/QtWidgets/tests/QRadioButton.test.ts覆盖了主要能力实例化new QRadioButton()后inherits(QRadioButton)返回true文本设置setText(hello)后property(text).toString()为hello图标设置从assets/nodegui.png创建QIcon后setIcon并通过QIcon.fromQVariant(button.property(icon)).cacheKey()与原始图标对比验证一致图标尺寸setIconSize(new QSize(111, 111))后iconSize().width()/height()均返回111信号桥接addEventListener(objectNameChanged, mock)后setObjectName(testName)断言回调以testName被调用一次windowTitleChanged同理验证了来自QWidget的信号也可正常监听。这些测试从实践角度印证了前面介绍的核心 API 与信号机制的真实行为是理解QRadioButton用法的可靠参照。小结一句话总结在 NodeGui 中QRadioButton就是开箱即用的原生单选按钮——通过new QRadioButton()或传入父控件创建用setText标注选项、setChecked控制选中用addEventListener(toggled | clicked | pressed | released)响应交互底层则由 C 侧的QRadioButton与 N-API 桥接层保证原生渲染与事件回传。结合它继承自QAbstractButton、QWidget体系的完整方法面样式、布局、窗口、坐标、焦点、提示等足以支撑表单选择、设置项、向导页等各类桌面应用场景。如需逐个方法的精确签名与返回类型可随时回查官方生成文档 qradiobutton.md。赞分享桌面应用跨平台【免费下载链接】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 中的 QCheckBox用 JavaScript 创建与控制原生复选按钮NodeGui 中的 QCheckBox用 JavaScript 创建与控制原生复选按钮 本篇技术指南围绕 NodeGui 官方 API 参考文档 qche桌面应用跨平台WeUI按钮组件详解创建微信原生风格按钮的完整教程WeUI按钮组件详解创建微信原生风格按钮的完整教程 WeUI按钮组件是微信官方UI框架的核心组件能够帮助开发者快速创建与微信原生应用风格一致的按钮界面。作为UI组件前端NodeGui QDial 完全指南用 JavaScript/TypeScript 构建原生旋钮拨盘控件NodeGui QDial 完全指南用 JavaScript/TypeScript 构建原生旋钮拨盘控件 QDial 是 NodeGui 中用于创建和操控原生桌面应用跨平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考