Qt案例：实现显示图片

效果图：

17.1 组件使用

17.1.1 QDockWidget

含义：停靠区窗口，和状态栏、标题栏是一个等级

属性：

allowedAreas：设置允许停靠区域,或者使用代码setAllowedAreas(Qt::DockWidgetAreas areas)
features：设置停靠的属性。setFeatures(DockWidgetFeatures features)

17.1.2 QTreeWidget

含义：目录树

属性：

Columns页用于设计目录树的列，目录树可以有多个列。在设计器里可以添加、删除、移动列，设置列的文字、字体、前景色、背景色、文字对齐方式、图标等。
Items页面用于设计目录树的节点，可对每个节点设置属性，如文字、字体、图标等，特别是fags属性，可以设置节点是否可选、是否可编辑、是否有CheckBox等，还可以设置节点的CheckState。

17.2 Action

17.3 定义基本变量

private:// 创建节点时用作type参数，自定义类型必须大于1000enum treeItemType{itTopItem = 1001,itGroupItem,itImageItem};enum treeColNum{colItem=0,colItemType=1};QLabel *LabFileName;// 显示状态栏文件名称QPixmap curPixmap; // 当前图片float pixRatio; // 当前图片比例// 初始化目录树void initTree();void addFolderItem(QTreeWidgetItem *parItem,QString dirName); // 添加目录QString getFinalFolderName(const QString &fullPathName); // 提取目录名称void addImageItem(QTreeWidgetItem *parItem,QString aFilename); // 添加图片void displayImage(QTreeWidgetItem *item); // 显示一个图片节点的图片void changeItemCaption(QTreeWidgetItem *item); // 遍历改变节点标题

17.4 目录树初始化

添加顶层节点

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{ui->setupUi(this);// 状态栏显示文件名LabFileName = new QLabel("");ui->statusBar->addWidget(LabFileName);// 设置中心窗体this->setCentralWidget(ui->scrollArea);// 初始化目录树initTree();
}void MainWindow::initTree()
{QString dataStr = "";ui->treeWidget->clear(); // 清空目录树QIcon icon;icon.addFile(":/icons/icons/15.ico");QTreeWidgetItem *item = new QTreeWidgetItem(MainWindow::itTopItem); //?item->setIcon(MainWindow::colItem,icon); // 第一列图标item->setText(MainWindow::colItem,"图片文件"); // 第一列文字item->setText(MainWindow::colItemType,"type=itTopItem"); // 第二列文字item->setFlags(Qt::ItemIsSelectable | Qt::ItemIsAutoTristate | Qt::ItemIsEnabled | Qt::ItemIsUserCheckable);item->setCheckState(colItem,Qt::Checked); // 第一列勾选item->setData(MainWindow::colItem,Qt::UserRole,QVariant(dataStr)); //？ui->treeWidget->addTopLevelItem(item);// 添加顶层节点}

QTreeWidget的每个节点都是一个QTree WidgetItem对象，添加一个节点前需先创建它，并做好相关设置。
setData()函数为节点的某一列设置一个角色数据，setData()函数原型为：void() TreeWidgetItem::setData(int column,int role,const QVariant &value)

如

item->setData(MainWindow:colItem,Qt::UserRole,QVariant (datastr));

它为节点的第1列，角色Qt:UserRole,设置了一个字符串数据dataStr.Qt:UserRole是枚举类型Qt:ItemDataRole中一个预定义的值。

17.5 添加目录节点

定义3个函数

// 获取文件名称
QString MainWindow::getFinalFolderName(const QString &fullPathName)
{return fullPathName.right(fullPathName.length()-fullPathName.lastIndexOf("/")-1);
}

// 添加节点函数
void MainWindow::addFolderItem(QTreeWidgetItem *parItem, QString dirName)
{QIcon icon(":/icons/icons/open3.bmp");QString NodeText = getFinalFolderName(dirName);QTreeWidgetItem *item = new QTreeWidgetItem(MainWindow::itGroupItem); // 传入目录的节点类型type值1001item->setIcon(colItem,icon);item->setText(colItem,NodeText);item->setText(colItemType,"type:itGroupItem");item->setFlags(Qt::ItemIsSelectable | Qt::ItemIsAutoTristate | Qt::ItemIsEnabled | Qt::ItemIsUserCheckable);item->setCheckState(colItem,Qt::Checked);item->setData(colItem,Qt::UserRole,QVariant(dirName));parItem->addChild(item); // 在父节点添加子节点
}

// action关联函数
void MainWindow::on_actAddFolder_triggered()
{QString fullname = QFileDialog::getExistingDirectory();if(!fullname.isEmpty()){QTreeWidgetItem *parItem = ui->treeWidget->currentItem();if(parItem){addFolderItem(parItem,fullname);}else {// 创建弹窗QMessageBox::critical(this, tr("危险弹窗"),  tr("请选择目标节点"),QMessageBox::Save | QMessageBox::Discard,  QMessageBox::Discard);}}else {return;}}

17.6 添加图片节点

QFileDialog::getOpenFileNames函数可以实现添加多个文件

实现：

创建临时变量parItem和item;
parItem用于最终的添加目标,item存放当前节点；
如果当前节点是文件节点或者顶层节点，则目标节点是当前节点;
如果当前节点是图片节点,则目标节点是图片节点的父节点(图片节点为末尾节点,后面不能添加子节点);
使用for循环分别获取文件的名称,并添加到目标节点下;

void MainWindow::addImageItem(QTreeWidgetItem *parItem, QString aFilename)
{QIcon icon(":/icons/icons/31.ico");QString NodeText = getFinalFolderName(aFilename);QTreeWidgetItem *item;item = new QTreeWidgetItem(MainWindow::itImageItem);item->setIcon(colItem,icon);item->setText(colItem,NodeText);item->setText(colItemType,"type=itImageItem");item->setFlags(Qt::ItemIsSelectable | Qt::ItemIsAutoTristate | Qt::ItemIsEnabled | Qt::ItemIsUserCheckable);item->setData(colItem,Qt::UserRole,QVariant(aFilename));parItem->addChild(item); // 在父节点添加子节点
}

void MainWindow::on_actAddFiles_triggered()
{QStringList files = QFileDialog::getOpenFileNames(this,"选择一个或者多个文件","","Images(*.jpg)");if(files.isEmpty())return;QTreeWidgetItem *parItem,*item;item = ui->treeWidget->currentItem();if(item){if(item->type()==itImageItem) // 当前节点是图片节点parItem = item->parent();else {parItem=item;}for (int i = 0;i<files.size();++i) {QString aFilename = files.at(i);addImageItem(parItem,aFilename);}}else {QMessageBox::critical(this, tr("危险弹窗"),  tr("请选择目标节点"),QMessageBox::Save | QMessageBox::Discard,  QMessageBox::Discard);}
}

17.7 当前节点发生变化响应

QTreeWidget会发出currentItemChanged信号

实现：

获取当前节点的类型；
判断当前选中的节点属于哪个类型；
根据类型设置添加、删除等按钮的状态；
如果为图片节点，调用图片显示函数；

代码实现：

void MainWindow::on_treeWidget_currentItemChanged(QTreeWidgetItem *current, QTreeWidgetItem *previous)
{Q_UNUSED(previous);if(current==NULL)return;int var = current->type();switch (var) {case itTopItem:ui->actAddFolder->setEnabled(true);ui->actAddFiles->setEnabled(true);ui->actDeleteItem->setEnabled(false);break;case itGroupItem:ui->actAddFolder->setEnabled(true);ui->actAddFiles->setEnabled(true);ui->actDeleteItem->setEnabled(true);break;case itImageItem: // 当前选中为图片，不能添加子节点，显示图片ui->actAddFolder->setEnabled(false);ui->actAddFiles->setEnabled(true);ui->actDeleteItem->setEnabled(true);ui->actZoomFitH->setEnabled(true);ui->actZoomFitW->setEnabled(true);ui->actZoomIn->setEnabled(true);ui->actZoomOut->setEnabled(true);ui->actZoomRealSize->setEnabled(true);displayImage(current);break;}
}

17.8 删除节点

删除节点使用QTreeWidgetItem对象上的removeChild函数

实现：

获取当前节点；
获取当前节点的父节点；
从父节点中删除子节点；

代码实现：

void MainWindow::on_actDeleteItem_triggered()
{QTreeWidgetItem *item = ui->treeWidget->currentItem();QTreeWidgetItem *parItem = item->parent();parItem->removeChild(item);delete item; // 删除子节点的内存空间。removveChild只能从父节点中删除子节点，但不能移除子节点的内存空间。
}

17.9 遍历节点

使用递归调用

int topLevelItemCount（）:返回顶层节点个数。
QTree WidgetItemtopLevelItem(int index):返回序号为index的顶层节点。

int topLevelItemCount（）:返回顶层节点个数。
QTree WidgetItem*topLevelItem(int index):返回序号为index的顶层节点。

实现：

获取全部的顶层节点，遍历更改；
更改每个节点后，获取全部子节点并更改；

代码实现：

void MainWindow::on_actScanItems_triggered()
{int cnt = ui->treeWidget->topLevelItemCount();for(int i = 0;i<cnt;++i){QTreeWidgetItem *item = ui->treeWidget->topLevelItem(i); // 顶层节点changeItemCaption(item); // 调用【更改节点标题】函数}
}

void MainWindow::changeItemCaption(QTreeWidgetItem *item)
{// 节点标题前加*QString str = "*" + item->text(colItem);item->setText(colItem,str);if(item->childCount()>0){for (int i = 0;i<item->childCount();i++) {changeItemCaption(item->child(i));}}
}

17.10 显示节点的图片

curPixmap是在MainWindow中定义的一个QPixmap类型的变量，用于操作图片。QPixmap:load(QString&cfileName)直接将一个图片文件载入。

实现：

获取存入的文件名称并在状态栏显示名称；
调用QPixmap下的load函数载入图片；
自适应高度显示图片；

这里还显示不了，还未写自适应高度显示action；

void MainWindow::displayImage(QTreeWidgetItem *item)
{QString filename = item->data(colItem,Qt::UserRole).toString(); // 获取文件名，之前用setData存的数据LabFileName->setText(filename); // 状态栏显示图片名称curPixmap.load(filename); // 当前图片on_actZoomFitH_triggered(); // 自适应高度显示
}

17.11 图片显示与缩放

QPixmap存储图片数据，可以缩放图片，有以下几个函数。

QPixmap scaledToHeight(int height):返回一个缩放后的图片的副本，图片缩放到一个高度height.
QPixmap scaledTo Width(int width):返回一个缩放后的图片的副本，图片缩放到一个宽度width.
QPixmap scaled(int width,.int height):返回一个缩放后的图片的副本，图片缩放到宽度width和高度height,缺省为不保持比例。

变量curPixmap保存了图片的原始副本，要缩放只需调用curPixmap的相应函数，返回缩放后的图片副本。在界面上的一个标签LabPicture上显示图片，使用了QLabel的setPixmap(const QPixmap&)函数。

void MainWindow::on_actZoomFitH_triggered()
{// 自适应高度显示int H = ui->scrollArea->height(); // 获取当前滑动块的高度int realH = curPixmap.height(); // 获取当前图片的高度pixRatio = float(H)/realH; // 当前图片显示的比例（必须是浮点数）QPixmap pix = curPixmap.scaledToHeight(H-30); // 图片缩放指定高度ui->label->setPixmap(pix); // label标签显示图片
}void MainWindow::on_actZoomFitW_triggered()
{// 自适应宽度显示int W = ui->scrollArea->width(); // 获取当前滑动块的高度int realW = curPixmap.width(); // 获取当前图片的高度pixRatio = float(W)/realW; // 当前图片显示的比例（必须是浮点数）QPixmap pix = curPixmap.scaledToWidth(W-30); // 图片缩放指定高度ui->label->setPixmap(pix); // label标签显示图片
}void MainWindow::on_actZoomIn_triggered()
{// 放大显示pixRatio = pixRatio*1.2;int w = pixRatio*curPixmap.width();int h = pixRatio*curPixmap.height();QPixmap pix = curPixmap.scaled(w,h);ui->label->setPixmap(pix);
}void MainWindow::on_actZoomOut_triggered()
{// 缩小显示pixRatio = pixRatio*0.8;int w = pixRatio*curPixmap.width();int h = pixRatio*curPixmap.height();QPixmap pix = curPixmap.scaled(w,h);ui->label->setPixmap(pix);
}void MainWindow::on_actZoomRealSize_triggered()
{// 实际大小pixRatio = 1;ui->label->setPixmap(curPixmap);
}

17.12 dockWidget

只写action按钮的动作，手动拖动dockWidget时按钮的状态不会改变，需要使用dockWidget上的信号;

隐藏发射信号visibilityChanged(bool)
浮动、停靠信号topLevelChanged(bool)

void MainWindow::on_actDockVisible_toggled(bool arg1)
{ui->dockWidget->setVisible(arg1);
}void MainWindow::on_actDockFloat_toggled(bool arg1)
{ui->dockWidget->setFloating(arg1);
}void MainWindow::on_dockWidget_topLevelChanged(bool topLevel)
{ui->actDockFloat->setChecked(topLevel);
}void MainWindow::on_dockWidget_visibilityChanged(bool visible)
{ui->actDockVisible->setChecked(visible);
}