当前位置： 首页 > article >正文

嵌入式学习-QT-Day04

article 2025/2/28 15:33:29

嵌入式学习-QT-Day04

四、基本组件

1、Designer设计师

2、布局Layout

3、QWidget类

4、界面文件与C++代码的关系

5、QLabel标签

5.1 基本属性

5.2 添加资源库

5.3 使用资源库

5.4 使用代码添加图片

5.5 使用代码添加动态图

6、QAbstractButton按钮类

7、QLineEdit 单行文本输入框

8、ComboBox组合框

9、若干与数字相关的组件

四、基本组件

1、Designer设计师

Qt包含了一个Designer程序，用于通过可视化界面设计开发软件界面。保存的文件格式.ui(界面文件)。界面文件内部使用xml语法的标签式语言。

在Qt Creator中创建项目式，选中界面文件选项，可以让自带的窗口类使用界面文件。

所有Designer中的操作都可以通过C++代码实现。

2、布局Layout

可以把布局看作是一个透明的盒子，内部可以放置子组件，这些内部的子组件会按照布局预设的规则自动排序。

垂直布局：内部的组件竖着排成一列。

水平布局：内部的组件横着排成一排。

格栅布局：内部的组件排布成n*m的表格。

表单布局：用户搭建用户输入的布局效果。

垂直布局与水平布局的使用方式类似，只是方向不同，常用属性如下。

选中布局后，点击可以打破布局。

布局可以贴合窗口，只需要选中窗口对象后， 再次点击按钮之一即可。可以使用伸展组件填充空白。

布局也可以嵌套，对于外层布局而言，内层布局相当于一个外层布局的子组件。

3、QWidget类

QWidget的属性在Designer中显示为淡黄色，下面是一些常用的属性

策略：除非必要情况，或者实现特殊功能否则我们的策略尽量不要修改，因为当前策略对组件是最友好的。

4、界面文件与C++代码的关系

5、QLabel标签

5.1 基本属性

QLabel用于显式文字和图片，需要注意的是，QLabel不能与用户进行交互（不能点击），只能展示使用，因此没有合适的信号函数。

我们也可以直接对标签进行命名，系统的默认命名方式就是“标签名称_序号”

我们自己命名为labelPic，直接双击名称就可以进行更改。

5.2 添加资源库

把图片导入到项目中，成为项目资源，直接使用Qt的虚拟资源路径导入图片，可以在任何环境使用这些资源图片。

Qt支持以下几种常见的图片格式：

jpg（不包含透明度）、png（包含透明度）、gif（动图）等等。

注意导入的图片不能太大（分辨率过高或者文件体积过大），因为图片的操作非常消耗程序资源。

下面是导入图片成为项目资源的操作步骤：

  1. 把命名好的（不包含中文字符）的图片放置到项目的工作目录中。
  2. 在Qt Creator中选中项目名称，鼠标右键，点击添加新文件。
  3. 在弹出的窗口中，按照下图所示进行操作。

在弹出的窗口中给资源文件命名，例如res

在项目管理界面，直接点击完成，可以看到在项目中多了一个.qrc的资源文件。

选中qrc文件，点击，可以给资源文件新建一个虚拟的路径。

选中qrc文件，点击，可以导入图片到资源项目中成为资源。

导入成功后，可以在qrc文件中看到导入成功的图片。

5.3 使用资源库

  1. 点击重新构建项目，然后就可以在Designer找到图片资源并使用了。

2、添加图片后，图片比较大，可能会显式不全，需要把缩放模式点上。

5.4 使用代码添加图片

1、我们可以通过代码，加载图片，以及修剪图片尺寸等。

还需要把缩放模式关掉，不然代码的缩放模式不起作用。

如果我们通过代码，加载图片，我们需要使用#include<QPixmap>头文件，图片类头文件。

创建一个图片类对象

// 图片类的构造函数
// 参数1：图片资源路径（qrc文件中选中图片鼠标右键复制）
// 参数2：样板格式，使用默认值
// 参数3：图片颜色格式（也是默认值）
QPixmap::​QPixmap(const QString & fileName, const char * format = 0, Qt::ImageConversionFlags flags = Qt::AutoColor)

当前已经创建了图片类的对象，但是还需要进行缩放，置顶图片的输出模式。

// 缩放
// 参数1：QSize类型对象，表示目标尺寸。需要包含头文件#include<QSize>
// 参数2：三种缩放模式，是一个枚举值
// 参数3：以速度优先还是质量优先，两种模式，默认为速度优先。也是一个枚举值
// 返回值：转换后的QPixmap对象
QPixmap QPixmap::​scaled(const QSize & size, Qt::AspectRatioMode aspectRatioMode = Qt::IgnoreAspectRatio, Qt::TransformationMode transformMode = Qt::FastTransformation) const
// QSize构造函数
// 图片的宽度和高度
QSize::​QSize(int width, int height)

需要注意，尽量在项目开发之前使用PS等软件预先处理好图片，减少代码运行时的开销，提升代码的运行效率，减少资源占用。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QPixmap>
#include <QSize>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

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

    // 创建图片类对象
    // 参数：图片资源路径
    QPixmap pic(":/new/prefix1/g.jpg");

    // 定义QSize对象
    QSize size(ui->label->width(),ui->label->height());

    // 缩放
    pic = pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);

    // 使用界面文件中的组件对象
    ui->label->setPixmap(pic);
}

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

5.5 使用代码添加动态图

添加动态图：

  1. 需要将我们的动态图，放到项目文件中，并名为.gif
  2. 添加完成偶，需要将动态图，加载到项目资源中。

电影类

如果需要播放动态图，需要用到电影类，需要添加头文件#include<QMovie>.

// 创建电影类对象，需要用到这个构造函数
// 参数1：资源路径
// 参数2：输出模式，默认就行
// 参数3：基类指针，看到基类指针，是不是就知道要用堆对象
QMovie::​QMovie(const QString & fileName, const QByteArray & format = QByteArray(), QObject * parent = 0)

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QPixmap>
#include <QSize>
#include <QMovie>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();
    QMovie * movie;

private:
    Ui::Dialog *ui;
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

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

    // 创建图片类对象
    // 参数：图片资源路径
    QPixmap pic(":/new/prefix1/g.jpg");

    // 定义QSize对象
    QSize size(ui->label->width(),ui->label->height());

    // 缩放
    pic = pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);

    // 使用界面文件中的组件对象
    ui->label->setPixmap(pic);


    // 创建电影类对象
    movie = new QMovie(":/new/prefix1/kunkun.gif");

    // 给QLabel设置电影
    ui->label_3->setMovie(movie);

    // 播放电影
    movie->start();
}

Dialog::~Dialog()
{
    delete ui;
    delete movie;
}

6、QAbstractButton按钮类

QAbstractButton是按钮类的抽象基类，因此内部包含类按钮的基础属性和函数。

GroupBox分组盒子组件

QAbstractButton按钮类的基础属性：

给按钮添加一个图标：

图标文件可以通过下面的网站下载：

iconfont-阿里巴巴矢量图标库

将下载的图标，放到项目文件中如下图：（禁止使用中文字符）

添加之后，我们发现图标很小，可以将图标大小进行更改：

更改完成后，也可以将按钮大小锁死：

取消边框，增加平滑度的样式代码：

border: none; /* 取消边框 */
background-color: transparent; /* 设置背景色为透明，使按钮看起来更加平滑 */

按钮类的常用信号如下：

注意：这个通知信号和别的有些区别，如下图：

他的状态发生变化时，就会发送这个信号，携带的参数为当前值。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;

private slots:
    void toggledSlot(bool checked);
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

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

    connect(ui->radioButton,SIGNAL(toggled(bool)),
            this,SLOT(toggledSlot(bool)));
}

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

void Dialog::toggledSlot(bool checked)
{
    if(checked)
    {
        qDebug() << "超意兴被选择了";
    }
    else
    {
        qDebug() << "不选超意兴了";
    }
}

QButtonGroup组件

可以使用QButtonGroup组件对多个按钮进行分组，这是一个按钮的逻辑分组，没有任何的UI效果，其主要的目的是用一个信号槽同时监控多个按钮对象的状态。

QButtonGroup继承于QObject并非QWidget，所以它是不可见的，用户无法从窗口中看到这个控件。

// 参数1：添加的控件
// 参数2：序号ID
void QButtonGroup::​addButton(QAbstractButton * button, int id = -1)

参数中表示当前触发的按钮本身。表示当前触发的按钮序号。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>
#include <QButtonGroup> // 按钮组

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;
    QButtonGroup *btp;

private slots:
    void buttonToggledSlot(int,bool);
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

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

    // 创建按钮组对象
    btp = new QButtonGroup(this);

    // 给按钮组，添加按钮
    btp->addButton(ui->checkBox,1);
    btp->addButton(ui->checkBox_2,2);
    btp->addButton(ui->checkBox_3,3);

    // 注意 我们的按钮组件是可以多选的，但是控件组里的组件，默认是互斥的
    // 所以，要解除控件组的互斥属性
    btp->setExclusive(false);

    connect(btp,SIGNAL(buttonToggled(int,bool)),
            this,SLOT(buttonToggledSlot(int,bool)));
}

Dialog::~Dialog()
{
    delete ui;
    delete btp;
}

void Dialog::buttonToggledSlot(int id, bool checked)
{
    if(id == 1)
    {
        if(checked)
        {
           qDebug() << "白开水被选中了";
        }
        else
        {
            qDebug() << "不选白开水了";
        }
    }
    else if(id == 2)
    {
        if(checked)
        {
           qDebug() << "蛋白粉被选中了";
        }
        else
        {
            qDebug() << "不选蛋白粉了";
        }
    }
    else if(id == 3)
    {
        if(checked)
        {
           qDebug() << "嘎子卖的酒被选中了";
        }
        else
        {
            qDebug() << "不选嘎子卖的酒了";
        }
    }
    else
    {

    }
}

7、QLineEdit 单行文本输入框

QLineEdit用于输入一个单行文本，常用属性如下：

常用信号如下：

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;

private slots:
    void btnClickedSlot();
    void selectionChangedSlot();
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

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

    connect(ui->pushButton,SIGNAL(clicked()),
            this,SLOT(btnClickedSlot()));

    connect(ui->lineEdit_2,SIGNAL(selectionChanged()),
            this,SLOT(selectionChangedSlot()));
}

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

void Dialog::btnClickedSlot()
{
    QString text = ui->lineEdit->text();
    qDebug() << "第一个QLineEdit输入的内容：" << text;
    text = ui->lineEdit_2->text();
    qDebug() << "第二个QLineEdit输入的内容：" << text;
}

void Dialog::selectionChangedSlot()
{
    qDebug() << ui->lineEdit_2->selectedText();
}

8、ComboBox组合框

ComboBox用于选择一个选项，类似于QRadioButton。

常用信号如下：

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;

private slots:
    void currentIndexChangedSlot(int);
    void currentIndexChangedSlot(QString);
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

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

    connect(ui->comboBox,SIGNAL(currentIndexChanged(QString)),
            this,SLOT(currentIndexChangedSlot(QString)));
}

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

void Dialog::currentIndexChangedSlot(int index)
{
    qDebug() << index;
}

void Dialog::currentIndexChangedSlot(QString item)
{
    qDebug() << item;
}

9、若干与数字相关的组件

// value 属性值发生变化时发射的信号
// 参数为当前的value值
void	valueChanged(int value)[signal]

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;

private slots:
    void setValueSlot(int);
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

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

    connect(ui->dial,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));

    connect(ui->horizontalScrollBar,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));

    connect(ui->horizontalSlider,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));

    connect(ui->progressBar,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));

    connect(ui->spinBox,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));

    connect(ui->verticalScrollBar,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));

    connect(ui->verticalSlider,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));
}

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

void Dialog::setValueSlot(int value)
{
    ui->dial->setValue(value);
    ui->horizontalScrollBar->setValue(value);
    ui->horizontalSlider->setValue(value);
    ui->progressBar->setValue(value);
    ui->spinBox->setValue(value);
    ui->verticalScrollBar->setValue(value);
    ui->verticalSlider->setValue(value);
}

http://www.kler.cn/a/452963.html

相关文章：

  • 鸿蒙主体分割/剔除背景
  • 任务三数据库加固
  • 【每日学点鸿蒙知识】数据迁移、大量图片存放、原生自定义键盘调用、APP包安装到测试机、photoPicker顶部高度
  • （八）循环神经网络_门控循环单元GRU
  • 从汽车企业案例看仓网规划的关键步骤（视频版）
  • 项目文档-代码检查报告
  • 无人机巡检大疆智图测绘技术详解
  • ubuntu 轻松安装Conda
  • 【DSVW】攻防实战全记录
  • 2024年度个人总结
  • 题海拾贝：力扣 88.合并两个有序数组
  • Python3 爬虫 开发Scrapy下载器中间件
  • 开源轻量级IM框架MobileIMSDK的鸿蒙NEXT客户端库已发布
  • Python基础学习的资料
  • 每天40分玩转Django：Django类视图
  • Oracle、ACCSEE与TDMS的区别
  • 华为OD E卷（100分）31-敏感字段加密
  • github如何给本机绑定 ssh密钥（MACOS）
  • React图标库: 使用React Icons实现定制化图标效果
  • 利用Java爬虫获取速卖通（AliExpress）商品详情的详细指南