qt-QtQuick笔记之常见项目类简要介绍

code review!

文章目录

qt-QtQuick笔记之常见项目类简要介绍
- 1.QQuickItem
- 2.QQuickRectangle
- 3.QQuickImage
- 4.QQuickText
- 5.QQuickBorderImage
- 6.QQuickTextInput
- 7.QQuickButton
- 8.QQuickSwitch
- 9.QQuickListView
- 10.QQuickGridView
- 11.QQuickPopup
- 12.QQuickFlickable
- 13.QQuickSlider
- 14.QQuickProgressBar
- 15.QQuickComboBox
- 16.QQuickToolBar
- 17.QQuickItemView
- [18.特殊自定义绘制控件: QQuickPaintedItem](#18.特殊自定义绘制控件: QQuickPaintedItem)
- 19.汇总表格

Qt Quick 提供了多种 UI 项目类（ Item 类）来帮助开发者构建不同类型的用户界面元素。每个类都有独特的功能，能够灵活地定制应用的外观和行为。以下是一些常见的 Qt Quick 项目类的介绍，帮助你了解它们的用途和功能。

1.QQuickItem

简介：QQuickItem 是所有 Qt Quick 项目的基础类，提供了位置、大小、透明度等基础功能，但无法直接绘制内容。可以作为容器或自定义类的基类。
用途：作为基类或容器元素，用于自定义行为和属性。

2.QQuickRectangle

简介：表示一个矩形区域，常用来作为容器或视觉元素，支持背景颜色、边框、圆角等属性。
用途：用作基础矩形组件或自定义控件的基础。

qml 复制代码

Rectangle {
    width: 100
    height: 100
    color: "blue"
}

3.QQuickImage

简介：用于显示图像，支持加载本地文件、URL 或动态图像，可以控制缩放和平铺等属性。
用途：显示图标、背景图、照片等静态图像。

qml 复制代码

Image {
    source: "image.png"
    width: 100
    height: 100
}

4.QQuickText

简介：用于显示文本，支持字体、颜色、大小、对齐等样式设置。
用途：显示标签、按钮文本或任何文本内容。

qml 复制代码

Text {
    text: "Hello, World!"
    color: "black"
    font.pointSize: 24
}

5.QQuickBorderImage

简介：可以从图像中提取可伸缩的边框部分，适合用作容器或控件背景。
用途：用于背景或按钮等控件，支持可伸缩的边框和中心区域。

6.QQuickTextInput

简介：用于接收文本输入，支持键盘输入、文本编辑和光标控制。
用途：常用于文本框、搜索框等。

qml 复制代码

TextInput {
    width: 200
    placeholderText: "Enter your name"
}

7.QQuickButton

简介：标准按钮控件，支持点击、长按、启用/禁用等状态。
用途：创建按钮，常与文本或图标结合使用。

qml 复制代码

Button {
    text: "Click Me"
    onClicked: {
        console.log("Button clicked!")
    }
}

8.QQuickSwitch

简介：开关控件，用于切换布尔状态。
用途：用于二值选择，如"开启/关闭"功能。

qml 复制代码

Switch {
    onCheckedChanged: {
        console.log("Switch state: " + checked)
    }
}

9.QQuickListView

简介：支持滚动的列表视图，适用于动态数据展示，支持高效的项目显示和滚动。
用途：用于展示列表项，如联系人列表、新闻列表等。

qml 复制代码

ListView {
    width: 200
    height: 400
    model: ListModel {
        ListElement { name: "Item 1" }
        ListElement { name: "Item 2" }
    }
    delegate: Text {
        text: model.name
    }
}

10.QQuickGridView

简介：网格布局视图，用于按网格展示项目。
用途：常用于图标、照片库、文件管理器等展示。

11.QQuickPopup

简介：弹出控件，通常用于显示模态对话框或通知。
用途：弹出信息窗口或选择框。

12.QQuickFlickable

简介：支持滑动和滚动内容的控件，常作为列表、视图的基础。
用途：用于实现可以通过手势滚动的容器。

13.QQuickSlider

简介：滑动条控件，允许用户选择范围内的数值。
用途：用于控制音量、亮度等。

qml 复制代码

Slider {
    from: 0
    to: 100
    value: 50
}

14.QQuickProgressBar

简介：进度条控件，显示任务或进度的百分比。
用途：显示操作进度，如文件上传、下载等。

15.QQuickComboBox

简介：下拉列表控件，允许用户从选项中选择一个。
用途：用于选择框、菜单等。

qml 复制代码

ComboBox {
    model: ["Option 1", "Option 2", "Option 3"]
}

16.QQuickToolBar

简介：工具栏控件，通常用于显示操作按钮或菜单项。
用途：实现应用中的顶部或底部工具栏。

17.QQuickItemView

简介：基类，支持动态数据的可视化显示，作为 QQuickListView 和 QQuickGridView 的基础类。
用途：数据驱动视图，显示数据集合。

18.特殊自定义绘制控件: QQuickPaintedItem

简介：继承自 QQuickItem，提供了自定义绘制的功能，可以通过重写 paint() 方法来绘制任意内容。
用途：用于自定义控件绘制，适用于图表、绘图应用等需要动态更新绘制的场景。

示例代码：

cpp 复制代码

#include <QQuickPaintedItem>
#include <QPainter>

class MyPaintedItem : public QQuickPaintedItem
{
    Q_OBJECT

public:
    MyPaintedItem(QQuickItem *parent = nullptr) : QQuickPaintedItem(parent) {}

    void paint(QPainter *painter) override {
        painter->setBrush(Qt::red);
        painter->drawRect(0, 0, width(), height());
    }
};

在 QML 中使用：

qml 复制代码

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 200
    height: 200

    MyPaintedItem {
        width: 100
        height: 100
    }
}

运行

19.汇总表格

类名	简介	用途
QQuickItem	基础项目类，提供基本位置、大小、透明度等功能	用于自定义行为和属性的基类
QQuickRectangle	矩形区域控件，支持背景颜色、边框、圆角等属性	用作矩形组件或自定义控件的基础
QQuickImage	显示图像，支持图像加载、缩放等	用于显示图标、背景图、照片等
QQuickText	显示文本，支持字体、颜色、大小、对齐等样式设置	显示文本内容，如标签、按钮文字等
QQuickBorderImage	从图像提取可伸缩的边框部分	用作容器或控件背景，支持可伸缩区域
QQuickTextInput	文本输入控件，支持键盘输入、文本编辑、光标控制	用于文本框、搜索框等
QQuickButton	标准按钮控件，支持点击、长按、启用/禁用状态	创建按钮控件
QQuickSwitch	开关控件，用于切换布尔状态	用于二值选择
QQuickListView	滚动列表视图，支持动态数据展示	展示联系人、新闻等列表
QQuickGridView	网格布局视图，按网格展示项目	图标、照片库、文件管理器等展示
QQuickPopup	弹出控件，显示模态对话框或通知	弹出信息窗口或选择框
QQuickFlickable	支持滑动和滚动内容的控件	实现滑动和滚动的容器
QQuickSlider	滑动条控件，选择范围内的数值	音量、亮度等控制
QQuickProgressBar	进度条控件，显示任务进度	显示操作进度
QQuickComboBox	下拉列表控件，选择一项	选择框、菜单等
QQuickToolBar	工具栏控件，显示操作按钮或菜单项	顶部或底部工具栏
QQuickItemView	数据驱动视图，支持动态数据可视化	显示数据集合
QQuickPaintedItem	自定义绘制项，提供绘制功能	用于自定义控件、图形或动画绘制