qt widget 和 qml常见组件

### Qt Widget 常见组件列表 Qt Widgets 是 Qt 框架中的经典 UI 组件库，提供了丰富的控件支持开发人员构建复杂的桌面应用程序。以下是常用的 Qt Widget 组件： - **QWidget**: 所有用户界面对象的基础类[^1]。 - **QPushButton**: 提供标准按钮功能，常用于触发事件操作。 - **QLabel**: 显示文本或图像的简单控件。 - **QLineEdit**: 单行文本输入框。 - **QTextEdit**: 多行富文本编辑器。 - **QComboBox**: 下拉菜单选择框。 - **QCheckBox**: 提供多选选项的功能。 - **QRadioButton**: 一组互斥的选择项。 这些组件通过 C++ 编程接口实现，并且能够直接调用底层操作系统 API 来优化性能和兼容性。 --- ### QML 的常见组件及其示例 QML (Qt Modeling Language) 是一种声明式的脚本语言，专为设计动态图形化用户界面而生。下面列举了一些常见的 QML 组件并附带简单的使用案例： #### 1. **Rectangle** `Rectangle` 是最基础的形状绘制组件，可用于创建矩形区域或者作为其他复杂布局的一部分[^4]。 ```qml import QtQuick 2.0 Rectangle { width: 100; height: 50 color: "blue" } ``` #### 2. **Text** `Text` 用来展示静态文字内容。 ```qml import QtQuick 2.0 Text { text: "Hello, World!" font.pixelSize: 20 anchors.centerIn: parent } ``` #### 3. **Button** `Button` 可以轻松定制外观并通过信号槽机制响应点击动作。 ```qml import QtQuick.Controls 2.0 Button { text: "Click Me" onClicked: console.log("Button was clicked!") } ``` #### 4. **Image** 加载图片资源到界面上非常方便。 ```qml import QtQuick 2.0 Image { source: "image.png" fillMode: Image.PreserveAspectFit } ``` #### 5. **ListView** 当需要呈现大量数据时，`ListView` 成为了首选方案之一。 ```qml import QtQuick 2.0 ListView { model: ["Item 1", "Item 2", "Item 3"] delegate: Text { text: modelData } width: 150; height: 200 } ``` 以上只是部分核心组件介绍，实际应用中还有更多高级特性等待探索。 --- ### 使用教程概述 对于初学者来说，掌握如何混合使用 `QWidget` 和 QML 尤其重要。例如，在已有基于 widget 构建的传统 GUI 上集成现代 QML 功能可以通过引入 `QQuickWidget` 实现无缝过渡[^2]。具体做法如下所示： ```cpp #include <QApplication> #include <QVBoxLayout> #include <QQuickWidget> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; QVBoxLayout layout(&window); QQuickWidget quickWidget; quickWidget.setSource(QUrl::fromLocalFile("main.qml")); quickWidget.setResizeMode(QQuickWidget::SizeRootObjectToView); layout.addWidget(&quickWidget); window.show(); return app.exec(); } ``` 上述代码片段展示了怎样在一个传统 Qt 应用程序里嵌入 QML 文件。 ---