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

news2024/12/23 6:34:56

前言:

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

目录

一、布局管理器

1.系统提供的布局控件

2.利用widget做布局

 二、常用控件

1.按钮组

2. ListWidget列表容器

 3.QTreeWidget树控件

(1)设置头:

(2)创建根节点:

(3)添加根节点到树控上:

(4)添加子节点:

4.QTableWidget 表格控件

(1)设置列数:

(2)设置水平表头:

(3)设置行数:

(4)设置正文:

5.其他控件 

(1)stackedWidget  栈控件

(2)下拉框   

(3)QLabel 显示图片

(4)QLabel显示动图gif图片

(5)完整代码 


一、布局管理器

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 <QDebug>


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 <QDebug>


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列表容器

  1. QListWidgetItem * item 一行内容
  2. 可以利用addItems一次性添加整个诗内容
  3. 设置居中方式item->setTextAlignment(Qt::AlignHCenter);
  4. ui->listWidget ->addItem ( item )
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QListWidgetItem>
#include <QDebug>


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 <QListWidgetItem>
#include <QDebug>


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //QList<QString>
    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 <QDebug>


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 <QDebug>


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<QString> sexList;
    sexList << "男" << "男" << "男" << "男" << "女";

    //QList<QString>等价于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 <QMovie>
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 <QMovie>
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 <QMovie>
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 <QMovie>
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 <QMovie>
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 <QWidget>

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中就能显示出我们自定义的窗口了.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1066924.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023-IDEA插件推荐

CamelCase 链接 https://plugins.jetbrains.com/plugin/7160-camelcase https://github.com/netnexus/camelcaseplugin 介绍 提供下划线、驼峰等代码风格的切换。快捷键是⇧ ⌥ U / Shift Alt U GsonFormatPlus 链接 https://plugins.jetbrains.com/plugin/14949-gs…

比较好用的在线项目管理系统推荐

好的项目管理系统首先要能满足你在管理项目中的要求&#xff0c;不同的团队规模、不同的项目对项目管理的要求都是不一样的。其次&#xff0c;引入项目管理系统的本身是为了提高管理和协作的效率&#xff0c;因此工具应该是要简单易用的&#xff0c;很多企业引入工具之后形同虚…

十、pygame小游戏开发

目录 一、安装pygame二、pygame快速入门2.1 坐标系认识2.2 创建游戏主窗口2.3 实现图像绘制2.4 游戏循环和游戏时钟2.5 简单动画实现的实现2.6 监听事件2.7 精灵和精灵组三、游戏框架搭建3.1 实现飞机大战主游戏类3.2 完成游戏初始化部分3.3 使用常量代替固定的数值3.4 完成游戏…

VulnHub BREAKOUT

一、信息收集 1.端口扫描 nmap -sS -A 192.168.103.178.24发现开发了80、10000、20000 以及有smb协议 2.查看80端口 右击查看源代码&#xff0c;发现尾部有个密文加密 一看就是 Brainfuck/Ook! 加密&#xff0c;解得&#xff1a;.2uqPEfj3D<Pa-3 3.查看10000端口 是个登…

项目需求分析5大常见问题及解决方案

需求分析过程中&#xff0c;往往容易导致需求不准确和不完整&#xff0c;引起需求频繁变更&#xff0c;导致项目进度延误和成本增加&#xff1b;而需求分析的误解问题&#xff0c;导致交付产品无法满足客户期待&#xff0c;降低用户满意度和资源浪费。 那么在需求分析中&#x…

buuctf-[WUSTCTF2020]CV Maker 文件上传漏洞

打开环境 随便登录注册一下 进入到了profile.php 其他没有什么页面&#xff0c;只能更换头像上传文件&#xff0c;所以猜测是文件上传漏洞 上传一句话木马看看 <?php eval($_POST[a]);?>回显 搜索一下 添加文件头GIF89a。上传php文件 查看页面源代码&#xff0c;看…

使用python利用merge+sort函数对excel进行连接并排序

好久没更新了&#xff0c;天天玩短视频了。现在发现找点学习资料真的好难。 10.1期间偶然拿到一本书 本书是2022年出版的&#xff0c;看了一下不错&#xff0c;根据上面的案例结合&#xff0c;公司经营整合案例&#xff0c;分享一下。 数据内容来源于书中内容&#xff0c;仅供…

Dubbo3应用开发—Dubbo3注册中心(zookeeper、nacos、consul)的使用

Dubbo3注册中心的使用 zookeeper注册中心的使用 依赖引入 <dependency><groupId>org.apache.dubbo</groupId><artifactId>dubbo-dependencies-zookeeper-curator5</artifactId><version>${dubbo.version}</version><type>p…

MySQL Cluster

文章目录 1.简介2.组成参考文献 1.简介 MySQL Cluster 是官方推出的基于 NDB&#xff08;Network DataBase&#xff09;存储引擎的高可用和可伸缩的分布式数据库系统。 以下是 MySQL NDB Cluster 的主要特点和能力&#xff1a; 高可用&#xff1a;MySQL Cluster 具有内置的高…

python+selenium实现UI自动化(入门篇)

一、基础准备。 python环境安装&#xff0c;参考&#xff1a;CSDN pycharm安装&#xff0c;参考&#xff1a;CSDN 谷歌浏览器驱动配置&#xff0c;参考&#xff1a;CSDN二、新建pycharm项目 截图中&#xff0c;上面是项目地址&#xff08;可以提前在指定位置创建文件夹&#xf…

TenDB Cluster 简介

文章目录 1.简介2.TSpider3.TenDB4.Tdbctl5.TenDB Cluster Operator参考文献 1.简介 TenDB Cluster 是腾讯游戏 CROS DBA 团队提供的 MySQL 分布式关系型数据库解决方案。主要特点包括&#xff1a;透明分库分表、高可用的 MySQL 集群服务&#xff0c;透明及在线的扩容及缩容&a…

AI绘画-Stable Diffusion笔记

软件&#xff1a;Stable Diffusion 视频教程来自 https://www.bilibili.com/video/BV1As4y127HW/?spm_id_from333.337.search-card.all.click 提示词 提示词类别 内容型提示词 人物主题特征&#xff1a; 服饰穿搭&#xff1a;white dress 发型发色&#xff1a;blonde hair,l…

Docker 安装 MongoDB

一、什么是MongoDB MongoDB 是一个基于分布式文件存储的数据库。是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。 二、MongoDB的安装 这里使用docker来安装MongoD 1.docker 拉取mysql镜像 docker pu…

基于SSM+Vue的物流管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;VueHTML 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 …

Notepad++提取含有特定字符串的行

ctrl M快捷键&#xff0c;进入"标记" 页面 标记所在行–循环查找-- 正则表达式 – 输入关键字 – 全部标记 – Copy Marked Text 关键字格式如下&#xff1a; .*关键字.*ctrl v&#xff0c;粘贴即可。

vue模版语法-{{}}/v-text/v-html/v-once

一、{{}}双括号&#xff1a;用于文本渲染 1、 {{变量名}}:data中返回对象的变量名 2、{{js表达式}}:可以直接进行js表达式处理 3、注意&#xff1a;双大括号中不要写等式书写 二、v-text 指令&#xff0c;用于文本渲染 1、为了解决双大括号渲染数据出现闪烁问题 三、v-cloak …

Mysql bin-log日志恢复数据与物理备份-xtrabackup

主打一个数据备份与恢复 binlog与xtarbackup bin-log日志恢复开启bin-log配置bin-log日志恢复 物理备份-xtrabackup三种备份方式安装xtrabackup备份全量备份增量备份差异备份 bin-log日志恢复 bin-log 日志&#xff0c;就记录对数据库进行的操作&#xff0c;什么增删改的操作全…

uniapp webview和H5通信的三种方式

uniapp可以打包成多个端&#xff0c;再和H5通信的方式中&#xff0c;涉及到uniapp和H5通信&#xff0c;APP和H5通信&#xff0c;小程序和H5通信。其中的h5端分为非uniapp打包的h5和uniapp打包的h5,这两者的区别其实就是uniapp的h5里面已经有了uni这个定义&#xff0c;所以不能再…

【零基础算法】链表算法

链表算法 这次带来的是有关于链表题的相应训练&#xff0c;对应的数据结构较为基础&#xff0c;大家可以自行去了解&#xff0c;或者等后面博主有空复习时重新写一篇博客&#xff0c;今天就暂时直接开始算法吧&#xff01; 这次将围绕以下几个方面来进行链表算法的练习&#…

2020架构真题(四十六)

、以下关于操作系统微内核架构特征的说法&#xff0c;不正确的是&#xff08;&#xff09;。 微内核的系统结构清晰&#xff0c;利于协作开发微内核代码量少&#xff0c;系统具有良好的可移植性微内核有良好的的伸缩性和扩展性微内核功能代码可以互相调用&#xff0c;性能很高…