Qt基础教程之QTreeWidget和QDockWidget用法详解.docx
- 文档编号:15615851
- 上传时间:2023-07-06
- 格式:DOCX
- 页数:19
- 大小:73.41KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Qt 基础教程 QTreeWidget QDockWidget 用法 详解