第五篇 在ROS工程中使用QT开发界面笔记之---缩放

之前的QT界面没有用布局，导致部件们不能随窗口变化大小。项目又有要求，所以UI重新添加部件然后在ui上层层布局。

在UI上布局的方法很简单，选中想要垂直排列的三个部件，右键->“布局”->”垂直布局”。ui就自动生成好了布局，在ui上调整布局的属性，我主要调整了这几个：设置layoutSpacing为0，即布局的所有部件之间的间隔为0;layoutStretch按照比例设置部件的占比（垂直布局就是分配纵坐标，水平布局就是分配横坐标）部件的顺序是UI界面右上方对象/类那个框里的从上往下顺序。

想要全部都按窗口大小缩放必然会层层嵌套布局，以第二层是水平布局为例，就是在第一层已经布局好了的基础上选中新的部件，右键->“布局”->”水平布局”。设置方法一样不再复述。

因为工程里的部件有两处要显示图，一个是用label显示图片，一个是用QgraphicView升级成QchartView显示Qchart画的实时曲线图。所以把两种方法都整理如下。

1、缩放用QgraphicView升级成QchartView显示Qchart画的实时曲线图

chartobj = new Qchart();//设置Qchart对象 chartobj

chartobj->setMinimumSize(QSize(100, 100)); //设置chartobj的最小值为100，100

chartobj->addAxis(axiscpuX,Qt::AlignBottom);

chartobj->addAxis(axiscpuY,Qt::AlignLeft);

chartobj->addSeries(lineSeries);

chartobj->setTitle("CPU占用率");

chartobj->legend()->setVisible(false);//隐藏图例

lineSeries->attachAxis(axiscpuY);

lineSeries->attachAxis(axiscpuX);

chartView = new QChartView();//设置QChartView 对象 chartView

chartView->setChart(chartobj); // 将chartView设置为chartobj的图表

chartView->setParent(ui->graphicsView);//将从界面拖出来的QgraphicView升级成QchartView的ui->graphicsView设置成chartView 的父对象，这样就不用单独加QChartView 对象 chartView到布局中了，因为ui->graphicsView在我们用UI界面布局的时候已经完成了布局且生效了

chartView->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//设置chartView为伸缩规则

scene = new QGraphicsScene();//这是一个全局参数，在头文件中定义的，因为我在其他函数中要用到这个 场景scene

ui->graphicsView->setScene(scene);//设置 ui->graphicsView的场景是 scene，但在场景中添加Item的时候不能直接加这个ui->graphicsView，得要采用到下面的这种代理方式。

proxyWidget = new QGraphicsProxyWidget();

proxyWidget->setWidget(ui->graphicsView);

scene→addItem(proxyWidget);//至此在场景中添加了ui->graphicsView作为它的Item

QRect viewRect = ui->graphicsView->rect();

int startwidth = viewRect.width();

int startheight = viewRect.height();

chartView->resize(startwidth, startheight);//将 chartView的大小设置成 ui->graphicsView的大小，这样 折线图就能在界面拖出来的graphicsView区域内完整显示

ui→graphicsView→fitInView(scene→sceneRect());//调整graphicsView的大小适应场景scene

按照如上方法就能在界面上显示任意大小的折线图了。当窗口缩放的时候，大小的要改变需要使用重写resize函数的方法修改。下面MainWindow是我的主函数，可以相应改成你自己使用的主函数

void MainWindow::resizeEvent(QResizeEvent *event)

{

QMainWindow::resizeEvent(event);

ui->graphicsView->setSceneRect(ui->graphicsView->rect());

ui->graphicsView->setAlignment(Qt::AlignCenter);//居中显示

ui->graphicsView->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//横纵坐标的缩放规则均为expanding

ui->graphicsView->setViewportUpdateMode(QGraphicsView::FullViewportUpdate);//全View更新显示

QRect cpuRect = ui->graphicsView->rect();

int cpu1width = cpuRect.width();

int cpu1height = cpuRect.height();

if (ui->graphicsView->scene() != nullptr) {

// 如果已经有场景，先将其设置为空nullptr

ui→graphicsView→setScene(nullptr);

}

ui->graphicsView->setScene(scene);//这就是scene 要设置成全局的原因resizeEvent 函数会用到该场景

ui->graphicsView->scene()->setSceneRect(ui->graphicsView->rect());//设置更新场景的大小为当前值

chartView->resize(cpu1width, cpu1height);//设置折线图 chartView的大小为当前值

ui->graphicsView->fitInView(scene->sceneRect());//调整graphicsView的大小适应场景scene

}

2、用Qlabel显示缩放的图片非常简单，直接用UI界面就可以配置了，选中Qlabel部件，在右下角的属性框里面找到Qlabel栏，将ScaledContents勾选上，然后找到QWidget栏，将scale policy 横纵坐标都选为expading就可以了。因为Qlabel有个属性就是QPixmap，而QPixmap不用变换直接就可以显示在界面上，所以要将图片放到界面上可以直接在该属性上选择你要显示的图片就OK了。这种方法显示图片真是非常的方便简单。

3、我还尝试过用QgraphicsView来显示图片，在UI界面拖出一个QgraphicView对象ui->graphicsView_picture 把它放到合适的位置和布局里面

scenesceneimport1 = new QGraphicsScene();//添加显示的场景 scenesceneimport1

scenesceneimport1->setSceneRect(ui->graphicsView_picture->rect());//设置场景的大小

scenesceneimport1->addWidget(ui->graphicsView_picture);//将 ui->graphicsView_picture加入场景 scenesceneimport1中

同样的在void MainWindow::resizeEvent(QResizeEvent *event)里面设置场景的大小为最新值

ui→graphicsView_picture→setSceneRect(ui→graphicsView_picture→rect());

对比起来还是方法2最简单。