【Qt开发】常用控件（一）

[1 -> 控件概述](#1 -> 控件概述)

[2 -> Qt 控件体系的发展](#2 -> Qt 控件体系的发展)

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

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

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

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

[3 -> QWidget 核心属性](#3 -> QWidget 核心属性)

[3.1 -> 核心属性概览](#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

典型代码：

cpp 复制代码

// 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 软件
复杂动画界面
电子地图系统

典型实现：

cpp 复制代码

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 示例：

cpp 复制代码

// 现代按钮组件
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 深度整合 |

混合架构示例：

cpp 复制代码

// 在Widgets中嵌入QML
QQuickWidget *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");

cpp 复制代码

// HybridView.qml
Item {
    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 | geometry | windowTitle | windowIcon | windowOpacity | cursor | font | toolTip | toolTipDuring | statusTip | whatsThis | styleSheet | focusPolicy | contextMenuPolicy | locale | acceptDrops | minimumSize | maximumSize | sizePolicy | windowModality | sizeIncrement | baseSize | palette | mouseTracking | tabletTracking | layoutDirection | autoFillBackground | windowFilePath | accessibleName | accessibleDescription | inputMethodHints -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 说明 |
| 设置控件是否可使⽤。 true 表⽰可⽤， false 表⽰禁⽤ |
| 位置和尺寸。包含 x，y，width，height 四个部分。其中坐标是以父元素为参考进行设置的 |
| 设置 widget 标题 |
| 设置 widget 图标 |
| 设置 widget 透明度 |
| 鼠标悬停时显示的图标形状。 是普通箭头，还是沙漏，还是十字等形状。 在 Qt Designer 界面中可以清楚看到可选项 |
| 字体相关属性 涉及到字体家族、字体大小、粗体、斜体、下划线等样式 |
| 鼠标悬停在 widget 上会在状态栏中显示的提示信息 |
| toolTip 显示的持续时间 |
| Widget 状态发生改变时显示的提示信息（比如按钮被按下等） |
| 鼠标悬停并按下 alt + F1 时，显示的帮助信息（显示在一个弹出的窗口中） |
| 允许使用 CSS 来设置 widget 中的样式 Qt 中支持的样式非常丰富，对于前端开发人员来说是很好上手的 |
| 该 widget 如何获取到焦点 * Qt::NoFocus：控件不参与焦点管理，即无法通过键盘或鼠标获取焦点 * Qt::TabFocus：控件可通过 Tab 键获得焦点 * Qt::ClickFocus：控件可通过鼠标点击获得焦点 * Qt::StrongFocus：控件可通过键盘和鼠标获得焦点 * Qt::WheelFocus：控件可通过鼠标滚轮获得焦点（在某些平台或样式中不可用） |
| 上下文菜单的显示策略 * Qt::NoContextMenu：禁用上下文菜单，即使用户点击鼠标右键也不会显示菜单 * Qt::DefaultContextMenu：默认的上下文菜单策略，用户可以通过鼠标右键或键盘快捷键触发上下文菜单 * Qt::PreventContextMenu：将上下文菜单替换为控件的 "动作" 菜单，用户可以通过鼠标右键或键盘快捷键触发这个菜单 * Qt::CustomContextMenu：使用自定义的上下文菜单，用户可以通过鼠标右键或键盘快捷键触发这个菜单 |
| 设置语言和国家地区 |
| 该部件是否接受拖放操作 如果设置为true，那么该部件就可以接收来自其他部件的拖放操作。当一个部件被拖放到该部件上时，该部件会接收到相应的拖放事件（如 dropEvent） 如果设置为false，那么该部件将不会接收任何拖放操作 |
| 控件的最小尺寸。包含最小宽度和最小高度 |
| 控件的最大尺寸。包含最大宽度和最大高度 |
| 尺寸策略。设置控件在布局管理器中的缩放方式 |
| 指定窗口是否具有 "模态" 行为 |
| 拖动窗口大小时的增量单位 |
| 窗口的基础大小，用来搭配 sizeIncrement 调整组件尺寸，计算组件应该调整到的合适的值 |
| 调色板。可以设置 widget 的颜色风格 |
| 是否要跟踪鼠标移动事件 如果设为 true，表示需要跟踪，则鼠标划过的时候该 widget 就能持续收到鼠标移动事件 如果设为 false，表示不需要跟踪，则鼠标划过的时候 widget 不会收到鼠标移动事件，只能收到鼠标按下或者释放的事件 |
| 是否跟踪触摸屏的移动事件。 类似于 mouseTracking。Qt 5.9 中引入的新属性 |
| 布局方向。 * Qt::LeftToRight：文本从左到右排列，也是默认值 * Qt::RightToLeft：文本从右到左排列 * Qt::GlobalAtomics：部件的布局方向由全局原子性决定（其实就是根据应用程序中的其他 widget 布局方向确定的） |
| 是否自动填充背景颜色 |
| 能够把 widget 和一个本地文件路径关联起来 |
| 设置 widget 的可访问名称。这个名称可以被辅助技术（如屏幕阅读器）获取到。这个属性用于实现无障碍程序的场景中（就是给盲人写的程序） |
| 设置 widget 的详细描述。作用同 accessibleName |
| 针对输入框有效，用来提示用户当前能输入的合法数据的格式。比如只能输入数字，只能输入日期等 |

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

感谢各位大佬支持！！！

互三啦！！！