使用UI制作一个MainWindow，能打开一张图片并显示

1 UI设计

（1）创建项目

创建一个名为uiResource的项目，窗口类继承自QMainWindow

打开QT Designer，可以看到对象树上有3个控件，因为MainWindow继承自QMainWindow，QMainWindow默认提供这3种控件，其中centralwidget是中心部件，menubar是菜单栏，statusbar是状态栏。在对象树中点击哪个，主设计窗口中就能选中哪个对象，与此同时在右下角的属性窗口就能显示该对象所属类的继承关系，各个层次定义的属性等。

三个控件如图所示：

最下方有个“Signals _Slots Edit”选择页，可以看到对应空间的信号和槽，我们建立一个按钮来看看

通过下拉进行选择

将上面新建的按钮删了，我们只是演示

（2）添加菜单栏

如下图所示，点击“在这里输入”，然后输入“打开”

不断地在菜单栏上点，可以就能新建菜单栏

（3）添加工具

点击“文件”，然后在下拉框中输入工具的名字，然后回车可以输入下一个工具名字。


注意，这里输入不了中文，如果确实想要用中文，可以在其他地方编写，然后粘贴过来，也可以在右下角属性窗口修改text属性，工具的类型为QAction

双击“添加分隔符”，可以添加分隔符

添加完分隔符后，还需要在下拉框增加一个选项才能看见

接下来可以新增二级菜单、三级菜单

（4）添加工具栏

将鼠标移动到窗体内，然后鼠标右击——添加工具栏

然后就能看到

将鼠标移动到左边的两个点上，然后就能拖动工具栏，当然，只能停靠在上下左右。程序运行后工具栏可以浮动，可以将其拖动到上下左右边缘。

可以把下面的QAction工具拖上来

此时对象树如下图所示

工具栏中的工具，只能从下面的Action Editor选项卡中拖上去，无法新建，也就是说，只能使用在菜单栏中已有的工具

（5）中心部件

我们拖一个Text Edit过去就好

（6）设置状态栏

设置状态栏不能在QT Designer上设置，只能在代码上操作，mainwindow.cpp文件如下：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>

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

    ui->statusbar->addWidget(new QLabel("左侧信息1", this));	//设置状态栏左侧信息
    ui->statusbar->addWidget(new QLabel("左侧信息2", this));
    ui->statusbar->addPermanentWidget(new QLabel("右侧信息", this));    //设置右侧信息
}

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

ctrl+R运行，结果如下：

2 使用资源文件

（1）使用绝对路径

菜单栏的工具，和工具栏的工具，有什么区别呢？
假如我想让New显示为海贼王的图像，则需要修改MainWindow的构造函数如下：

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

    ui->statusbar->addWidget(new QLabel("左侧信息1", this));
    ui->statusbar->addWidget(new QLabel("左侧信息2", this));
    ui->statusbar->addPermanentWidget(new QLabel("右侧信息", this));    //设置右侧信息

    //用绝对地址，相对地址无法征程显示
    ui->actionNew->setIcon(QIcon("C:/qt_code/uiResource/Image/Luffy.png"));
}

可以看到，工具栏中的工具，将会被图标替代，而不会显示文字

点击菜单栏中的文件，也可以看到相应的图标，但这里会显示文字

（2）添加资源文件

使用绝对路径影响程序的移植，因此可以考虑将图片作为资源文件

右击Source——Add New

然后在弹出的对话框中选择Qt——Qt Resource File

在跳出的对话框中，给资源命名

接下来会默认打开一个res.qrc的文件，项目结构中也会多一个Resource的文件夹

工程文件中也会多一个Resource

接下来我们添加前缀项，点击“Add Prefix”，然后在前缀里写上前缀（原本点击“Add Prefix”后，前缀项自动会生成一个前缀“/new/prefix1”，我们这里改成“/”）

在打开的窗口中，进入我们要添加图片的目录下（注意，这里只能添加该工程目录下的图片，即必须在uiResource下面或其子目录中），然后选择我们需要的图片文件，这里我们把Image目录下的所有文件都选上，然后点击“打开”

现在我们的资源情况如下所示，每张图片的缩略图，后面还跟了图片的路径：

这里res.qrc文件并没有保存，我们需要保存之后才能使用。

接下来修改构造函数：

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

    ui->statusbar->addWidget(new QLabel("左侧信息1", this));
    ui->statusbar->addWidget(new QLabel("左侧信息2", this));
    ui->statusbar->addPermanentWidget(new QLabel("右侧信息", this));    //设置右侧信息

    //1 用绝对地址，相对地址无法征程显示
    //ui->actionNew->setIcon(QIcon("C:/qt_code/uiResource/Image/Luffy.png"));

    //2 用资源文件  形式为“: 前缀 + 目录文件名”
    ui->actionNew->setIcon(QIcon(":/Image/Luffy.png"));
}

运行结果如下，也能获得和绝对路径一样的效果：

通过把图片做成资源文件，使得程序容易移植，但也造成了编译缓慢，因为需要把所有资源一起编译（有些图片虽然没有使用，但被添加到了资源文件夹，也会被一起编译），假如要读取某个超过一个G的视频，则将变得非常缓慢，因此大型项目通常使用绝对路径的方式

3 标准文件对话框选择图片并显示

（1）中心部件使用QLabel替代

将中间的Text Edit删掉，我们让中间件显示图片，这里使用QLabel控件

为QLabel增加框，并让其在初始时不显示任何字符

（2）打开图片

为“打开”工具添加槽函数

信号选择triggered()

我们使用QFileDialog类的静态成员函数，通常使用的有三种，分别是getOpenFileName（获得单个文件名）、getOpenFileNames（获得多个文件名）、getExistingDirectory（获得文件夹名）

我们这里只打开一个文件，因此使用getOpenFileName，返回的将是文件的绝对路径，程序如下：

void MainWindow::on_action_3_triggered()
{
    //打开一张图片  参数：父对象指针，对话框的标题
    QString filename = QFileDialog::getOpenFileName(this, "打开一个文件");         //默认打开工程所在目录
}

打开结果：

这里默认打开的是工程目录，当然可以可以在对话框中手动打开其他路径，但假如我们想一开始就打开指定路径，可以这么写：

	//打开指定路径
    QString filename = QFileDialog::getOpenFileName(this, "打开一个文件",
                                               "C:/qt_code/uiResource/Image");  //打开指定路径

结果如下：

这里可以看到指定路径下的所有文件，但我们指向打开某一类或者某几类文件，可以添加过滤器：

    //添加过滤器  过滤器格式：文件类型(*.后缀名)，多个过滤器用;;隔开
    QString filename = QFileDialog::getOpenFileName(this,
                                "打开一个文件",
                                "C:/qt_code/uiResource/Image",
                                "PNG(*.png);;JPG(*.jpg);;GIF(.gif);;ALL(*.*)");  //不同的类型，需要用两个分号隔开
    qDebug()<<filename;

结果如下：

选中图片后点击打开，filename将得到图片的绝对路径，因为QFileDialog::getOpenFileName返回值就是图片的绝对路径

（3）显示图片

修改打开工具的槽函数如下：

void MainWindow::on_action_3_triggered()
{
    //打开一张图片  参数：父对象指针，对话框的标题
    //QString filename = QFileDialog::getOpenFileName(this, "打开一个文件");     //默认打开工程所在目录

    //打开指定路径
//    QString filename = QFileDialog::getOpenFileName(this, "打开一个文件",
//                                               "C:/qt_code/uiResource/Image");  //打开指定路径


    //添加过滤器  过滤器格式：文件类型(*.后缀名)，多个过滤器用;;隔开
    QString filename = QFileDialog::getOpenFileName(this,
                                "打开一个文件",
                                "C:/qt_code/uiResource/Image",
                                "PNG(*.png);;JPG(*.jpg);;GIF(.gif);;ALL(*.*)");  //不同的类型，需要用两个分号隔开

    //显示图片
    QImage img_1;
    img_1.load(filename);   //导入图片
    ui->label->setPixmap(QPixmap::fromImage(img_1));
    ui->label->resize(QSize(img_1.width(), img_1.height()));
    ui->label->show();
}

运行后，点击“打开”工具

最后显示的结果如下：