QT基础入门——界面布局和常用控件（四）

前言：

所谓 GUI 界面，归根结底，就是一堆组件的叠加。我们创建一个窗口，把按钮放上面，把图标放上面，这样就成了一个界面。在放置时，组件的位置尤其重要。我们必须要指定组件放在哪里，以便窗口能够按照我们需要的方式进行渲染。这就涉及到组件定位的机制。Qt为我们应用程序界面开发提供的一系列的控件，下面我们介绍一下界面布局和最常用一些控件，所有控件的使用方法我们都可以通过帮助文档获取。

一、布局管理器

1.系统提供的布局控件

一、布局管理器

1.系统提供的布局控件

这4个为系统给我们提供的布局的控件，但是使用起来不是非常的灵活

2.利用widget做布局

第二种布局方式是利用控件里的widget来做布局，在Containers中

在widget中的控件可以进行水平、垂直、栅格布局等操作，比较灵活。

默认窗口和控件之间有9间隙,可以调整layoutLeftMargine

利用弹簧进行布局控制：

再布局的同时我们需要灵活运用弹簧的特性让我们的布局更加的美观，下面是一个登陆窗口，利用widget可以搭建出如下登陆界面：

二、常用控件

1.按钮组

(1) QpushButton: 常用按钮

(2) QToolButton: 工具按钮用于显示图片，如图想显示文字

修改风格: toolButtonstyle ,凸起风格autoRaise

(3) radioButton: 单选按钮，设置默认 u->rBtnMan->setChecked(true);


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
 
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    //设置单选按钮   男默认选中
    ui->rBtnMan->setChecked(true);
    connect(ui->rBtnWoman,&QRadioButton::clicked,[=](){
        qDebug() << "选中了女的";
    });
 
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

(4) checkbox: 多选按钮，监听状态，2选中 1当选 0未选中


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
 
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    //多选按钮  2是选中，0是未选中
    connect(ui->cBox,&QCheckBox::stateChanged,[=](int state){
       qDebug() << state;
    });
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

2. ListWidget列表容器

QListWidgetItem * item 一行内容
可以利用addItems一次性添加整个诗内容
设置居中方式item->setTextAlignment(Qt::AlignHCenter);
ui->listWidget ->addItem ( item )


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
#include 
 
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    //利用listWidget写诗
    QListWidgetItem * item = new  QListWidgetItem("锄禾日当午");
    //将一行诗放到listWidget控件中
    ui->listWidget->addItem(item);
    item->setTextAlignment(Qt::AlignHCenter);
 
}
 
MainWindow::~MainWindow()
{
    delete ui;
}


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
#include 
 
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    //QList
    QStringList list;
    list << "锄禾日当午" << "旱地和下土" << "谁知盘中餐" << "粒粒皆辛苦";
    ui->listWidget->addItems(list);
 
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

3.QTreeWidget树控件

（1）设置头：

ui->treeWidget->setHeaderLabels(QStringList()<< "英雄"<< "英雄介绍");

（2）创建根节点：

QTreeWidgetItem * liItem = new QTreeWidgetItem(QStringList()<< "力量");

（3）添加根节点到树控上：

ui->treeWidget->addTopLevelItem(liItem);

（4）添加子节点：

liItem->addChild(l1);


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
 
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    //treeWidget树控件使用
 
    //设置水平头
    ui->treeWidget->setHeaderLabels(QStringList() << "英雄" << "英雄介绍");
 
    QTreeWidgetItem * liItem = new QTreeWidgetItem(QStringList() << "力量");
    QTreeWidgetItem * minItem = new QTreeWidgetItem(QStringList() << "敏捷");
    QTreeWidgetItem * zhiItem = new QTreeWidgetItem(QStringList() << "智力");
    //加载顶层的节点
    ui->treeWidget->addTopLevelItem(liItem);
    ui->treeWidget->addTopLevelItem(minItem);
    ui->treeWidget->addTopLevelItem(zhiItem);
 
    //追加子节点
    QStringList heroL1;
    heroL1 << "刚被猪" << "前排坦克，能在吸收伤害的同时造成可观的范围输出";
    QTreeWidgetItem * l1 = new QTreeWidgetItem(heroL1);
    liItem->addChild(l1);
 
    QStringList heroL2;
    heroL2 << "船长" << "前排坦克，能肉能输出能控场的全能英雄";
    QTreeWidgetItem * l2 = new QTreeWidgetItem(heroL2);
    liItem->addChild(l2);
 
    QStringList heroM1;
    heroM1 << "月骑" << "中排物理输出，可以使用分裂利刃攻击多个目标";
    QTreeWidgetItem * M1 = new QTreeWidgetItem(heroM1);
    minItem->addChild(M1);
 
    QStringList heroM2;
     heroM2 << "小鱼人" << "前排战士，擅长偷取敌人的属性来增强自身战力";
    QTreeWidgetItem * M2 = new QTreeWidgetItem(heroM2);
    minItem->addChild(M2);
 
    QStringList heroZ1;
    heroZ1 << "死灵法师" << "前排法师坦克，魔法抗性较高，拥有治疗技能";
    QTreeWidgetItem * Z1 = new QTreeWidgetItem(heroZ1);
    zhiItem->addChild(Z1);
 
    QStringList heroZ2;
    heroZ2 << "巫医" << "后排辅助法师，可以使用奇特的巫术诅咒敌人与治疗队友";
    QTreeWidgetItem * Z2 = new QTreeWidgetItem(heroZ2);
    zhiItem->addChild(Z2);
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

4.QTableWidget 表格控件

（1）设置列数：

ui->tableWidget->setColumnCount(3);

（2）设置水平表头：

ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<< "性别"<< "年龄");

（3）设置行数：

ui->tableWidget->setRowCount(5);

（4）设置正文：

ui->tableWidget->setItem(0,0, new QTableWidgetItem("亚瑟"));


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
 
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    //tableWidget表格控件使用
    //设置列数
    ui->tableWidget->setColumnCount(3);
    //设置水平表头
    ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<< "性别"<< "年龄");
    //设置行数
    ui->tableWidget->setRowCount(5);
    //设置正文
//    ui->tableWidget->setItem(0,0, new QTableWidgetItem("亚瑟"));
//    ui->tableWidget->setItem(0,1, new QTableWidgetItem("男"));
//    ui->tableWidget->setItem(0,2, new QTableWidgetItem("18"));
    QStringList nameList;
    nameList << "亚瑟" << "赵云" << "张飞" << "关羽" << "花木兰";
    QList sexList;
    sexList << "男" << "男" << "男" << "男" << "女";
 
    //QList等价于QStringList
    for(int i = 0;i < 5;i++)
    {
        int col = 0;
        ui->tableWidget->setItem(i,col++, new QTableWidgetItem(nameList[i]));
        ui->tableWidget->setItem(i,col++, new QTableWidgetItem(sexList.at(i)));
        //int 转QString
        ui->tableWidget->setItem(i,col++, new QTableWidgetItem(QString::number(i+18)));
 
    }
 
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

5.其他控件

（1）stackedWidget 栈控件

ui->stackedWidget->setCurrentIndex(1);


#include "widget.h"
#include "ui_widget.h"
#include 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
 
    //栈控件使用
 
    //设置默认定位页面
    ui->stackedWidget->setCurrentIndex(0);
 
    //btn1按钮
    connect(ui->btn1,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(1);
    });
    //btn2按钮
    connect(ui->btn2,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(2);
    });
    //btn3按钮
    connect(ui->btn3,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(0);
    });
 
}
 
Widget::~Widget()
{
    delete ui;
}

（2）下拉框

ui->comboBox->addItem("奔驰");


#include "widget.h"
#include "ui_widget.h"
#include 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
 
    //下拉框
    ui->comboBox->addItem("奔驰");
    ui->comboBox->addItem("宝马");
    ui->comboBox->addItem("拖拉机");
 
    //点击按钮  选中宝马
    connect(ui->btnt,&QPushButton::clicked,[=](){
        //ui->comboBox->setCurrentIndex(2);
        ui->comboBox->setCurrentText("宝马");
    });
 
}
 
Widget::~Widget()
{
    delete ui;
}

（3）QLabel 显示图片

ui->lbl_Image->setPixmap(QPixmap(":/Image/butterfly.png"))


#include "widget.h"
#include "ui_widget.h"
#include 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
 
 
    //利用QLabel显示图片
    ui->lbl_image->setPixmap(QPixmap(":/Image/butterfly.png"));
 
}
 
Widget::~Widget()
{
    delete ui;
}

（4）QLabel显示动图gif图片

ui->lbl_movie->setMovie(movie);

movie->start();


#include "widget.h"
#include "ui_widget.h"
#include 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
 
 
    //利用QLabel显示动态图片
    QMovie * movie = new QMovie(":/Image/mario.gif");
    ui->lbl_movie->setMovie(movie);
    //播放动图
    movie->start();
}
 
Widget::~Widget()
{
    delete ui;
}

（5）完整代码


#include "widget.h"
#include "ui_widget.h"
#include 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
 
    //栈控件使用
 
    //设置默认定位页面
    ui->stackedWidget->setCurrentIndex(0);
 
    //btn1按钮
    connect(ui->btn1,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(1);
    });
    //btn2按钮
    connect(ui->btn2,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(2);
    });
    //btn3按钮
    connect(ui->btn3,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(0);
    });
 
    //下拉框
    ui->comboBox->addItem("奔驰");
    ui->comboBox->addItem("宝马");
    ui->comboBox->addItem("拖拉机");
 
    //点击按钮  选中宝马
    connect(ui->btnt,&QPushButton::clicked,[=](){
        //ui->comboBox->setCurrentIndex(2);
        ui->comboBox->setCurrentText("宝马");
    });
 
    //利用QLabel显示图片
    ui->lbl_image->setPixmap(QPixmap(":/Image/butterfly.png"));
 
    //利用QLabel显示动态图片
    QMovie * movie = new QMovie(":/Image/mario.gif");
    ui->lbl_movie->setMovie(movie);
    //播放动图
    movie->start();
}
 
Widget::~Widget()
{
    delete ui;
}

三、自定义控件

在搭建Qt窗口界面的时候，在一个项目中很多窗口，或者是窗口中的某个模块会被经常性的重复使用。一般遇到这种情况我们都会将这个窗口或者模块拿出来做成一个独立的窗口类，以备以后重复使用。

在使用Qt的ui文件搭建界面的时候，工具栏栏中只为我们提供了标准的窗口控件，如果我们想使用自定义控件怎么办？

我们从QWidget派生出一个类SmallWidget，实现了一个自定窗口

1.samllWidget.h

提供 getNum 和 setNum对外接口


#ifndef SAMLLWIDGET_H
#define SAMLLWIDGET_H
 
#include 
 
namespace Ui {
class samllWidget;
}
 
class samllWidget : public QWidget
{
    Q_OBJECT
 
public:
    explicit samllWidget(QWidget *parent = nullptr);
    ~samllWidget();
 
    //设置数字
    void setNum(int num);
    //获取数字
    int getNum();
 
private:
    Ui::samllWidget *ui;
};
 
#endif // SAMLLWIDGET_H

2.samllWidget.cpp

实现功能，改变数字，滑动条跟着移动，信号槽监听


#include "samllwidget.h"
#include "ui_samllwidget.h"
 
samllWidget::samllWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::samllWidget)
{
    ui->setupUi(this);
    //QSpinBox移动   QSlider跟着移动
    void(QSpinBox:: * spSignal)(int) = &QSpinBox::valueChanged;
    connect(ui->spinBox,spSignal,ui->horizontalSlider,&QSlider::setValue);
 
    // QSlider滑动   QSpinBox数字跟着改变
    connect(ui->horizontalSlider,&QSlider::valueChanged,ui->spinBox,&QSpinBox::setValue);
}
 
//设置数字
void samllWidget::setNum(int num)
{
    ui->spinBox->setValue(num);
}
//获取数字
int samllWidget::getNum()
{
    return ui->spinBox->value();
}
 
samllWidget::~samllWidget()
{
    delete ui;
}

3.samllWidget.ui

.ui中设计 QSpinBox和QSlider 两个控件

Widget中使用自定义控件，拖拽一个Widget，点击提升为，点击添加，点击提升

弹出提升窗口部件对话框

添加要提升的类的名字,然后选择添加

添加之后,类名会显示到上边的列表框中,然后单击提升按钮,完成操作.

我们可以看到, 这个窗口对应的类从原来的QWidget变成了SmallWidget

再次运行程序,这个widget_3中就能显示出我们自定义的窗口了.

相关阅读:
网页排版和代码优化，求带我看看代码
 R语言——条形图数据可视化的多种方式
 PMP课程笔记：第13章项目相关方管理
 性能优化篇(二) 静态合批步骤与所有注意事项\游戏运行时使用代码启动静态合批
 【重识云原生】第六章容器6.1.8节——Docker核心技术UnionFS
建设网站制作公司的选择标准是什么？
K8S集群进行分布式负载测试
 Bean 作用域和生命周期
 网络请求urllib库使用总结
 场效应管Mosfet之雷卯Leiditech对应英飞凌Infineon
原文地址：https://blog.csdn.net/m0_63168877/article/details/133634525