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

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

code review!

1.QQuickItem

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

2.QQuickRectangle

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

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

3.QQuickImage

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

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

4.QQuickText

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

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

5.QQuickBorderImage

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

6.QQuickTextInput

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

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

7.QQuickButton

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

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

8.QQuickSwitch

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

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

9.QQuickListView

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

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

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

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

14.QQuickProgressBar

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

15.QQuickComboBox

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

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

16.QQuickToolBar

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

17.QQuickItemView

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

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

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

示例代码：

#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 中使用：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 200
    height: 200

    MyPaintedItem {
        width: 100
        height: 100
    }
}

运行

19.汇总表格