Qt Quick 常用控件入门：Window、Button、CheckBox 与 RadioButton

Qt Quick 常用控件入门Window、Control、Button、CheckBox 与 RadioButton2. 本节学习目标本节主要学习以下内容Window和ApplicationWindow的作用区别Qt Quick 控件的基本继承关系Control在控件体系中的作用Button的常用属性、信号和自定义样式CheckBox的状态处理和样式自定义RadioButton的使用场景和样式自定义Qt Quick 默认控件为什么在真实项目中经常需要重写样式3. Qt Quick 控件的整体关系在 Qt Quick 中很多常用控件都来自QtQuick.Controls模块。从继承关系上可以简单理解为QObject - Item - Control - AbstractButton - Button - CheckBox - RadioButton这里有几个关键点QObject是 Qt 对象体系的基础。Item是 QML 可视化对象的基础类型。Control是 Qt Quick Controls 中多数控件的基类。AbstractButton是按钮类控件的抽象基类。Button、CheckBox、RadioButton都属于按钮体系。补充理解QML 和 QWidget 都属于 Qt 技术体系但它们是两套不同的 UI 开发方式。QWidget 更偏传统桌面软件开发而 QML 更偏声明式界面开发常用于移动端、嵌入式、车载 HMI 和动态 UI 场景。4. WindowQt Quick 的顶级窗口4.1 Window 是什么Window是 Qt Quick 中用于创建顶级窗口的类型。一个 QML 程序想要显示出来通常需要一个窗口作为最外层承载对象。可以把Window理解成整个 QML 界面的外壳。示例代码import QtQuick Window { width: 1024 height: 600 visible: true title: Qt Quick Demo }常用属性width窗口宽度height窗口高度visible是否显示窗口title窗口标题flags窗口标志位比如是否显示标题栏初学者最容易忘的是visible: true如果没有设置visible: true程序可能已经运行了但是窗口不会显示出来。4.2 无标题栏窗口在桌面应用中窗口默认会有标题栏。但在嵌入式、车载 HMI、触摸屏项目中界面通常是全屏或无边框的。常见写法import QtQuick Window { width: 1024 height: 600 visible: true flags: Qt.FramelessWindowHint }Qt.FramelessWindowHint表示创建无边框窗口。在车载 HMI 项目中如果整个屏幕都由 QML 界面接管就经常会使用无标题栏窗口。4.3 closing 信号当窗口关闭时会触发closing信号。可以在这个信号中做退出前处理比如保存数据、记录日志、释放资源等。示例import QtQuick Window { width: 1024 height: 600 visible: true onClosing: function(close) { console.log(window is closing) } }在普通桌面程序里onClosing比较常见在车载 HMI 中窗口本身通常不会频繁关闭更多是页面切换和状态切换。5. ApplicationWindow更完整的应用窗口ApplicationWindow是Window的子类它在Window的基础上增加了更完整的应用窗口结构。它常见的能力包括menuBarheaderfooter使用ApplicationWindow时需要导入import QtQuick.Controls示例代码import QtQuick import QtQuick.Controls ApplicationWindow { width: 1024 height: 600 visible: true title: Application Window Demo header: ToolBar { Label { text: Header anchors.centerIn: parent } } footer: ToolBar { Label { text: Footer anchors.centerIn: parent } } }ApplicationWindow更适合带菜单栏、工具栏、状态栏的桌面应用结构。不过在移动端、嵌入式、车载 HMI 项目中很多时候不会直接使用传统桌面式结构而是自己用Window Item Loader 自定义组件搭建页面系统。6. ControlQt Quick 控件的基类型6.1 Control 的作用Control是 Qt Quick Controls 中很多控件的基类。一般情况下我们不会直接这样写Control { }因为Control本身更像一个控件基础框架。它提供了一些通用能力比如内容区域、背景、内边距等但具体可见效果通常由子类控件实现。实际开发中更常用的是Button {} CheckBox {} RadioButton {} Label {} TextField {}6.2 contentItem、background、padding、inset理解Control重点要理解几个概念。contentItem表示控件内容区域。比如按钮中的文字、复选框旁边的文本都可以通过contentItem自定义。background表示控件背景。比如按钮的矩形底色、圆角、图片背景等。padding表示内容区域和控件边界之间的内边距常见属性包括topPaddingbottomPaddingleftPaddingrightPaddinginset表示背景和控件边界之间的偏移常见属性包括topInsetbottomInsetleftInsetrightInset这部分对自定义样式非常重要。很多时候控件看起来“不居中”“文字贴边”“图标和文字间距不对”本质上都是contentItem、background、padding没处理好。7. Button最常用的按钮控件7.1 Button 是什么Button是 UI 开发中最常用的控件之一用于响应点击、按下、释放、长按等操作。简单示例import QtQuick import QtQuick.Controls Button { text: 确定 onClicked: { console.log(button clicked) } }Button继承自AbstractButton所以很多按钮相关属性和信号其实来自AbstractButton。7.2 Button 常用属性常用属性包括width按钮宽度height按钮高度enabled是否可用text按钮显示文本down按钮是否处于按下状态autoRepeat是否开启长按重复触发autoRepeatInterval长按重复触发间隔示例Button { width: 160 height: 48 text: 长按测试 autoRepeat: true autoRepeatInterval: 200 onClicked: { console.log(clicked) } }enabled很常用。当设置为false时按钮不可点击也不会响应点击事件。Button { text: 不可点击 enabled: false }7.3 Button 常用信号按钮常见信号包括pressedreleasedclickeddoubleClickedpressAndHoldtoggled示例Button { text: 按钮 onPressed: { console.log(pressed) } onReleased: { console.log(released) } onClicked: { console.log(clicked) } onPressAndHold: { console.log(press and hold) } }一般情况下信号触发顺序可以理解为pressed - released - clicked如果是长按则中间可能触发pressed - pressAndHold - released - clicked在桌面平台中双击比较常见比如双击打开应用但在嵌入式触摸屏、车载 HMI 中通常不建议依赖双击因为触摸屏上的双击体验不稳定也不利于安全交互。7.4 自定义 Button 样式真实项目中很少直接使用默认按钮样式。尤其是车载 HMI按钮通常来自 UI 设计稿需要自己定义背景、圆角、图片、文字样式和状态变化。一个简单的圆角按钮示例Button { id: root width: 180 height: 56 text: 播放 background: Rectangle { radius: 8 color: root.down ? #2E7D32 : #43A047 } contentItem: Text { text: root.text color: white font.pixelSize: 20 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } }这个例子中background控制按钮背景。contentItem控制按钮文字。root.down判断按钮是否处于按下状态。7.5 播放/暂停按钮状态切换课程中提到了一个播放器按钮示例点击按钮后在播放和暂停之间切换并显示不同图片。可以用一个布尔属性保存状态Button { id: playButton width: 80 height: 80 property bool playing: false background: Image { anchors.fill: parent source: playButton.playing ? pause.png : play.png fillMode: Image.PreserveAspectFit } contentItem: Item {} onClicked: { playing !playing } }这个例子的核心思想是状态变化 - 属性变化 - 图片变化 - UI 自动刷新这也是 QML 很重要的写法。不要总想着手动刷新界面而是让界面绑定到状态。8. CheckBox复选框控件8.1 CheckBox 是什么CheckBox是复选框用于表示选中或未选中。常见场景设置页中开启或关闭某个功能多选配置项协议勾选车辆功能开关简单示例import QtQuick import QtQuick.Controls CheckBox { text: 开启自动大灯 onCheckedChanged: { console.log(checked:, checked) } }8.2 checked 与 checkStateCheckBox常用两个状态相关属性checked是否选中布尔值checkState更完整的枚举状态checkState通常有三种状态Qt.UncheckedQt.PartiallyCheckedQt.Checked普通项目里最常用的是选中和未选中也就是二态复选框。示例CheckBox { text: 自动连接 checked: true onCheckedChanged: { console.log(auto connect:, checked) } }如果只是关心选中状态变化优先使用onCheckedChanged8.3 自定义 CheckBox 样式课程重点强调了CheckBox自定义样式的必要性。Qt Quick 自带的CheckBox样式依赖平台视觉效果比较基础。真实产品中UI 设计师通常会给出明确的选中图标、未选中图标、禁用状态和文字颜色要求。在 QML 中常用indicator自定义复选框前面的勾选区域。示例CheckBox { id: checkBox text: 记住选择 indicator: Rectangle { width: 24 height: 24 radius: 4 border.width: 2 border.color: checkBox.checked ? #1E88E5 : #999999 color: checkBox.checked ? #1E88E5 : transparent Text { anchors.centerIn: parent text: checkBox.checked ? ✓ : color: white font.pixelSize: 18 } } contentItem: Text { text: checkBox.text color: checkBox.enabled ? white : #777777 font.pixelSize: 20 leftPadding: checkBox.indicator.width 12 verticalAlignment: Text.AlignVCenter } }这个例子中indicator控制左侧复选框图标。contentItem控制右侧文字。checked决定选中样式。enabled决定禁用样式。如果项目里有图片资源也可以用Image替代Rectangle。9. RadioButton单选框控件9.1 RadioButton 是什么RadioButton是单选按钮。它和CheckBox很像但使用场景不同。CheckBox适合多选可同时选择 A、B、CRadioButton适合单选只能在 A、B、C 中选一个常见场景语言选择主题选择驾驶模式选择单位选择比如 km/h 或 mph示例Column { RadioButton { text: 中文 checked: true } RadioButton { text: English } RadioButton { text: Deutsch } }同一个父级下的多个RadioButton通常会表现出互斥选择效果。如果项目结构复杂也可以配合ButtonGroup明确管理一组单选按钮。9.2 RadioButton 常用属性与信号RadioButton也继承自AbstractButton所以常用属性和CheckBox类似widthheightenabledtextcheckedcheckState状态变化时可以这样处理RadioButton { text: 中文 onCheckedChanged: { if (checked) { console.log(language: zh_CN) } } }注意单选按钮一般只关心“被选中”的时刻所以常见写法是if (checked) { // 执行选中后的逻辑 }否则取消选中时也会触发一次状态变化容易误处理。9.3 自定义 RadioButton 样式RadioButton的自定义思路和CheckBox类似也是重点改indicator和contentItem。示例RadioButton { id: radio text: 舒适模式 indicator: Rectangle { width: 24 height: 24 radius: 12 border.width: 2 border.color: radio.checked ? #00C853 : #999999 color: transparent Rectangle { width: 12 height: 12 radius: 6 anchors.centerIn: parent visible: radio.checked color: #00C853 } } contentItem: Text { text: radio.text color: radio.enabled ? white : #777777 font.pixelSize: 20 leftPadding: radio.indicator.width 12 verticalAlignment: Text.AlignVCenter } }这里用两个圆形Rectangle组成单选框外层圆表示按钮边框。内层圆表示选中状态。visible: radio.checked控制内层圆是否显示。10. 常见问题与踩坑问题 1Window 写了但窗口不显示现象程序运行了但是看不到窗口。原因可能忘记写visible: true解决Window { width: 1024 height: 600 visible: true }复习时记住Window是顶级窗口但默认不一定显示初学时先检查visible。问题 2默认控件样式不好看现象Button、CheckBox、RadioButton默认样式和设计稿差距很大。原因Qt Quick Controls 的默认样式偏通用不一定适合车载 HMI 或产品级界面。解决根据控件类型自定义Button重点改background和contentItemCheckBox重点改indicator和contentItemRadioButton重点改indicator和contentItem复习时记住真实项目里控件默认样式通常只是功能验证用最终大多要按 UI 设计稿重写。问题 3Button 的 clicked、pressed、released 分不清现象不知道应该把逻辑写在onClicked、onPressed还是onReleased。原因这些信号关注的时机不同。解决点击完成后执行逻辑用onClicked按下瞬间改变视觉状态用onPressed或绑定down松手时处理用onReleased长按逻辑用onPressAndHold或autoRepeat复习时记住大多数普通按钮业务逻辑写在onClicked就够了。问题 4CheckBox 和 RadioButton 不知道怎么选现象设置页里不知道该用复选框还是单选框。原因两者都是按钮体系控件但选择语义不同。解决可以同时选择多个用CheckBox一组选项只能选一个用RadioButton示例是否开启自动大灯CheckBox 语言选择RadioButton11. 小结这节课的主线很清楚先从顶层窗口Window讲起再介绍更完整的ApplicationWindow然后进入 Qt Quick Controls 的基础类型Control最后讲三个最常用的按钮体系控件Button、CheckBox、RadioButton。需要重点掌握的是Window是顶级窗口初学时记得设置visible: true。ApplicationWindow更偏桌面应用窗口结构。Control是很多控件的基类理解它有助于理解自定义样式。Button是最常用控件重点掌握属性、信号和样式重写。CheckBox用于多选或开关类选项。RadioButton用于一组选项中的单选。真实产品开发中默认控件样式通常无法满足需求自定义样式是重点。对车载 HMI 或嵌入式界面开发来说最重要的不是“会拖一个按钮出来”而是能把按钮、状态、图片、文字、禁用态、选中态、按下态都封装成稳定可复用的组件。12. 复习清单Window的作用是什么为什么Window经常要写visible: trueApplicationWindow比Window多了哪些结构为什么 Qt Quick 更偏移动端、嵌入式和 HMIControl、Item、QObject之间大概是什么继承关系contentItem和background分别负责什么padding和inset有什么区别Button常用属性有哪些pressed、released、clicked的触发关系是什么autoRepeat适合什么场景如何自定义一个 Button 的背景和文字CheckBox的checked和checkState有什么区别CheckBox的indicator通常用来改什么RadioButton和CheckBox的使用场景区别是什么为什么真实项目里经常不用默认控件样式如果要做车载 HMI 设置页哪些控件适合封装成自定义组件