Qt基础教程之QTreeWidget和QDockWidget用法详解.docx
《Qt基础教程之QTreeWidget和QDockWidget用法详解.docx》由会员分享，可在线阅读，更多相关《Qt基础教程之QTreeWidget和QDockWidget用法详解.docx（19页珍藏版）》请在冰点文库上搜索。
Qt基础教程之QTreeWidget和QDockWidget用法详解
本节介绍QTreeWidget、QDockWidget的使用，以及用QLabel显示图片的方法。
实例samp4_8QTreeWidget以QTreeWidget为主要组件，创建一个照片管理器，实例运行时的界面如图1所示。
图1实例Samp4_8运行时界面
这个实例主要演示如下几个组件的使用方法。
∙QTreeWidget目录树组件：
QTreeWidget类是创建和管理目录树结构的类。
实例使用一个QTreeWidget组件管理照片目录，可以添加、删除节点，每个节点设置一个自定义类型，另外，还设置了一个自定义数据，图片节点存储完整文件名，以便单击节点时显示该图片。
∙QDockWidget停靠区域组件：
QDockWidget是可以在QMainWindow窗口停靠，或在桌面最上层浮动的界面组件。
本实例将一个QTreeWidget组件放置在QDockWidget区域上，设置其可以在主窗口的左或右侧停靠，也可以浮动。
∙QLabel组件显示图片：
右侧是一个QScrollArea组件，ScrollArea上面放置一个QLabel组件，通过为QLabel设置一个QPixmap显示图片。
通过QPixmap操作可进行缩放显示，包括放大、缩小、实际大小、适合宽度、适合高度等。
界面设计
界面布局设计
实例中的主窗口从QMainWindow继承而来，界面釆用可视化设计，程序功能主要用Action实现，主菜单和主工具栏也都由其实现。
工作区左侧是一个QDockWidget组件，在DockWidget上放置一个QTreeWidget组件，用水平布局使treeWidget填充满停靠区。
工作区右侧是一个QScrollArea组件，QScrollArea组件里放置一个QLabel组件，利用QLabel的pixmap属性显示图片。
scrollArea内部的组件釆用水平布局，当图片较小时，Label显示的图片可以自动居于scrollArea的中间；当Label显示的图片超过scrollArea可显示区域的大小后，scrollArea会自动显示水平或垂直方向的卷滚条，用于显示更大的区域。
在主窗口构造函数里将ScmllArea组件设置为主窗口工作区的中心组件后，DockWidget与ScrollArea之间自动出现分割条，可以分割两个组件的大小。
QDockWidget组件属性设置
在UI设计器里对DockWidget组件的主要属性进行设置，主要属性如下：
∙allowedAreas属性，设置允许停靠区域。
由函数setAllowedAreas（Qt:
:
DockWidgetAreasareas）设置允许停靠区，参数areas是枚举类型Qt:
:
DockWidgetArea的值的组合，可以设置在窗口的左、右、顶、底停靠，或所有区域都可停靠，或不允许停靠。
本实例设置为允许左侧和右侧停靠。
∙features属性，设置停靠区组件的特性。
由setFeatures（DockWidgetFeaturesfeatures）函数设置停靠区组件的特性，参数features是枚举类型QDockWidget:
:
DockWidgetFeature的值的组合，枚举值如下：
∙QDockWidget:
:
DockWidgetClosable：
停靠区可关闭。
∙QDockWidget:
:
DockWidgetMovable：
停靠区可移动。
∙QDockWidget:
:
DockWidgetFloatable：
停靠区可浮动。
∙QDockWidget:
:
DockWidgetVerticalTitleBar：
在停靠区左侧显示垂直标题栏。
∙QDockWidget:
:
AllDockWidgetFeatures：
使用以上所有特征。
∙QDockWidget:
:
NoDockWidgetFeatures：
不能停靠、移动和关闭。
本实例设置为可关闭、可停靠、可浮动。
QTreeWidget组件的设置
在UI设计器里，双击界面上的QTreeWidget组件，可以打开图2所示的设计器，设计器有两页，可分别对Columns和Items进行设计。
图2QTreeWidget组件的设计器（Items页面）
Columns页用于设计目录树的列，目录树可以有多个列。
在设计器里可以添加、删除、移动列，设置列的文字、字体、前景色、背景色、文字对齐方式、图标等。
本实例设置了两个列，标题分别为“节点”和“节点类型”。
Items页面用于设计目录树的节点，可对每个节点设置属性，如文字、字体、图标等，特别是flags属性，可以设置节点是否可选、是否可编辑、是否有CheckBox等，还可以设置节点的CheckState。
在图2下方有一组按钮可以新增节点、新增下级节点、删除节点、改变节点级别、平级移动节点等。
使用设计器设计目录树的列和节点，适用于创建固定结构的目录树，但是目录树一般是根据内容动态创建的，需要运用代码实现节点的创建。
Action设计
本例的功能代码大多采用Action实现，在ActionEditor里设计Action，然后利用Action设计主菜单和主工具栏。
设计完成的Action如图3所示。
图3设计的Action
QTreeWidget操作
本实例的目录树节点操作规则
本实例的目录树节点操作定义如下一些规则：
∙将目录树的节点分为3种类型，顶层节点、分组节点和图片节点。
∙窗口创建时初始化目录树，它只有一个顶层节点，这个顶层节点不能被删除，而且不允许再新建顶层节点。
∙顶层节点下允许添加分组节点和图片节点。
∙分组节点下可以添加分组节点和图片节点，分组节点的级数无限制。
∙图片节点是终端节点，可以在图片节点同级再添加图片节点。
∙每个节点创建时设置其类型信息，图片节点存储其完整文件名作为自定义数据。
∙单击一个图片文件节点时，显示其关联文件的图片。
为便于后面说明代码的实现，将主窗口类MainWindow中增加的自定义内容先列出来，代码如下（这些枚举类型、变量和函数的功能在后面再具体介绍）：
classMainWindow:
publicQMainWindow
{
private:
//枚举类型treeItemType，用于创建QTreeWidgetItem时作为节点的type,自定义类型必须大于1000
//itTopItem顶层节点;itGroupItem组节点；itImageItem图片
enumtreeItemType{itTopItem=1001,itGroupItem,itImageItem};
//枚举类型，表示列号
enumtreeColNum{colItem=0,colItemType=1};//目录树列的编号定义
QLabel*LabFileName;
QPixmapcurPixmap;//当前的图片
floatpixRatio;//当前图片缩放比例
voidiniTree（）;//目录树初始化
voidaddFolderItem（QTreeWidgetItem*parItem,QStringdirName）;//添加一个目录节点
QStringgetFinalFolderName（constQString&fullPathName）;//从目录全名称中获取最后的文件夹名称
voidaddImageItem（QTreeWidgetItem*parItem,QStringaFilename）;//添加一个图片节点
voiddisplayImage（QTreeWidgetItem*item）;//显示一个图片节点的图片
//voidChangeCheckable（QTreeWidgetItem*Item,boolchk）;//更改节点的checkable状态
voidchangeItemCaption（QTreeWidgetItem*item）;//遍历改变节点标题
}
目录树初始化添加顶层节点
主窗口MainWindow的构造函数会调用自定义函数iniTree（），对目录树进行初始化，窗口构造函数和iniTree（）代码如下：
MainWindow:
:
MainWindow（QWidget*parent）:
QMainWindow（parent）,ui（newUi:
:
MainWindow）
{
ui->setupUi（this）;
LabFileName=newQLabel（""）;
ui->statusBar->addWidget（LabFileName）;
this->setCentralWidget（ui->scrollArea）;
iniTree（）;//初始化目录树
}
voidMainWindow:
:
iniTree（）
{//初始化Tree
//QTreeWidgetItem*item;//节点
QStringdataStr="";//Item的Data存储的string
ui->treeFiles->clear（）;//清除目录树所有节点
QIconicon;
icon.addFile（":
/images/icons/15.ico"）;//设置ICON的图标
QTreeWidgetItem*item=newQTreeWidgetItem（MainWindow:
:
itTopItem）;//新建节点时设定类型为itTopItem
item->setIcon（MainWindow:
:
colItem,icon）;//设置第1列的图标
item->setText（MainWindow:
:
colItem,"图片文件"）;//设置第1列的文字
item->setText（MainWindow:
:
colItemType,"type=itTopItem"）;//设置第2列的文字
item->setFlags（Qt:
:
ItemIsSelectable|Qt:
:
ItemIsUserCheckable|Qt:
:
ItemIsEnabled|Qt:
:
ItemIsAutoTristate）;
item->setCheckState（colItem,Qt:
:
Checked）;//设置为选中
item->setData（MainWindow:
:
colItem,Qt:
:
UserRole,QVariant（dataStr））;//设置节点第1列的Qt:
:
UserRole的Data
ui->treeFiles->addTopLevelItem（item）;//添加顶层节点
}
QTreeWidget的每个节点都是一个QTreeWidgetItem对象，添加一个节点前需先创建它，并做好相关设置。
创建节点的语句是：
item=newQTreeWidgetItem（MainWindow:
:
itTopItem）;
传递了一个枚举常量MainWindow:
:
itTopItem作为构造函数的参数，表示节点的类型。
在构造函数里传递一个类型值之后，就可以用QTreeWidgetItem:
:
type（）返回这个节点的类型值。
itTopItem是在MainWindow里定义的枚举类型treeltemType的一个常量值。
枚举类型treeItemType定义了节点的类型，自定义的节点类型值必须大于1000。
QTreeWidgetItem的setIcon（）和setText（）都需要传递一个列号作为参数，指定对哪个列进行设置。
列号可以直接用数字，但是为了便于理解代码和统一修改，在MainWindow里定义了枚举类型treeColNum,colItem表示第1列，colItemType表示第2列。
setFlags（）函数设置节点的一些属性标记，是Qt:
:
ItemFlag枚举类型常量的组合。
setData（）函数为节点的某一列设置一个角色数据，setData（）函数原型为：
voidQTreeWidgetltem:
:
setData（intcolumn,introle,constQVariant&value）
其中，column是列号，role是角色的值，value是一个QVariant类型的数。
代码中设置节点数据的语句是：
item->setData（MainWindow:
:
colItem,Qt:
:
UserRole,QVariant（dataStr））;
它为节点的第1列，角色QtrUserRole，设置了一个字符串数据dataStr。
QtUserRole是枚举类型Qt:
:
ItemDataRole中一个预定义的值，关于节点的角色和Qt:
:
ItemDataRole会在后续章节中详细介绍。
创建并设置好节点后，用QTreeWidget:
:
addTopLevelItem（）函数将节点作为顶层节点添加到目录树。
添加目录节点
actAddFolder是用于添加组节点的Action，当目录树上的当前节点类型是itTopItem或itGroupItem类型时，才可以添加组节点。
actAddFolder的triggered（）信号的槽函数，以及相关自定义函数的代码如下：
voidMainWindow:
:
on_actAddFolder_triggered（）
{//选择一个文件夹,作为当前节点的子节点加入
QStringdir=QFileDialog:
:
getExistingDirectory（）;//选择目录
if（!
dir.isEmpty（））//选择目录名称不为空
{
//QTreeWidgetItem*parItem;//节点
QTreeWidgetItem*parItem=ui->treeFiles->currentItem（）;//当前节点
addFolderItem（parItem,dir）;//在父节点下面添加一个组节点
}
}
voidMainWindow:
:
addFolderItem（QTreeWidgetItem*parItem,QStringdirName）
{//添加一个目录节点
QIconicon（":
/images/icons/open3.bmp"）;
//icon.addFile（":
/images/icons/open3.bmp"）;//设置ICON的图标
QStringNodeText=getFinalFolderName（dirName）;//从一个完整目录名称里，获得最后的文件夹名称
QTreeWidgetItem*item;//节点
item=newQTreeWidgetItem（MainWindow:
:
itGroupItem）;//新建节点,设定type为itGroupItem
item->setIcon（colItem,icon）;//设置图标
item->setText（colItem,NodeText）;//最后的文件夹名称，第1列
//item->setText（colSecond,"type=itGroupItem;data="+dirName）;//完整目录名称
item->setText（colItemType,"type=itGroupItem"）;//完整目录名称，第2列
item->setFlags（Qt:
:
ItemIsSelectable|Qt:
:
ItemIsUserCheckable|Qt:
:
ItemIsEnabled|Qt:
:
ItemIsAutoTristate）;//设置节点选项
item->setCheckState（colItem,Qt:
:
Checked）;//节点选中
item->setData（colItem,Qt:
:
UserRole,QVariant（dirName））;//设置角色为Qt:
:
UserRole的Data,存储完整目录名称
parItem->addChild（item）;//在父节点下面添加子节点
}
QStringMainWindow:
:
getFinalFolderName（constQString&fullPathName）
{//从一个完整目录名称里，获得最后的文件夹名称
intcnt=fullPathName.length（）;//字符串长度
inti=fullPathName.lastIndexOf（"/"）;//最后一次出现的位置
QStringstr=fullPathName.right（cnt-i-1）;//获得最后的文件夹的名称
returnstr;
}
actAddFolder的槽函数首先用文件对话框获取一个目录名称，再获取目录树的当前节点，然后调用自定义函数addFolderItem（）添加一个组节点，新添加的节点将会作为当前节点的子节点。
addFolderItem（）函数根据传递来的父节点parItem和目录全称dirName，创建并添加节点。
首先用自定义函数getFinalFolderName（）获取目录全称的最后一级的文件夹名称，这个文件夹名称将作为新建节点的标题；然后创建一个节点，创建时设置其节点类型为itGmnpItem，表示分组节点，再设置属性和关联数据，关联数据就是目录的全路径字符串；最后调用QTreeWidgetltem:
:
addChild（）函数，将创建的节点作为父节点的一个子节点添加到目录树。
添加图片文件节点
actAddFiles是添加图片文件节点的Action，目录树的当前节点为任何类型时这个Action都可用。
actAddFiles的槽函数，以及相关自定义函数的代码如下：
voidMainWindow:
:
on_actAddFiles_triggered（）
{//添加图片文件节点
QStringListfiles=QFileDialog:
:
getOpenFileNames（this,"选择一个或多个文件","","Images（*.jpg）"）;//多选文件
if（files.isEmpty（））//如果一个文件都没选
return;
QTreeWidgetItem*parItem,*item;//节点
item=ui->treeFiles->currentItem（）;//当前节点
if（item->type（）==itImageItem）//若当前节点是图片节点，取其父节点作为父节点
parItem=item->parent（）;
else//否则取当前节点为父节点
parItem=item;
for（inti=0;i{
QStringaFilename=files.at（i）;//得到StringList里的一行，也就是一个文件名
addImageItem（parItem,aFilename）;//添加一个图片节点
}
}
voidMainWindow:
:
addImageItem（QTreeWidgetItem*parItem,QStringaFilename）
{//添加一个图片文件节点
QIconicon（":
/images/icons/31.ico"）;//ICON的图标
QStringNodeText=getFinalFolderName（aFilename）;//获得最后的文件名称
QTreeWidgetItem*item;//节点
item=newQTreeWidgetItem（MainWindow:
:
itImageItem）;//新建节点时设定类型为itImageItem
item->setIcon（colItem,icon）;//设置图标
item->setText（colItem,NodeText）;//最后的文件夹名称
//item->setText（colSecond,"type=itImageItem;data="+aFilename）;//完整目录名称
item->setText（colItemType,"type=itImageItem"）;//完整目录名称
item->setFlags（Qt:
:
ItemIsSelectable|Qt:
:
ItemIsUserCheckable|Qt:
:
ItemIsEnabled|Qt:
:
ItemIsAutoTristate）;//设置节点选项
item->setCheckState（colItem,Qt:
:
Checked）;//节点选中
item->setData（colItem,Qt:
:
UserRole,QVariant（aFilename））;//设置节点Qt:
:
UserRole的Data,存储完整文件名称
parItem->addChild（item）;//在父节点下面添加子节点
}
actAddFiles的槽函数首先用QFileDialog:
:
getOpenFileNames（），获取图片文件列表，通过QTreeWidget:
:
currentItem（）函数获得目录树的当前节点item。
item->type（）将返回节点的类型，也就是创建节点时传递给构造函数的那个参数。
如果当前节点类型是图片节点（itlmageltem），就使用当前节点的父节点，作为将要添加的图片节点的父节点，否则就用当前节点作为父节点。
然后遍历所选图片文件列表，调用自定义函数addlmageltem（）逐一添加图片节点到父节点下。
addImageItem（）根据图片文件名称，创建一个节点并添加到父节点下面，在使用setData（）设置节点数据时，将图片带路径的文件名aFilename作为节点的数据，这个数据在单击节点打开图片时会用到。
当前节点变化后的响应
目录树上当前节点变化时，会发射currentItemChanged（）信号，为此信号创建槽函数，实现当前节点类型判断、几个Action的使能控制、显示图片等功能，代码如下：
voidMainWindow:
:
on_treeFiles_currentItemChanged（QTreeWidgetItem*current,QTreeWidgetItem*previous）
{//当前节点选择变化时触发
Q_UNUSED（previous）;
if（current==NULL）
return;
intvar=current->type（）;//节点的类型
switch（var）
{
caseitTopItem:
//顶层节点
ui->actAddFolder->setEnabled（true）;
ui->actAddFiles->setEnabled（true）;
ui->actDeleteItem->setE
升级会员 