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

目录

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 = 混合应用架构

关键进展：

混合架构示例：

// 在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");

// 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 中的属性及其作用。

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

感谢各位大佬支持！！！

互三啦！！！