Qt-C++基础界面开发

1 Display Widget控件的简单使用1.1 label控件的基本操作1.2 textBrowser控件的基本操作1.3 LCD Number控件的基本操作1.4 progressBar控件的基本操作1.5 graphic View控件的基本操作1.5.1 绘制柱状图1.5.2 绘制折线图1.5.3 绘制饼状图2 Item Widget控件的简单使用2.1 Tree Widget的基本操作2.2 Table Widget的基本操作

1 Display Widget控件的简单使用

部分Display Widget的控件，只能作为显示（display）使用，因此部分情况下，是不需要信号和槽函数的

1.1 label控件的基本操作

label一般用来作为说明文字和控件组合在一起

label还可以作为背景图片添加在界面上

label作为光板对其属性进行操作，达到某些效果，如红绿灯等设计label的颜色实现变化

1.2 textBrowser控件的基本操作

1、添加ui进qt designer，并对控件命名

2、只作显示使用，不需要信号和槽函数

3、默认大类为QTextBrowser

4、直接在界面的cpp文件对其进行显示

1、 设计界面的textBrowser对其进行命名

2、对其进行内容的清除、添加操作

#include "mainwindow.h"#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow){ui->setupUi(this);// 代码在此后面添加// 默认大类为QTextBrowserui->textBrowser->clear();ui->textBrowser->append("hello");}MainWindow::~MainWindow(){delete ui;}

3、显示效果

1.3 LCD Number控件的基本操作

1、添加ui进qt designer，并对控件命名

2、直接在界面的cpp文件对其进行显示

ui->setupUi(this);// 代码在此后面添加ui->LCD1->display("10");

1.4 progressBar控件的基本操作

1、添加ui进qt designer，并对控件命名

2、直接在界面的cpp文件对其进行显示

ui->setupUi(this);// 代码在此后面添加// 设置区间、数值等等ui->pgb->setValue(88);

1.5 graphic View控件的基本操作

1、graphic View可以用来显示一些图形

2、其实采用widget控件也能显示图像

3、此处包括一些基础图像的绘制，但是图像的一些设置需要摸索

在.pro文件添加charts，例如

QT += chartsQT += widgets

在界面的.h文件添加绘图的类

#include <QtCharts>#include <QGraphicsItem>#include <QGraphicsView>

在界面UI添加graphic View，并命名

此时的.h文件都如下所示，只是添加了几个头文件

#ifndef MAINWINDOW_H#define MAINWINDOW_H#include <QMainWindow>#include<QPushButton>#include <QtCharts>#include <QGraphicsItem>#include <QGraphicsView>QT_BEGIN_NAMESPACEnamespace Ui {class MainWindow; }QT_END_NAMESPACEclass MainWindow : public QMainWindow{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui;};#endif // MAINWINDOW_H

1.5.1 绘制柱状图

在界面的.cpp文件实现柱状图的绘制

#include "mainwindow.h"#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow){ui->setupUi(this);// 代码在此后面添加// 1、设置集合QBarSet *set0 = new QBarSet("产品1");QBarSet *set1 = new QBarSet("产品2");// 2、设置集合的数据*set0<<4<<6<<8;*set1<<2<<3<<4;// 3、将集合和数据添加到柱状图QBarSeries *series = new QBarSeries();series->append(set0);series->append(set1);// 4、创建图像QChart *chart = new QChart();chart->addSeries(series);// // 不需要title// chart->setTitle("生产直方图");chart->setAnimationOptions(QChart::SeriesAnimations);// 5、X轴的文字内容QStringList categories;categories<<"1月"<<"2月"<<"3月";// 6、创建坐标值并添加坐标轴内容QBarCategoryAxis *axis = new QBarCategoryAxis();axis->append(categories);chart->createDefaultAxes();chart->setAxisX(axis, series);// 7、将坐标轴文字竖排axis->setLabelsAngle(-90);// 8、显示下方注释，如红色是产品1，蓝色是产品2chart->legend()->setVisible(true);chart->legend()->setAlignment(Qt::AlignBottom);// 9、显示图像在graphic View上QChartView *chartView = new QChartView(chart,ui->gview);chartView->setRenderHint(QPainter::Antialiasing);chartView->resize(ui->gview->size());// 设计图像的主题chartView->chart()->setTheme(QChart::ChartThemeBlueCerulean);chartView->show();}MainWindow::~MainWindow(){delete ui;}

显示的效果如下图所示：

1.5.2 绘制折线图

在cpp文件绘制折线图

#include "mainwindow.h"#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow){ui->setupUi(this);// 代码在此后面添加// 1、设置集合QLineSeries *lineseries = new QLineSeries();// 2、设置集合的数据for(int i = 0; i < 3; ++i){lineseries->append(i,2*(i+1));};// 3、创建图像QChart *chart = new QChart();chart->addSeries(lineseries);// // 不需要title// chart->setTitle("生产直方图");chart->setAnimationOptions(QChart::SeriesAnimations);// 4、X轴的文字内容QStringList categories;categories<<"1月"<<"2月"<<"3月";// 5、创建坐标值并添加坐标轴内容QValueAxis *axisY = new QValueAxis();chart->setAxisY(axisY, lineseries);axisY->setRange(0, 8);// 6、将坐标轴文字竖排QBarCategoryAxis *axis = new QBarCategoryAxis();axis->append(categories);chart->setAxisX(axis, lineseries);axis->setLabelsAngle(-90);// 7、显示下方注释，如红色是产品1，蓝色是产品2chart->legend()->setVisible(true);chart->legend()->setAlignment(Qt::AlignBottom);// 8、显示图像在graphic View上QChartView *chartView = new QChartView(chart,ui->gview);chartView->setRenderHint(QPainter::Antialiasing);chartView->resize(ui->gview->size());// 设计图像的主题chartView->chart()->setTheme(QChart::ChartThemeBlueCerulean);chartView->show();}MainWindow::~MainWindow(){delete ui;}

效果如下图所示：

1.5.3 绘制饼状图

#include "mainwindow.h"#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow){ui->setupUi(this);// 代码在此后面添加QPieSeries *pieseries = new QPieSeries();QChart *piechart = new QChart();pieseries->setHoleSize(0.5);pieseries->append("剩余产品数量",80);QPieSlice *slice = pieseries->append("已完成数量", 20);slice->setExploded();slice->setLabelVisible();QChartView *piechartView = new QChartView(piechart,ui->gview);piechartView->setRenderHint(QPainter::Antialiasing);// 显示图像piechartView->chart()->addSeries(pieseries);piechartView->chart()->legend()->setAlignment(Qt::AlignBottom);piechart->setTitle("位标器完成比例");// piechartView->chart()->legend()->hide();piechart->setFont(QFont("Arial", 6));piechartView->chart()->setTheme(QChart::ChartThemeBlueCerulean);piechartView->resize(ui->gview->size());piechartView->show();}MainWindow::~MainWindow(){delete ui;}

实现效果：

2 Item Widget控件的简单使用

2.1 Tree Widget的基本操作

tree widget的操作包括设计条目和内容等其他操作

创建各个等级的栏目的顺序

注意创建子列表的操作

其他操作包括：对字体颜色修改、折叠或者展开状态

1、在Qt designer界面设计tree widget并命名

2、在界面的.h文件中添加tree widget的类

3、在界面的.cpp文件中对其进行操作

1、在界面中设计tree widget 其中变量名为treew

2、在.h文件中添加#include <QTreeWidgetItem>，只需要添加头文件即可

3、在.cpp文件对tree widget进行操作

#include "mainwindow.h"#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow){ui->setupUi(this);// 代码在此后面添加// 创建treewidget显示层级关系和文本数据的表头和框架// 1、对树状条进行连接，设置标签列的名称ui->treew->setHeaderLabels(QStringList()<<"第一列"<<"第二列"<<"第三列"<<"第四列");ui->treew->setSelectionMode(QAbstractItemView::ExtendedSelection);// 2、设置列宽ui->treew->setColumnWidth(0, 300);ui->treew->setColumnWidth(1, 100);ui->treew->setColumnWidth(2, 100);ui->treew->setColumnWidth(3, 100);// 3.1、创建1级下拉栏QTreeWidgetItem* item_0=new QTreeWidgetItem(QStringList()<<"我是一级下拉栏");ui->treew->addTopLevelItem(item_0);// 3.2、创建2级目录，并添加到1级栏的子栏QTreeWidgetItem* item_1 = new QTreeWidgetItem(QStringList()<<"我是二级下拉栏");item_0->addChild(item_1);// 3.3、创建3级目录QTreeWidgetItem* item_2 = new QTreeWidgetItem(QStringList()<<"我是三级栏目");item_1->addChild(item_2);// 3.4、创建4级目录QTreeWidgetItem* item_3 = new QTreeWidgetItem(QStringList()<<"我是四级栏目");item_2->addChild(item_3);// Tips:小技巧，将控件添加进容器，方便后续循环设置行列值QVector<QTreeWidgetItem*> item_list = {item_0,item_1,item_2,item_3};// 4、更新treewidget各个栏上的数值，值得注意的是setdata(列，行，数据)，对于某一行的数据，默认行都是0// 即本例中i表示行，setData的1,2,3表示列，第0列被栏目名称占据// 设置字体颜色为红色，即rgb为255,0,0for(int i = 0; i < 4; ++i){item_list[i]->setData(1,0,QVariant(i));item_list[i]->setTextColor(1,QColor(255, 0, 0));item_list[i]->setData(2,0,QVariant(i+1));item_list[i]->setTextColor(2,QColor(255, 0, 0));item_list[i]->setData(3,0,QVariant(i+2));item_list[i]->setTextColor(3,QColor(255, 0, 0));}// 5、将treewidget展开ui->treew->expandAll();}MainWindow::~MainWindow(){delete ui;}

4、最后实现效果如下所示

2.2 Table Widget的基本操作

table widget的操作包括设计条目和内容等其他操作

创建列表对象的操作

其实列表可以作为输入传入系统

其他操作包括：对字体颜色修改、默认适应行列高度等

1、在Qt designer界面设计table widget并命名

2、在界面的.h文件中添加QTableWidgetItem的类

3、在界面的.cpp文件中对其进行操作

1、在界面中设计table widget 其中变量名为tbw

2、在.h文件中添加#include <QTableWidgetItem>，只需要添加头文件即可

3、在.cpp文件对tree widget进行操作

#include "mainwindow.h"#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow){ui->setupUi(this);// 代码在此后面添加// 1、设置列表表头行和内容，默认是n*4的表格ui->tbw->setColumnCount(4);ui->tbw->setHorizontalHeaderLabels(QStringList()<<"第一列"<<"第二列"<<"第三列"<<"第四列");// 2、表头默认适应窗口ui->tbw->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);ui->tbw->verticalHeader()->setVisible(false);// 3、设置行的数量为10行ui->tbw->setRowCount(10);// 4.1、更新行上的内容,行数10for(int i = 0; i < 10; ++i){// 4.2、更新每列内容，共有4列for(int j = 0; j < 4; ++j){// 4.3、新建table的item，构造函数new里赋值,即设计了表格的内容QTableWidgetItem* temp_item = new QTableWidgetItem(QString::number(i)+","+QString::number(j));// 4.4、将子项item按照行列位置的关系添加到widget里ui->tbw->setItem(i,j,temp_item);// 4.5、主题设置，包括纯色背景设置字体颜色，居中显示temp_item->setTextColor(QColor(255, 0, 0));ui->tbw->item(i,j)->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);}}}MainWindow::~MainWindow(){delete ui;}