QT软件开发知识点流程及图片转换工具的开发

1.QT开发软件界面介绍

首先打开软件之后我们就会进入到软件主界面，如下：

我们点击创建项目然后选择自己所要创建的工程选项后就可以进入到该软件的编辑界面。如下所示：

可见该界面有一些C++头文件和源文件,我们程序的主要编写文件就是widget.h和widget.cpp文件，我们主要的图形化设计界面就是widget.ui文件，双击之后即可进入到如下界面：

其中左边时一些界面设计所需的控件，我们可以通过将空间拖拽到中间的编辑界面来进行界面编辑，右边上面是对象名，下面是对象属性编辑器用来给对象的属性进行一些编辑。objectName是对象的名称。enable表示空间是否可用，用来看是否要使能你所选的控件。geometry表示对象的矩形尺寸，其中的x,y是该对象的坐标，左上角是坐标原点，宽度和高度对应对象的矩形宽度和高度。sizePolicy是窗口策略，点开可以看到如下参数：

sizeHint ：这个属性所保存的是窗口或其它组件（为了方便下面统称为widget）的尺寸，也就是说一个 widget 该有多大，而这个值由 sizeHint() 函数来确定。Fixed：控件不能放大或者缩小，控件的大小就是它的sizeHint。Minimum：控件的sizeHint为控件的最小尺寸。控件不能小于这个sizeHint，但是可以放大。Maximum：控件的sizeHint为控件的最大尺寸，控件不能放大，但是可以缩小到它的最小的允许尺寸。Preferred：控件的sizeHint是它的sizeHint，但是可以放大或者缩小Expanding：控件可以自行增大或者缩小。minimumSize是窗口的最小尺寸。maximumSize是窗口的最大尺寸。baseSize用户重新定义窗口尺寸是会以baseSize为基准，baseSize的设置于sizeIncrement有关，这些一般保持默认值即可。

font中是于字体相关的配置，字体族用来选择系统所支持的字体中的一种，点大小就是字体的大小，粗体和斜体是字体的样式可设置，下划线和删除线设置字体下面是否显示下划线和删除线。cursor是光标类型，具体的有如下光标类型可以选择：

这里就可以就可以涉及我们软件编写中很多光标种类的设置了。mouseTracking是鼠标跟踪设置后会获取鼠标的位置来跟踪鼠标，tableTracking平板跟踪，启用了平板跟踪功能，部件能接收触控笔靠近但未真正接触平板时的触控笔移动事件。windowTitle用来设置串口标题的名称。windowicon用来设置窗口的图标。当在界面中有空间时选中控件还会有下面的栏目：

这几种颜色就是继承类间的继承关系不同颜色的栏目之间相当于对上面栏目继承的补充，即这些栏目中的类时下面的继承于上面的。

2.图片转换工具的开发

首先我们通过对右边控件的选择来做出如图所示的界面如下：

其中的左边的文字选项是Lable，然后我们选择一个Groupbox，将上面四个选项按钮放入Groupbox中其就相当于一个容器将四个选项按钮放入后就变成一组的了。上面的四个选项按钮为Radio Button该选项按钮具有排他性可以理解为是一个单选按钮当选中一个时就不能选择其他的，选择其他的后原来选择的就会显示没有选中。左边第二列中时PushButton其有按钮的很多状态，如单击，按下松开和lvgl中的button类似通过这些状态我们可以进行很多的判断设计。界面设计好后我们就要进行对界面控制的设计了，这个设计也是qt软件设计的一个特点就是信号和槽的机制。我们通过该机制就可以实现对界面交互来实现相应功能的实现。

我们选中对应控件再转到槽后就可以进入到程序编写界面，编写相应的程序来实现想要的效果，下面我们来进行看程序及详解。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    qDebug() << "构造函数被调用" ;  //带有换行符，不需要自行添加换行
    ui->radioButton_64->setChecked(true);   //设置该选项状态已经被选中，即初始状态为被选中

}

在Widget类的构造函数中，我们调用基类的构造函数并传入parent指针参数用于给基类完成构造，然后创建一个对象将该对象的指针赋值给成员变量ui，成员变量如下：

private:
    Ui::Widget *ui;

然后通过setupUI方法动态生成用户界面，并且建立其信号和槽的联系。qDebug函数是qt中的一个库函数类似于printf或cout也是将信息输出到相应的显示界面可供我们调试使用，且自带换行符不需要再在后面加上换行符。然后将ui中的单选按钮radioButton_64设置为被选中，作为界面打开时的默认状态。

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

该函数时析构函数为将删除。

void Widget::on_pushButton_select_clicked()
{
    qDebug() << "on_pushButton_select_clicked()" ;
}

接下来就是对相应控件执行后需要做的事件进行编写了，也就是如上对槽函数的编写。当控件执行相关操作后产生信号程序就会进入到槽函数中，对信号进行处理，这就将我们的控件和要执行的事件联系起来了。

void Widget::on_pushButton_select_clicked()
{
    qDebug() << "on_pushButton_select_clicked()" ;
    if(ui->radioButton_16 -> isChecked())
    {
        qDebug() << "16X16" ;
        width = 16;
        height = 16;
    }
    else  if(ui->radioButton_32 -> isChecked())
    {
        qDebug() << "32X32" ;
        width = 32;
        height = 32;
    }
    else  if(ui->radioButton_64 -> isChecked())
    {
        qDebug() << "64X64" ;
        width = 64;
        height = 64;
    }
    else  if(ui->radioButton_128 -> isChecked())
    {
        qDebug() << "128X128" ;
        width = 128;
        height = 128;
    }
    fileName = QFileDialog::getOpenFileName(this,tr("open file"),".",tr("Image Files (*.png *.jpg *.bmp);;"));//该函数返回值为返回打开文件的路径
    qDebug() << "filename:" << fileName ;

    if(fileName.isEmpty())      //判空
    {
        qDebug() << "文件名为空 获取文件名失败" ;
        ui->label_filename->clear();        //将标签中的信息清除
        ui->label_picture->clear();
        return ;
    }

    QFileInfo fi(fileName); //用该类实例化一个对象，可以通过该对象来调用类中的成员方法
    QString name = fi.fileName();   //当光标在该方法下时，可以使用F1直接查看该方法的一些用法
    qDebug() << "name:" << name;

    ui->label_filename->setText(name);   //可以将我们所得到的图片名称显示到该标签下

    QPixmap map(fileName);     //创建一个对象，直接初始化
    QPixmap newmap = map.scaled(width,height);  //对图像进行缩放
    ui->label_picture->setPixmap(newmap);    //将该标签设置为缩放后的图片

}

当我们单击选择图片按钮时，我们进入到该槽函数中，在该函数中首先我们进行了调试信息的输出，然后判断我们的单选按钮中选中的时哪一个来给图片缩放的宽和高大小赋值，便于我们进行对应的图片缩放，然后我们通过使用 QFileDialog该类中的成员方法获取到我们所选图片的路径字符串，第一个参数就是指定对话窗的窗口我们指定为当前窗口，第二个参数设置对话框的标题，第三个参数设置对话框打开时的初始目录我们设置为当前目录，第四个参数过滤器显示名称，选择我们所需要文件的扩展名。然后进行判空处理，当不为空是时程序进行执行，为空时清除文件路径名和图片标签内容。然后我们通过QFileInfo类创建一个对象，并将文件目录字符串作为参数直接初始化该对象，然后通过该对象调用类中的成员方法fileName()来获取文件名，然后将相应标签通过函数setText将我们所得到的文件名显示在该标签中，以得到在软件界面中显示图片名称的效果。然后我们在通过QPixmap类创建一个对象，给类中有于图片缩放等相关的方法，通过该对象调用图片缩放的方法得到进行缩放后的图片，然后通过标签调用setPixmap函数将该图片实现到标签界面上。如图所示：

这样子我们就完成了选择图片的功能，接下来我们来完成预览图片功能，程序和详解如下：

void Widget::on_pushButton_preview_clicked()
{
    if(fileName.isEmpty())      //判空
    {
        return ;
    }

    if(ui->radioButton_16 -> isChecked())
    {
        qDebug() << "16X16" ;
        width = 16;
        height = 16;
    }
    else  if(ui->radioButton_32 -> isChecked())
    {
        qDebug() << "32X32" ;
        width = 32;
        height = 32;
    }
    else  if(ui->radioButton_64 -> isChecked())
    {
        qDebug() << "64X64" ;
        width = 64;
        height = 64;
    }
    else  if(ui->radioButton_128 -> isChecked())
    {
        qDebug() << "128X128" ;
        width = 128;
        height = 128;
    }

    QPixmap map(fileName);                      //创建一个对象，直接初始化
    QPixmap newmap = map.scaled(width,height);  //对图像进行缩放
    ui->label_picture->setPixmap(newmap);       //将该标签设置为缩放后的图片

}

同样在预览中实现图片显示前我们要判断图片的缩放尺寸，然后我们再次通过QPixmap类创建一个对象，然后进行缩放然后将完成缩放后的图片显示到相应的标签上，如下

可见我们可以通过上面的单选按钮来实现对图片缩放比列的控制。接下来我们实现删除图片按钮的功能，程序和详解如下：

void Widget::on_pushButton_delete_clicked()
{
    ui->label_filename->clear();        //将标签中的信息清除
    ui->label_picture->clear();
    fileName.clear();                   //将该文件的路径名也清除掉
}

首先我们将标签中的信息通过clear函数清除，然后将该文件的目录也清除。最后完成保存图片的功能，程序及详解如下：

void Widget::on_pushButton_save_clicked()
{
    if(fileName.isEmpty())
    {
        return ;
    }

    QString saveName = QFileDialog::getSaveFileName(this,tr("save file"),".",tr("Image Files (*.ico);;"));//获取保存文件路径名
    if(saveName.isEmpty())
    {
        return ;
    }

    if(ui->radioButton_16 -> isChecked()) //再次判断要保存的图片缩放大小
    {
        qDebug() << "16X16" ;
        width = 16;
        height = 16;
    }
    else  if(ui->radioButton_32 -> isChecked())
    {
        qDebug() << "32X32" ;
        width = 32;
        height = 32;
    }
    else  if(ui->radioButton_64 -> isChecked())
    {
        qDebug() << "64X64" ;
        width = 64;
        height = 64;
    }
    else  if(ui->radioButton_128 -> isChecked())
    {
        qDebug() << "128X128" ;
        width = 128;
        height = 128;
    }

    QPixmap map(fileName);                      //创建一个对象，直接初始化
    QPixmap newmap = map.scaled(width,height);  //对图像进行缩放
    newmap.save(saveName);                      //对图像进行保存

}

首先我们进行判空当选中图片时即不为空我们继续执行函数，燃火我们通过QFileDialog::getSaveFileName该方法获取到我们要保存的图片的目录和图片类型可见我们只需要设置我们需要转换出来的图片类型即可不需要我们来编写程序进行转化，因为qt的库中已经帮我拿实现了，然后判断单选按钮确定要保存的图片缩放尺寸，创建一个对象缩放后通过save函数并传入我们要保存图片的目录等信息最后进行保存。