QT(数据可视化大屏)之 双层结构设计2

这是想要实现的效果,地图作为底图,上层设置为透明窗口展示数据,同时在没有遮挡的部分可以操作底层的地图
在这里插入图片描述
尝试了多种方式,最后发现在布局中是可以添加多层控件的,请原谅我的无知,效果如下:
在这里插入图片描述
上层添加了一个透明的窗口,用于显示数据,同时无遮挡地方不影响操作地图。
主要代码:
screen.cpp

mapBaidu = new BaiduMap();
    layFloor = new QGridLayout();
    layFloor->setRowStretch(0,1);
    layFloor->setRowStretch(1,4);
    layFloor->setRowStretch(2,4);
    layFloor->setRowStretch(3,4);
    layFloor->setColumnStretch(0,1);
    layFloor->setColumnStretch(1,2);
    layFloor->setColumnStretch(2,1);
    setLayout(layFloor);
    layFloor->addWidget(mapBaidu->map,0,0,4,3);

    wdTitle = new QWidget(this);
    wdTitle->setStyleSheet("background-color: rgb(0, 98, 145, 90);");
    layFloor->addWidget(wdTitle,0,0,1,3);

    HlayTitle = new QHBoxLayout();
    wdTitle->setLayout(HlayTitle);
    title = new QLabel(tr("数据可视化平台"));
    title->setStyleSheet("color:rgb(255, 255, 255);"
                         "background-color: rgb(255, 255, 255, 0);"
                         "font-size:30px;"
                         "font-style:微软雅黑;"
                         "font: bold;");
    HlayTitle->addWidget(title,0,Qt::AlignLeft);

screen.h

#ifndef SCREEN_H
#define SCREEN_H

#include <QWidget>
#include <QGridLayout>
#include <QLabel>
#include <QPushButton>
#include <QDir>
#include <QWebEngineView>
#include <QGridLayout>
#include <QStackedLayout>
#include <QHBoxLayout>
#include "baidumap.h"
namespace Ui {
class Screen;
}

class Screen : public QWidget
{
    Q_OBJECT

public:
    explicit Screen(QWidget *parent = nullptr);
    ~Screen();

private:
    Ui::Screen *ui;

private:
    BaiduMap *mapBaidu;

    QGridLayout  *layFloor;
    QWidget* wdTitle;
    QWidget* wdLeft1;
    QWidget* wdLeft2;
    QWidget* wdLeft3;
    QWidget* wdRight1;
    QWidget* wdRight2;
    QWidget* wdRight3;

    QHBoxLayout* HlayTitle;
    QLabel* title;
    void init_ui();
};

#endif // SCREEN_H

关于地图的添加可以看这篇文章

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值