第四篇：在ROS工程中使用QT开发界面笔记之---用qss制作图文效果

1.QLable的效果

1.1为边框设置颜色宽度和弧度

为QLable设置圆形边和边框，先转成Box然后设置StyleSheet

ui->show->setFrameShape(QFrame::Box);

ui->show->setStyleSheet("QLabel{border:5px groove;border-color: rgb(26, 82, 58);border-radius:15px}");

1.2设置标题下的阴影，当颜色为白色时效果是亮光强调

QGraphicsDropShadowEffect* dse = new QGraphicsDropShadowEffect();

dse->setBlurRadius(10);

dse->setColor(QColor(255,255,255));//设置阴影为白色

ui->Title_word->setGraphicsEffect(dse);

1.3添加图片，内容可伸缩

std::string pkg_path = ros::package::getPath("test_data");

img_1 = cv::imread(pkg_path+"/data/test.png");//图像从BGR(由OpenCV使用)转换为RGB

QPixmap showimag1 = QPixmap::fromImage(QImage((const unsigned char*)(img_1.data),img_1.cols,img_1.rows,img_1.step,QImage::Format_RGB888));

ui→show→setPixmap(showimag1);

打开UI界面，在QLable中勾选scaledContent，上述图片内容即可在QLable中实现伸缩展示。

1.4添加渐变的背景颜色

在ui的stylesheet中设置

圆形渐变效果

background-color:qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 #003377,stop:0.3 #003377, stop:0.7 #003c9d,stop:1 #007799 )

线状渐变效果（0->1表示效果的起点和终点，可设置在x，y和两个对角方向）

background-color:qlineargradient(spread:pad,x1:0, y1:0, x2:1, y2:0,stop:0 rgb(50,119,153),stop:0.5 rgb(238,238,236),stop:1 rgb(50,119,153))

2.用chartView画图

在左边搜索GraphicsView拖到界面中，右键→提升为→基类名称：QGraphicsView,提升类名称QtCharts::QChartView,头文件qchartview.h。

使用步骤一般为首先创建需要展示的部件如线饼片柱等，然后新建QChart设置它的坐标系等配置并将部件赋给QChart对象，接着创建 QChartView用作显示QChart对象

2.2用chartView画柱状图

假设上述 QGraphicsView是用来画柱状图的：

柱状图的部件有 QBarSeries和 QBarSet,对应的数据分别是属于不同类用作对比的数和属于同一类的簇。当每一簇只有一种数据时可以不用QBarSet,下面以两个数据为例：

QBarSeries *testbar = new QBarSeries();

testbar->setLabelsPosition(QAbstractBarSeries::LabelsInsideEnd);

testbar->setLabelsVisible(true);

testbar->setBarWidth(0.8);

chartbar = new QChart();//创建chartbar

chartbar->setMinimumSize(100,200);

chartbar->addSeries(testbar);//chartbar中加入柱

chartbar->setAxisX(axisbar1X,testbar);//为testbar设置x，y轴

chartbar->setAxisY(axisbar1Y,testbar);

chartbar->setTheme(QChart::ChartThemeBlueCerulean);//chartbar设置蓝色主题

chartbar->legend()->setVisible(false);//设置legend不可见

chartviewtestbar = new QChartView();//创建QChartView对象用作显示chartbar

chartviewtestbar→setChart(chartbar);//往QChartView中加入chartbar

//把QchartView添加到刚刚拖到界面的那个提升为QChartView 的Widget对象

chartviewtestbar→setParent(ui→testbar);

//设置视图中心，后两位是宽高前两位设置为后两位负数的一半

chartviewtestbar→setSceneRect(-100,-200,200,400);

将为testbar 赋值的过程单独提出来写，是因为常常需要接收的数据是变化的一般放在槽函数中

2.2用chartView画饼图

假设上述 QGraphicsView是用来画饼图的：

饼状图的部件有 QPieSeries和QPieSlice，分别对应整个圆和圆中的一片，数据设置在QPieSlice中，实时显示接收的不断变化的数据需要将QPieSlice放到槽函数中设置。

QPieSeries *testpieSeries = new QPieSeries();

charpie = new QChart();

charpie->addSeries(testpieSeries);

charpie->legend()->hide();

charpie->setTheme(QChart::ChartThemeBlueCerulean);

chartviewtestPie = new QChartView();

chartviewtestPie->setChart(charpie);

chartviewtestPie->setParent(ui->piedsp1);

chartviewtestPie->setRenderHint(QPainter::Antialiasing);

chartviewtestPie->setSceneRect(-100,-100,200,200);

chartviewtestPie→show();

在槽函数中为多个QPieSlice赋值：

if(testpieSeries->count()>1)

{

testpieSeries->clear();//每次调用槽函数都重新画圆

}

int n1(data_to_show);

int nu11 = 100-nu1;

testpieSeries->append("",nu1);

testpieSeries->append("",nu11);

testpieSeries->setHoleSize(0.45);//空心圆

QPieSlice *pie_slice1 =testpieSeries->slices().at(0);

QPieSlice *pie_slice2 = testpieSeries->slices().at(1);

pie_slice1->setBorderColor(Qt::transparent);

pie_slice1->setBorderWidth(0);

pie_slice1->setColor(QColor(255,255,255));

pie_slice1->setExploded();//突出这片

pie_slice2->setBorderColor(QColor(255,255,255));

pie_slice2->setBorderWidth(3);

pie_slice2→setColor(Qt::transparent);

2.3用chartView画实时折线图

假设上述 QGraphicsView是用来画实时折线图的：

实时折线图的部件只有有 QSplineSeries，但要关注X和Y轴的设置因为实时显示数据超过数据轴长度时需要在更新数据的同时更新两个坐标轴。 AXIS_MAX_Y, AXIS_MAX_X自定义

QValueAxis *axisYline = new QValueAxis();

axisYline->setTitleText("%");

axisYline->setGridLineVisible(false);//设置网格不显示

axisYline->setLabelFormat("%.2f");//显示小数点后两位

axisYline->setRange(0, 100);

axisYline->setMin(0);

axisYline->setMax(AXIS_MAX_Y);

QValueAxis *axisXline = new QValueAxis();

axisXline->setRange(0, AXIS_MAX_X+1);

axisXline->setMin(0);

axisXline->setMax(AXIS_MAX_X);

axisXline->setTickCount(AXIS_MAX_X+1);

QSplineSeries *lineSeriestest = new QSplineSeries();

lineSeriestest->setPointsVisible(true);//设置数据点可见

lineSeriestest->setColor(QColor(238,238,236));//白色线

chartlinetest = new QChart();

chartlinetest->addAxis(axisXline,Qt::AlignBottom);

chartlinetest->addAxis(axisYline,Qt::AlignLeft);

chartlinetest->addSeries(lineSeriestest);

chartlinetest->setTitle("实时折线图");

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

chartlinetest->setTheme(QChart::ChartThemeBlueCerulean);//蓝色主题配白色的线

lineSeriestest->attachAxis(axisYline);

lineSeriestest->attachAxis(axisXline);

chartviewLinetest = new QChartView();//创建QChartView对象用作显示chartlinetest

chartviewLinetest->setChart(chartlinetest);//QChartView中加入chartp1

chartviewLinetest->setParent(ui->graphicsViewcpu4);//把QchartView添加到界面的一个Widget对scrollArea是滚动区域；scrollArea是滚动区域；象

chartviewLinetest->setRenderHint(QPainter::Antialiasing);//平滑锯齿

chartviewLinetest->setSceneRect(-318,-100,636,200);//前面两位为中心点设为宽高负数的一半即可

chartviewLinetest→show();

在槽函数中设置线值，并设置计数器count 在需要时更新坐标轴

if(count > AXIS_MAX_X)

{

lineSeriestest->remove(0);

chartlinetest->axisX()->setMin(count - AXIS_MAX_X);

chartlinetest->axisX()->setMax(count);

}

lineSeriestest->append(QPointF(count, data));

count++;

3.给界面添加滚动显示效果

因为没有使用layout导致所有组件大小固定不可调，界面大小用像素值计算宽度下与1920但高度超过了1080，需要添加滚动效果否则内容看不全。我是新手没办法设计阶段就规划好有哪些组件所以无法使用layout，没办法只能采用如下亡羊补牢的方法。

本界面是基于mainwindow的，在此基础上修改。全选所有组建然后剪切，在当前的mainwindow中添加scrollArea，然后ctrl+v将之前的所有组件都拷贝到这个scrollArea中，如图结构：

自动生成的centralWidget和scrollAreaWidgetContents

scrollArea是滚动区域；scrollAreaWidgetContents是内部容器也被称为，"内容层"相当于一块很大的幕布，按钮、label等控件都被绘制在了幕布上，而QScrollArea相当于一个小窗口，透过这个小窗口我们看一看到幕布上的一小部分内容，拖动滚动条相当于在窗口后面移动幕布，这样我们就能透过窗口看到幕布上不同位置的内容。所以，当QScrollArea的尺寸 < scrollAreaWidgetContents内部容器的尺寸时，就会出现滚动条（横纵都适用），这种情况是当需要滚动条的时候才出现，当然也可以设置滚动条一直存在。选择ScrollArea→QAbstractScrollArea→verticalScrollBarPolicy(horizontalScrollBarPolicy)→ScrollBarAlwaysOn,其实一般都保持默认最好。

我们的QScrollArea和它里面的控件都是直接在ui里拖出来的，这种情形不用写代码，只要幕布控件scorllAreaWidgetContents的大小超过了QScrollArea的大小，就会自动出现滚动条；如果幕布比观察窗口还小，那就不会出现滚动条：在scorllAreaWidgetContents下的QWidget设置minimunSize宽度和高度的最小值大于QScrollArea的QWidget宽度和高度。

将scrollArea的边框设置为跟随mainwindow拖拉：当mainwindow只有一个组件且为scrollArea时选择Grid Layout。

后来想想还是要把界面做成可以自动变换大小的用起来才方便，界面的内容分为4个类似的部分对应放在4个容器中，在左边列containers中选一个Widget,待调整完成后复制3份即可。用水平和垂直的spacers在有必要的地方进行间隔，因为想使用layouts做对齐，所以在必要的地方添加Widget容器。

关于使用Qlable显示图片：要在使用Qlable设置底色和说明文字之上再添加Qlabel显示图片，采用png格式的没有底色的阿拉伯数字，之前我用代码方式显示图片内容出来是空的，其实可以改为直接通过ui上操作显示即可：QLable→text→pixmap→选择文件→找到想要显示的没有底色的数字图片，然后勾选下面的scaledContents。可以设置图片的最大值，QWidget→maximumSize设置长和宽。或者直接选择sizePolicy的水平策略和垂直策略为fixed.

----好了项目需要的就这些，就写这么多。