Qt-C++基础界面开发（2- 简单Display Widget控件和Item Widget控件的使用）

最新推荐文章于 2024-04-30 16:48:07 发布
最新推荐文章于 2024-04-30 16:48:07 发布
阅读量830 收藏 9
点赞数 2
分类专栏： C++基础 文章标签： qt c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42727752/article/details/124577301
版权

Qt-C++基础界面开发

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);
    // 代码在此后面添加
    // 默认大类为QTextBrowser
    ui->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       += charts
QT       += 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_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    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，蓝色是产品2
    chart->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，蓝色是产品2
    chart->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,0
    for(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、更新行上的内容,行数10
    for(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;
}

在这里插入图片描述

爬楼的猪
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Qt 设计师-Qt Designer基础控件介绍
奇树谦的博客
03-05 1万+
Layouts: Vertical Layout:垂直布局 Horizontal Layout:水平布局 Gird Layout:栅格布局 FormLayout:表单布局 关于布局有很多博客写的很好就不再赘述了，本人常用Qt Designer Widget控件然后添加垂直和水平布局非常方便快捷易于管理。 Spacers: Horizontal Spacer:水平弹簧 Vertical Spacer：垂直弹簧 Buttons: Push Button:常用按钮 双击可修改
qt5 显示组控件 Display Widgets
zhenge4636的博客
04-23 754
可以使用setText()方法将HTML字符串设置到Text Browser中，并使用append()方法在现有文本的末尾添加新的HTML字符串。可以使用find()方法查找指定的文本，并使用highlighted()信号高亮显示匹配项。setSegmentStyle(QLCDNumber::SegmentStyle style)：设置LCD的数字样式，包括圆角、直角、填充等。setOrientation(Qt::Orientation orientation)：设置进度条的方向，可以是水平或垂直方向。
QT中样式表常见属性与颜色的设置与应用
大脑曝光
11-23 2533
要获取QCheckBox控件的样式表（QSS）中设置的颜色，你可以使用QCheckBox对象的styleSheet()函数获取当前应用于它的样式表。然后，你可以解析样式表字符串以提取所需的颜色信息。在Qt中，可以使用颜色来设置样式表（QSS）中的各种元素的外观。在示例中，我们检查样式表中包含"color:"、"background-color:"或"border-color:"的项，并提取冒号后面的值作为颜色值。在Qt中的样式表（QSS）中，有一些特定的英文单词和关键字用于指定不同的样式属性。
显示控件组（Display Widgets）
雨中山草
06-08 2015
 Label：标签。  Text Browser：文本浏览器。  Graphics View：图形视图。  Calendar：日历。  LCD Number：液晶数字。  Progress Bar：进度条。  Horizontal Line：水平线。  Vertical Line：垂直线。  Open GL Widget：开放式图形库工具。  QQuickWid
DisplayWidget详解
习惯有你
02-10 814
Label QLabel是qt最简单的控件之一，他的典型功能就是显示文字，实际上QLabel还有些不一样的地方，他支持超链接，当我们将label设置为超链接文本，在我们点击字符时就可以实现跳转到网页，超链接支持2种方式。 直接跳转 超链接显示设置：setText("<a href = 'https://zhulaoshi.taobao.com/'>朱老师淘宝店</a>")，格式是固定的，绿色部分位链接网址，黄色部分为在label显示的字符。 允...
QLabel 类
lilanfeng1999的专栏
11-05 1645
QLabel 类代表标签，它是一个用于显示文本或图像的窗口部件。                  构造         QLabel 类支持以下构造函数： [plain] view plaincopy QLabel(QWidget *parent = 0, Qt::WindowFlags f = 0);   QLabel(c
Qt学习笔记9：控件的对齐方式（靠左对齐、靠右对齐、居中对齐、垂直靠上对齐）
热门推荐
Leo的博客
09-04 3万+
Qt组件的集中对齐方式 Qt::AlignLeft //水平方向靠左。 Qt::AlignRight //水平方向靠右。 Qt::AlignHCenter //水平方向居中。 Qt::AlignTop //垂直方向靠上。 设置方法 ui.widget->layout()->setAlignment(Qt::AlignLeft); AlignLeft 水平靠左 AlignRight 水平靠右 AlignTop 垂直靠上 ...
QT：控件精讲（六）显示组件DisplayWidgets
通哈膨胀哈哈哈 的博客
12-11 8025
    Qt Creator有10种DisplayWidgets，如下图：     控件类     控件名     中文名     控件类     控件名     中文名     QLabel     Label     标签     QLCDNumber     LCDNumber     LCD数字显示框     QTextBrowser     TextBrowser     文本浏览器...
Qt之显示部件的理解使用与样式优化
linyibin_123的博客
09-09 1939
qt对显示部件（QTextBrowser、GraphicsView、QCalendarWidget、QLCDNumber、QProgressBar、Line、QOpenGLWid、QQuickWidget）的理解使用与样式优化，提供工程下载
Qt6教程之二(8) Display Widgets
世界需要程序员，而我就是其中一员！
02-26 1201
本篇文章主要介绍Qt的显示控件基础使用！
QT-C++注册机，注册码生成
07-13
1、QT-C++注册机，注册码生成 2、支持指定时间生效 3、注册吗写入注册表 4、独立分装，拿来就用 5、vs+qt5.12.0编译环境。
QT widget控件自适应窗口大小，修改比例
04-22
QT widget控件自适应窗口大小，修改比例
C++,QT多个窗体切换，widget 多个页面切换显示
09-11
C++,QT多个窗体切换，widget,QTimer 3个页面切换跳转，使用wdiget的方式
基于Qt和C++实现的电池电量控件+源码（期末大作业&课设&项目开发）
03-28
基于Qt和C++实现的电池电量控件+源码，适合期末大作业、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ * 电池电量控件 * 1. 可设置电池电量，动态切换电池电量变化。 * 2. ...
基于Qt和C++实现的面板容器控件和图形字体示例+源码
04-05
基于Qt和C++实现的面板容器控件和图形字体示例+源码 基于Qt和C++实现的面板容器控件和图形字体示例+源码 基于Qt和C++实现的面板容器控件和图形字体示例+源码 基于Qt和C++实现的面板容器控件和图形字体示例+源码 ...
Qt | 标准、复选、单选、工具、命令按钮大全
m0_45463480的博客
04-28 254
Qt | 标准、复选、单选、工具、命令按钮大全
【Qt】信号与槽
最新发布
m0_66599463的博客
04-30 1141
1、信号和槽的概述 1.1 信号的本质 1.2 槽的本质 2、信号和槽的使用 2.1 连接信号的槽 click和clicked 2.2 第二种自定义创建槽函数的方式 3、自定义信号和槽 3.1 ⾃定义信号函数书写规范 3.2 带参数得槽和函数 4、信号与槽的连接方式 4.1 一对一 4.2 一对多 4.3 多对一 5、信号和槽的其他说明 5.1 信号与槽的断开 5.2 Qt4 版本信号与槽的连接 5.3 使⽤ Lambda 表达式定义槽函数 5.4 信号与槽的优缺点
Qt QThreadPool线程池
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
04-29 582
QThreadPool类管理一个QThread集合。QThreadPool管理和重新设计单个QThread对象，以帮助降低使用线程的程序中的线程创建成本。每个Qt应用程序都有一个全局QThreadPool对象，可以通过调用globalInstance来访问该对象。要使用其中一个QThreadPool线程，请子类化QRunnable并实现run虚拟函数。然后创建该类的一个对象，并将其传递给QThreadPool::start。线程复用：线程池中的线程可以重复使用，减少了线程创建和销毁的开销。
使用QT完成如图的游戏登录界面 使用信号和槽完成密文明文密码转换，重置账号和密码，登录校验 详细代码在主页下载
m0_67469586的博客
04-29 841
this->accline->setPlaceholderText("请输入账号...");this->pwdswitchbtn=new QPushButton("密文",this);//点击"密文"按钮时，按钮本身的文字变为“明文”，QLineEdit 中的内容也变为明文;this->pwdline->setPlaceholderText("请输入密码");this->pwdswitchbtn->setText("明文");this->pwdswitchbtn->setText("密文");
qt 如何使用openglwidget控件显示tif图像
07-14
在Qt中使用OpenGLWidget控件显示.tif图像，你可以按照以下步骤进行操作： 1. 确保你的项目已经包含了OpenGL模块。在Qt项目的.pro文件中添加以下行： ``` QT += opengl ``` 2. 创建一个自定义的OpenGLWidget...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值