【第8章：常用控件】

已于 2022-09-27 09:36:35 修改
阅读量170 收藏
点赞数 1
分类专栏： QT学习&开发 文章标签： qt5 c++ ui QT学习
于 2022-09-25 22:35:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45986997/article/details/127044549
版权

CSDN话题挑战赛第2期
参赛话题：Qt应用程序开发

文章目录

8 常用控件

Qt为我们应用程序界面开发提供的一系列的控件，下面我们介绍两种最常用一些控件，所有控件的使用方法我们都可以通过帮助文档获取。

8.1 QLabel 控件使用

QLabel是我们最常用的控件之一，其功能很强大，我们可以用来显示文本，图片和动画等。

1、显示文字（普通文本、html）

通过QLabel类的setText函数设置显示的内容:

void setText(const QString &)

  • 可以显示普通文本字符串

QLable *label = new QLable;

label->setText(“Hello, World!”);

  • 可以显示HTML格式的字符串

    比如显示一个链接：

QLabel * label = new QLabel(this);

label ->setText(“Hello, World”);

label ->setText(“

<a href=“https://www.baidu.com”>百度一下

”);

label ->setOpenExternalLinks(true);

其中setOpenExternalLinks()函数是用来设置用户点击链接之后是否自动打开链接，如果参数指定为true则会自动打开。

2、显示动画

可以使用QLabel 的成员函数setMovie加载动画，可以播放gif格式的文件

void setMovie(QMovie * movie)

首先定义QMovied对象，并初始化:

QMovie *movie = new QMovie(“:/Mario.gif”);

播放加载的动画：

movie->start();

将动画设置到QLabel中：

QLabel *label = new QLabel；

label->setMovie(movie);

8.2 QLineEdit

Qt提供的单行文本编辑框。

1、设置/获取内容

  • 获取编辑框内容使用text（），函数声明如下：

QString text() const

  • 设置编辑框内容

void setText(const QString &)

2、设置显示模式

使用QLineEdit类的setEchoMode () 函数设置文本的显示模式,函数声明:

void setEchoMode(EchoMode mode)

EchoMode是一个枚举类型,一共定义了四种显示模式:

  • QLineEdit::Normal 模式显示方式，按照输入的内容显示。

  • QLineEdit::NoEcho 不显示任何内容，此模式下无法看到用户的输入。

  • QLineEdit::Password 密码模式，输入的字符会根据平台转换为特殊字符。

  • QLineEdit::PasswordEchoOnEdit 编辑时显示字符否则显示字符作为密码。

另外，我们再使用QLineEdit显示文本的时候，希望在左侧留出一段空白的区域，那么，就可以使用QLineEdit给我们提供的setTextMargins函数：

void setTextMargins(int left, int top, int right, int bottom)

用此函数可以指定显示的文本与输入框上下左右边界的间隔的像素数。

8.3 其他控件

Qt中控件的使用方法可参考Qt提供的帮助文档。

项目名称：08_OtherControl

在这里插入图片描述

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include<QMovie>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置默认值

    //栈控件使用
    //scrollArea按键
    connect(ui->btn_scrollArea,&QPushButton::clicked,[=](){
       ui->stackedWidget->setCurrentIndex(2);

    });

    //toolBox按钮
    connect(ui->btn_ToolBox,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(1);
    });

    //TabWidget按钮
    connect(ui->btn_GroupBox,&QPushButton::clicked,[=](){
       ui->stackedWidget->setCurrentIndex(0);
    });

    //下拉框
    ui->comboBox->addItem("奔驰");
    ui->comboBox->addItem("宝马");
    ui->comboBox->addItem("特斯拉");

    //选中特斯拉
    connect(ui->btn_select,&QPushButton::clicked,[=](){
       ui->comboBox->setCurrentIndex(2);
    });

    //利用QLabel显示图片
    ui->lbl_Image->setPixmap(QPixmap(":/Image/butterfly.png"));

    //利用QLabel显示，GIF动态图片
    QMovie *movie = new QMovie(":/Image/mario.gif");
    ui->lbl_movie->setMovie(movie);
    //播放动图
    movie->start();
}

Widget::~Widget()
{
    delete ui;
}

在这里插入图片描述

运行效果图

在这里插入图片描述

8.4 自定义控件

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

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

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

// smallwidget.h
class SmallWidget : public QWidget
{
    Q_OBJECT
public:
    explicit SmallWidget(QWidget *parent = 0);

signals:

public slots:
private:
    QSpinBox* spin;
    QSlider* slider;
};

// smallwidget.cpp
SmallWidget::SmallWidget(QWidget *parent) : QWidget(parent)
{
    spin = new QSpinBox(this);
    slider = new QSlider(Qt::Horizontal, this);

    // 创建布局对象
    QHBoxLayout* layout = new QHBoxLayout;
    // 将控件添加到布局中
    layout->addWidget(spin);
    layout->addWidget(slider);
    // 将布局设置到窗口中
    setLayout(layout);

    // 添加消息响应
    connect(spin, 
static_cast<void (QSpinBox::*)(int)>(&QSpinBox::valueChanged),
 slider, &QSlider::setValue);
    connect(slider, &QSlider::valueChanged, 
spin, &QSpinBox::setValue);
}

在这里插入图片描述

那么这个SmallWidget可以作为独立的窗口显示,也可以作为一个控件来使用：

打开Qt的.ui文件,因为SmallWidget是派生自Qwidget类,所以需要在ui文件中先放入一个QWidget控件, 然后再上边鼠标右键

在这里插入图片描述

弹出提升窗口部件对话框

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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

项目名称：05_Qt_Contral

在这里插入图片描述

mainwindow.cpp

#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()<<"选中女了";
    });

    //多选按钮  选中老板人好后 打印一句话
    //选中返回2 未选中返回0
    connect(ui->cBox,&QCheckBox::stateChanged,[=](int state){
//        qDebug()<<"老板人好";
        qDebug()<<state;
    });
}

MainWindow::~MainWindow()
{
    delete ui;
}

运行效果图：

在这里插入图片描述

2、再添加listWidget组件后

mainwindow.cpp

#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()<<"选中女了";
    });

    //多选按钮  选中老板人好后 打印一句话
    //选中返回2 未选中返回0
    connect(ui->cBox,&QCheckBox::stateChanged,[=](int state){
//        qDebug()<<"老板人好";
        qDebug()<<state;
    });

    //利用listWidget 写诗
//    QListWidgetItem * item = new QListWidgetItem("锄禾日当午");
//    //将一行诗放入到listWidget控件中
//    ui->listWidget->addItem(item);
//    //设置为水平居中
//    item->setTextAlignment(Qt::AlignHCenter);

    //QStringList   QList<QString>
    QStringList list;
    list<<"锄禾日当午"<<"汗滴禾下土"<<"谁知盘中餐"<<"粒粒皆辛苦";
    ui->listWidget->addItems(list);
}

MainWindow::~MainWindow()
{
    delete ui;
}

运行效果图：

在这里插入图片描述

项目名称：06_TreeWidget

widget.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    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,heroL2;
    heroL1<<"刚被猪"<<"前排坦克，能在吸收伤害的同时造成可观的范围输出";
    heroL2<<"船长"<<"前排坦克，能肉能输出能控场的全能英雄";
    QTreeWidgetItem * l1 = new QTreeWidgetItem(heroL1);
    QTreeWidgetItem * l2 = new QTreeWidgetItem(heroL2);
    LiItem->addChild(l1);
    LiItem->addChild(l2);

    QStringList heroM1,heroM2;
    heroM1<<"月骑"<<"中排物理输出，可以使用分裂利刃攻击多个目标";
    heroM2<<"小鱼人"<<"前排战士，擅长偷取敌人的属性来增强自身战力";
    QTreeWidgetItem * m1 = new QTreeWidgetItem(heroM1);
    QTreeWidgetItem * m2 = new QTreeWidgetItem(heroM2);
    MinItem->addChild(m1);
    MinItem->addChild(m2);

    QStringList heroZ1,heroZ2;
    heroZ1<<"死灵法师"<<"前排法师坦克，魔法抗性较高，拥有治疗技能";
    heroZ2<<"巫医"<<"后排辅助法师，可以使用奇特的巫术诅咒敌人与治疗队友";
    QTreeWidgetItem * z1 = new QTreeWidgetItem(heroZ1);
    QTreeWidgetItem * z2 = new QTreeWidgetItem(heroZ2);
    ZhiItem->addChild(z1);
    ZhiItem->addChild(z2);

}

Widget::~Widget()
{
    delete ui;
}

运行效果图：

在这里插入图片描述

项目名称：07_TableWidget

在这里插入图片描述

widget.cpp

#include "widget.h"
#include "ui_widget.h"

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

    //TableWidget 控件
    //设置列数
    ui->tableWidget->setColumnCount(3);
    //设置水平表头
    ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<<"性别"<<"年龄");

    //设置行数
    ui->tableWidget->setRowCount(5);

    //设置正文
//    ui->tableWidget->setItem(0,0,new QTableWidgetItem("亚瑟"));
    QStringList nameList;
    nameList<<"亚瑟"<<"赵云"<<"张飞"<<"关羽"<<"花木兰";

    QStringList sexList;
    sexList<<"男"<<"男"<<"男"<<"男"<<"女";

    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[i]));
        //int  转 QString
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(QString::number((i+18))));
    }
}

Widget::~Widget()
{
    delete ui;
}

运行结果：

在这里插入图片描述

如果对你有帮助的话，请不要忘了给我一点点点…支持 ( ^ o ^)/~

GUET_一路向前
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第8章常用控件
10-16
常用控件
QT5各类控件合集包好常用(QML)
03-18
QT开发的小工具包，包含一些QT GUI开发相关的功能何及，有文本类，计算类，工具类，可以作为学习或者基础进行修改定制；
QT各类控件
razliutos_的博客
07-28 4863
Qt常用组件简介
【Qt】常用控件（QLabel，QLineEdit以及自定义控件）
来日浅谈的博客
09-01 3729
【Qt】常用控件（QLabel，QLineEdit以及自定义控件）1. QLabel1.1 显示文字1.2 显示图片1.3 显示动画2. QLineEdit2.1 设置/获取内容2.2 设置显示模式3.自定义控件 Qt为我们应用程序界面开发提供的一系列的控件，下面我们介绍两种最常用一些控件，所有控件的使用方法我们都可以通过帮助文档获取。 1. QLabel QLabel是我们最常用的控件之一，其功...
【Qt】常用控件
GG_Bruse的博客
03-20 1575
Widget是Qt中的核心概念，英文原义是"小部件"，此处将其翻译为"控件"。控件是构成一个图形化界面的基本要素，如按钮、列表视图、树形视图、单行输入框、多行输入框、滚动条、下拉框等都可以称为"控件"Qt作为一个成熟的GUI开发框架，内置了大量的常用控件。Qt也提供了"自定义控件"的能力，可以在现有控件不能满足需求时，对现有控件做出扩展，或者自定义出新的控件控件体系的发展完全没有控件。此时需要通过一些绘图API手动的绘制出按钮或者输入框等内容，代码编写繁琐。如文曲星的Lava平台开发。
【Qt 学习笔记】Qt控件概述
最新发布
小黄鸭的博客
04-09 1727
（Widget）是指用于图形用户界面（GUI）的可视化元素，通过与用户的交互来显示信息、接收输入或触发操作。控件通常由一个可视化的图标、按钮或者其他视觉元素以及与之相关联的事件处理函数组成。控件可以接受用户的输入，例如按钮可以通过鼠标点击或者键盘操作来触发相关的事件。控件还可以显示信息，例如标签可以显示文本、图像或者其他数据。控件的外观和行为可以通过设置属性或者调用方法来进行定制和修改。常见的控件包括按钮、文本框、标签、下拉菜单、滚动条等。
Qt的开源库TabToolbar
科技芯风
01-18 1845
开源TabToolBar的使用
第5章ASPNET常用服务器控件.pptx
10-12
本章主要介绍四种主要类型的服务器控件：HTML服务器控件、Web服务器控件、验证控件以及用户控件。 1. **服务器控件概述** ASP.NET服务器控件是核心的开发组件，它们可以在服务器端执行操作并在客户端呈现。服务器...
Visual Baisc程序设计第8章常用控件设计.ppt
03-09
【Visual Basic程序设计第8章常用控件设计】 在Visual Basic编程中，控件是构建用户界面的关键元素，本章主要介绍了几个常见的控件及其应用。以下是对这些控件的详细说明： 1. **框架（Frame）** - **功能**：...
VB常用控件的方法详解.pdf
06-01
VB 常用控件的方法详解 VB 是一种高级程序语言，英文名称的全名是"Beginner's All-Purpose Symbolic Instruction Code"，取其首字字母简称"BASIC"，是「适用于初学者的多功能符号指令码」。在计算机发展史上，VB 是...
Visual FoxPro数据库课件：第7-8章 表单及控件的使用2.ppt
05-08
《Visual FoxPro数据库课件：第7-8章 表单及控件的使用2》主要讲解了在Visual FoxPro数据库系统中如何有效地利用表单和控件进行交互设计。以下是对关键知识点的详细阐述： 1. **命令按钮组**： - **ButtonCount**...
基于Qt的第三方库和控件
05-25 5328
来源http://www.newsmth.net/nForum/#!article/KDE_Qt/8108 ======================    基于Qt的第三方库和控件  ======================       libQxt  --------     http://dev.libqxt.org/libqxt/wiki/Home
Qt 常用控件及其信号
每一个不曾起舞的日子，都是对生命的辜负
02-20 2315
窗口类控件容器类控件布局类控件基本控件高级控件QFile是一个文件I/O类，用于读写文件；fileName：文件名；：打开文件以进行读取或写入；close()：关闭文件；readAll()：返回文件的所有数据；：将数据写入文件；实例化QFile并设置fileName属性。
C++ Qt自定义控件QLineEdit，简单
qq_40788199的博客
05-25 2707
Qt自定义控件学习 /** * @brief 自定义QLineEdit控件，使用时将QLineEdit提升为CustomButtonEdit即可 * 此类的样式:一个删除按钮，动态显示隐藏 * 应用场景：密码输入，搜索框输入框 * @author GGX * @date 2020-05-20 */ 使用方法1：在UI设计拖出一个QLineEdit控件，然后提升 效果： 有文字时 无文字时： 头文件： cus..
Qt-常用控件、布局、事件和绘图
qq_59328991的博客
09-13 457
Qt-常用控件、自定义控件、布局管理、事件实现分发和过滤、绘图和绘图设备
11 Qt常用控件(QLabel、QLineEdit)
王木木
04-02 6052
1、QLabel（标签） QLabel是我们最常用的控件之一，其功能很强大，我们可以用来显示文本，图片和动画等，使用前需要加入<QLabel>头文件。 一个QLabel可以包含以下任意内容类型： 纯文本 使用setText()设置一个QString 富文本 使用setText()设置一个富文本的QString 图像 使用setPixmap()...
【QT】:QT如何实现LineEdit控件和textlabel控件的绑定
阳光心态，健康人生的博客
04-15 5417
简单的来说，就是实现，一边输入一边显示。想要实现这个功能，就要通过信号和槽函数的联系，实际上只要加上一行代码就可以了。lineEdit控件自带函数textEdited(),TextLabel控件自带SetText函数。用我们前面用到的connect函数把他俩联系起来就可以了，方法就是在cpp文件里面加上一行代码： cpp文件加的代码已经标亮：这次就讲到这里了，最后附上运行截图 这样才是一边写一遍
ActiveRichTextField类中setText函数的使用方法
noICE1的专栏
02-09 2496
ActiveRichTextField类的有一个setText函数的参数比较多，第一次使用时看文档可能也无法马上理解各个参数的含义，这里我给大家详细介绍一下它的使用方法，它的作用是可以灵活设置文本中某段字符串的字体，前景色和背景色。
Qt自定义QLineEdit时出现光标不显示问题
qq_41594719的博客
01-13 3883
1.因为需要使用到QLineEdit的focusInEvent事件和focusOutEvent事件所以重写了一个。 2.但是发现使用的时候光标不显示，但是依旧可以打字和退格 3.最后百度发现只要在重写的函数里调用一下父类的函数就行了 void CustomQLineEdit::focusInEvent(QFocusEvent *e) { QLineEdit::focusIn...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值