《Qt/UI美化实战课程》| 第五章自定义仪表盘（美观/高度定制/自适应大小）| 9. 实现仪表盘(1) 新建项目、界面布局

最新推荐文章于 2025-04-26 14:58:10 发布

大轮明王讲QT

最新推荐文章于 2025-04-26 14:58:10 发布

阅读量1.2k

点赞数 5

分类专栏：《Qt/UI美化实战课程》文章标签： qt 自定义控件仪表盘汽车仪表盘样式表明王讲QT

本文链接：https://blog.youkuaiyun.com/bili_mingwang/article/details/140176512

版权

《Qt/UI美化实战课程》专栏收录该内容

15 篇文章

订阅专栏

《Qt/UI美化实战课程》新课首发

（1）无边框窗口（11讲）

（2）图标字体（10讲）

（3）官方图表QChart：曲线、柱状图、饼图（20+讲）

（4）第三方图表QCustomPlot：曲线、柱状图、饼图（20+讲）

（5）监控日志高亮（共 14 讲）

（6）仪表盘（16讲）

（7）天气预报（11+讲）

（8）基础控件（15+讲）

（9）高级控件（12+讲）

（10）精美换肤（15+讲）

详情参见个人主页的置顶视频（明王出品，必属精品）

需要系统跟明王学习的小伙伴：coding4096

（1）总课时：超 120+ 讲，每日更新

（2）讲课风格：从零新建项目，从零一行行写代码

（3）提供资料：视频教程+配套源码+详细笔记

本章将会从零实现一个自定义控件-仪表盘，它支持：

✅ 自定义起始角度、圆弧跨度

✅ 自定义圆环宽度、颜色、样式

✅ 支持背景圆环、当前值圆环

✅ 自定义刻度线的颜色、位置、大小刻度的数目

✅ 自定义刻度值的颜色、位置、最大最小值、精度（小数位数）

✅ 自定义显示标题：温度、湿度、电流、电压等（标题完美地显示在缺口处）

✅ 支持动画特性：从一个值变为另一个值，指针会平滑旋转

✅ 支持仪表盘自适应大小（仪表盘缩放时，圆环宽度、刻度线、刻度值、标题大小等，自适应地缩放）

本章会从零开始，自定义实现一个仪表盘控件。会实现的2个效果：

本节先创建项目，并完成整体界面布局。

1. 新建项目

创建一个名为 GaugeDemo 的项目，直接继承 QWidget，取消勾选 "Generate form"，手写布局，如下：

创建完成，项目目录如下：

2. 完成布局

界面整体效果，如下：

整体采用垂直布局，垂直布局中套一个 QScrollArea，QScrollArea 采用栅格布局（2行3列）

为了让效果好看，通常给仪表盘设置一个最小宽高

而当窗口整体缩小时，为了容纳下2行3列仪表盘，就会出现水平和垂直滚动条

这个水平和垂直滚动条是通过 QScrollArea 来实现的！

首先，来到 widget.h 中，声明几个成员变量和成员函数，如下：

#include <QGridLayout>

class Widget : public QWidget
{
private:
    void addGauge00();
    void addGauge10();

    void addGauge01();
    void addGauge11();

    void addGauge02();
    void addGauge12();

private:
    QGridLayout* gridLayout;
};

然后，来到 widget.cpp 构造中，完成布局，如下：

#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QScrollArea>
#include <QLabel>

Widget::Widget(QWidget* parent) : QWidget(parent)
{
    this->setWindowTitle("自定义控件-仪表盘");
    this->setMinimumWidth(800);
    this->setMinimumHeight(600);

    // 整体采用垂直布局
    QVBoxLayout* vLayout = new QVBoxLayout(this);
    vLayout->setContentsMargins(0, 0, 0, 0);

    // 使用 QScrollArea 可以按需显示滚动条
    QScrollArea* scrollArea = new QScrollArea(this);
    scrollArea->setWidgetResizable(true);

    QWidget* scrollAreaContents = new QWidget(this);
    gridLayout = new QGridLayout(scrollAreaContents);
    gridLayout->setSpacing(0);
    gridLayout->setContentsMargins(0, 0, 0, 0);

    scrollArea->setWidget(scrollAreaContents);

    vLayout->addWidget(scrollArea);

    addGauge00();
    addGauge10();
    addGauge01();
    addGauge11();
    addGauge02();
    addGauge12();
}

最后，实现 addGaugexx() 函数，以 addGauge00() 为例：

void Widget::addGauge00()
{
    QLabel* lbl = new QLabel(this);

    lbl->setMinimumWidth(500);
    lbl->setMinimumHeight(400);
    lbl->setStyleSheet("background-color: rgb(240,240,240)");

    gridLayout->addWidget(lbl, 0, 0);
}

此时，运行效果如下：