网站导航
> 技术文档 > 【Qt开发】常用控件（一）_Qt界面设计控件详解

【Qt开发】常用控件（一）_Qt界面设计控件详解

网友: 技术文档 2025-09-02 19:17:56

目录

1 -> 控件概述

2 -> Qt 控件体系的发展

2.1 -> 阶段一：经典 Widgets 时代 (Qt 1.x - Qt 4.x)

2.2 -> 阶段二：Graphics View 框架 (Qt 4.2+)

2.3 -> 阶段三：Qt Quick 革命 (Qt 4.7+)

2.4 -> 阶段四：统一框架时代 (Qt 5.x - Qt 6.x)

3 -> QWidget 核心属性

3.1 -> 核心属性概览

1 -> 控件概述

Widget 是 Qt 中的核心概念，控件是构成一个图形化界面的基本要素。

其中，按钮、列表视图、树形视图、单行输入框、多行输入框、滚动条、下拉框等都可以称为控件。

Qt 作为一个成熟的 GUI 开发框架，内置了大量的常用控件。这点在 Qt Designer 中就可以看到端倪。并且 Qt 也提供了 “自定义控件” 的能力，可以让开发者在现有控件不能满足需求的时候，对现有控件做出扩展，或者手搓一个新的控件。

手搓控件：

所以，熟悉并掌握 Qt 内置的常用控件是非常重要的。这些控件对于我们开发者快速开发出符合需求的界面，是至关重要的。

2 -> Qt 控件体系的发展

Qt 的控件体系经历了从传统桌面部件到现代跨平台UI框架的革命性转变，整个过程可分为四个关键阶段：

2.1 -> 阶段一：经典 Widgets 时代 (Qt 1.x - Qt 4.x)

核心架构：QWidget 基类 + 继承体系
代表控件：

技术特点：

  • 像素级控制：基于 CPU 渲染的软件绘制

  • 平台抽象层：通过 QStyle 实现原生外观

  • 手动布局：QLayout 管理器（QVBoxLayout/QHBoxLayout）

  • 信号槽机制：独特的对象通信系统

  • MVC 支持：QItemDelegate + QAbstractItemModel

典型代码：

// Qt4 风格窗口创建QWidget *window = new QWidget;QPushButton *button = new QPushButton(\"Click\", window);QVBoxLayout *layout = new QVBoxLayout(window);layout->addWidget(button);connect(button, SIGNAL(clicked()), this, SLOT(onClicked()));

局限性：

  • 性能瓶颈（复杂UI卡顿）

  • 动画支持薄弱

  • 难以实现现代视觉效果

  • 跨平台样式不一致

2.2 -> 阶段二：Graphics View 框架 (Qt 4.2+)

技术突破：

关键创新：

  • 基于场景图的渲染架构

  • 支持变换/旋转/缩放等操作

  • 内置动画框架（QPropertyAnimation）

  • 百万级项的高效渲染

应用场景：

  • 数据可视化

  • CAD/CAM 软件

  • 复杂动画界面

  • 电子地图系统

典型实现：

QGraphicsScene scene;QGraphicsRectItem *rect = scene.addRect(0, 0, 100, 100);rect->setFlag(QGraphicsItem::ItemIsMovable);QGraphicsView view(&scene);view.show();

2.3 -> 阶段三：Qt Quick 革命 (Qt 4.7+)

技术栈：

QML(声明式UI) + JavaScript(逻辑) + Qt C++(后端)

架构演进：

核心优势：

  • 60 FPS 流畅动画：GPU 加速渲染

  • 响应式设计：状态机和绑定表达式

  • 跨平台一致性：统一视觉风格

  • 热重载开发：qmlscene 即时预览

QML 示例：

// 现代按钮组件Button { text: \"Dynamic Button\" background: Rectangle { gradient: Gradient { GradientStop { position: 0; color: \"#3498db\" } GradientStop { position: 1; color: \"#2980b9\" } } } onClicked: { rotationAnimation.start() } RotationAnimation { id: rotationAnimation target: parent to: 360; duration: 1000 }}

2.4 -> 阶段四：统一框架时代 (Qt 5.x - Qt 6.x)

技术融合：

Widgets + Quick = 混合应用架构

关键进展：

技术方向 Qt5 实现 Qt6 增强 渲染引擎 基于 OpenGL 的 Scene Graph Vulkan/Metal/D3D12多后端 QML 性能 QML 编译器 强类型系统 + AOT 编译 平台支持 Android/iOS 基础支持 原生平台集成深度优化 3D 集成 Qt 3D 模块 与 Qt Quick 3D 深度整合

混合架构示例：

// 在Widgets中嵌入QMLQQuickWidget *quickWidget = new QQuickWidget;quickWidget->setSource(QUrl(\"qrc:/ModernUI.qml\"));mainLayout->addWidget(quickWidget);// 在QML中使用传统控件QmlApplicationEngine engine;engine.rootContext()->setContextProperty(\"tableModel\", &dataModel);engine.load(\"qrc:/HybridView.qml\");
// HybridView.qmlItem { TableView { // Qt Quick控件 model: tableModel //... } QtWidgets.QCalendar { // 传统Widget组件 anchors.bottom: parent.bottom }}

3 -> QWidget 核心属性

在 Qt 中，使用 QWidget 类表示 “控件”。像按钮、视图、输入框、滚动条等具体的控件类，都是继承自 QWidget。

可以说，QWidget 中就包含了 Qt 整个控件体系中，通用的部分。

在 Qt Designer 中，随便拖一个控件，选中该控件，即可在右下方看到 QWidget 中的属性。

这些属性既可以通过 Qt Designer 直接修改，也可以通过代码的方式进行修改。

这些属性的具体含义，在 Qt Assistant 中均有详细的介绍（在 Qt Assistant 中搜索 QWidget，即可找到对应的文档说明，或者在 Qt Creator 代码中，选中 QWidget，并按 F1）。

3.1 -> 核心属性概览

下列表格列出了 QWidget 中的属性及其作用。

属性 说明 enabled 设置控件是否可使⽤。 true 表⽰可⽤， false 表⽰禁⽤ geometry 位置和尺寸。包含 x，y，width，height 四个部分。其中坐标是以父元素为参考进行设置的 windowTitle 设置 widget 标题 windowIcon 设置 widget 图标 windowOpacity 设置 widget 透明度 cursor

鼠标悬停时显示的图标形状。

是普通箭头，还是沙漏，还是十字等形状。

在 Qt Designer 界面中可以清楚看到可选项

font

字体相关属性

涉及到字体家族、字体大小、粗体、斜体、下划线等样式

toolTip 鼠标悬停在 widget 上会在状态栏中显示的提示信息 toolTipDuring toolTip 显示的持续时间 statusTip Widget 状态发生改变时显示的提示信息（比如按钮被按下等） whatsThis 鼠标悬停并按下 alt + F1 时，显示的帮助信息（显示在一个弹出的窗口中） styleSheet

允许使用 CSS 来设置 widget 中的样式

Qt 中支持的样式非常丰富，对于前端开发人员来说是很好上手的

focusPolicy

该 widget 如何获取到焦点

  • Qt::NoFocus：控件不参与焦点管理，即无法通过键盘或鼠标获取焦点
  • Qt::TabFocus：控件可通过 Tab 键获得焦点
  • Qt::ClickFocus：控件可通过鼠标点击获得焦点
  • Qt::StrongFocus：控件可通过键盘和鼠标获得焦点
  • Qt::WheelFocus：控件可通过鼠标滚轮获得焦点（在某些平台或样式中不可用）
contextMenuPolicy

上下文菜单的显示策略

  • Qt::NoContextMenu：禁用上下文菜单，即使用户点击鼠标右键也不会显示菜单
  • Qt::DefaultContextMenu：默认的上下文菜单策略，用户可以通过鼠标右键或键盘快捷键触发上下文菜单
  • Qt::PreventContextMenu：将上下文菜单替换为控件的 “动作” 菜单，用户可以通过鼠标右键或键盘快捷键触发这个菜单
  • Qt::CustomContextMenu：使用自定义的上下文菜单，用户可以通过鼠标右键或键盘快捷键触发这个菜单
locale 设置语言和国家地区 acceptDrops

该部件是否接受拖放操作

如果设置为true，那么该部件就可以接收来自其他部件的拖放操作。当一个部件被拖放到该部件上时，该部件会接收到相应的拖放事件（如 dropEvent）

如果设置为false，那么该部件将不会接收任何拖放操作

minimumSize 控件的最小尺寸。包含最小宽度和最小高度 maximumSize 控件的最大尺寸。包含最大宽度和最大高度 sizePolicy 尺寸策略。设置控件在布局管理器中的缩放方式 windowModality 指定窗口是否具有 “模态” 行为 sizeIncrement 拖动窗口大小时的增量单位 baseSize 窗口的基础大小，用来搭配 sizeIncrement 调整组件尺寸，计算组件应该调整到的合适的值 palette 调色板。可以设置 widget 的颜色风格 mouseTracking

是否要跟踪鼠标移动事件

如果设为 true，表示需要跟踪，则鼠标划过的时候该 widget 就能持续收到鼠标移动事件

如果设为 false，表示不需要跟踪，则鼠标划过的时候 widget 不会收到鼠标移动事件，只能收到鼠标按下或者释放的事件

tabletTracking

是否跟踪触摸屏的移动事件。

类似于 mouseTracking。Qt 5.9 中引入的新属性

layoutDirection

布局方向。

  • Qt::LeftToRight：文本从左到右排列，也是默认值
  • Qt::RightToLeft：文本从右到左排列
  • Qt::GlobalAtomics：部件的布局方向由全局原子性决定（其实就是根据应用程序中的其他 widget 布局方向确定的）
autoFillBackground 是否自动填充背景颜色 windowFilePath 能够把 widget 和一个本地文件路径关联起来 accessibleName 设置 widget 的可访问名称。这个名称可以被辅助技术（如屏幕阅读器）获取到。这个属性用于实现无障碍程序的场景中（就是给盲人写的程序） accessibleDescription 设置 widget 的详细描述。作用同 accessibleName inputMethodHints 针对输入框有效，用来提示用户当前能输入的合法数据的格式。比如只能输入数字，只能输入日期等

后续的文章会介绍常用属性，希望大家多多支持！！！

感谢各位大佬支持！！！

互三啦！！！

网络标签：

相关问题