QT界面树形浏览与界面切换简单设计

什么是树形浏览

像这种左侧带有可以点击切换页面就是树形浏览，树形浏览在我们做界面的时候经常能够用到并且非常的实用有木有。

我们要做的树形浏览是什么样子的

首先给你们看一下我们要做的树形浏览大概的样子。

多种颜色，各种图标，随心设计，是不是感觉深情气爽，按耐不住内心的躁动瞬间想来一发树形浏览设计了呢？

树形浏览设计依赖文件

像这种需要提升而来的QT控件，首先我们要拿到树形浏览的.cpp和.h头文件，可自行到官网下载，也可私信小编一键获取。把他们添加到我们的工程即可。

image文件主要是要里面的图标文件，如果不想改代码就连同image文件夹一同copy，因为在代码中声明路径的时候带有image，冒号开头是告诉编译器在资源文件下，当然你也可以改代码，这个随意。

这个时候你肯定会疑惑那个图标文件到底是什么东东，有什么用呢？其实他就是一个矢量图库，把它添加到资源文件就OK啦。

里面有很多图标供我们选择使用，只要在代码中选择对应的图标号即可。

QListView提升为树形浏览

首先我们要拖一个QListView出来，是listview别拖错了哦，然后右键提升为，这里呢就是我们在做这一类提升的时候尽量不要手打，手打偶尔错了就很亏，去.h头文件copy就行了。

NavListView

添加，提升就完事了。

树形浏览设计，copy ，copy，copy

第阶段的学习，以理解加copy为主，提升之后我们发现并没有东西，那我们该怎么办呢？就好比一级学q还是学w呢？这时候你旁边的室友可能会告诉你一级学个F，跑的快还能空间位移，是不是很酷？我们在初级学习阶段呢就是参考别人的设计以copy为主，当然我们要去尽可能的理解代码加点自己的操作进去。絮叨了这么多，回到主题，还是开头就讲的那个文件，我们看到里面有pro文件，我们用QT打开。
第一步：如果你是把文件夹复制了新的路径就把这个.user文件删了再打开。

第二步：用qt打开，然后找到这个函数：

void frmNavListView::initForm()

这个函数就是告诉我们的用法，只要copy这一段然后根据我们自己的需求改就好了，这个是示例，会有很多，所以copy之后我们需要根据需求删减，然后想改图标的话就是根据上面我发出来的图标文件，将append里面的参数对应修改就好啦。

改文字标题什么的就不用我说了吧。
我把这个示例代码全部都放进来吧，谁让我是一个善良天真可爱的小博主呢。

void frmNavListView::initForm()
{//设置节点数据,格式 标题|父节点标题(父节点为空)|是否展开|提示信息|左侧图标QStringList items;items.append("主界面||0|正常|");items.append("地图监控|主界面|||0xf03e");items.append("视频监控|主界面|||0xf03d");items.append("设备监控|主界面|||0xf108");items.append("系统设置||0||");items.append("防区信息|系统设置|||0xf0e8");items.append("位置调整|系统设置|||0xf060");items.append("地图编辑|系统设置|||0xf03e");items.append("警情查询||0|120|");items.append("记录查询|警情查询|||0xf073");items.append("图像查询|警情查询|||0xf03e");items.append("视频查询|警情查询|||0xf03d");items.append("数据回放|警情查询|||0xf080");items.append("帮助文档||1|1024|");ui->navListView1->setItems(items.join(","));ui->navListView2->setItems(items.join(","));ui->navListView3->setItems(items.join(","));ui->navListView4->setItems(items.join(","));ui->navListView1->setTipVisible(true);ui->navListView2->setTipVisible(false);ui->navListView3->setTipVisible(false);ui->navListView4->setTipVisible(false);ui->navListView2->setSeparateColor(QColor(255, 255, 255));ui->navListView2->setChildBgNormalColor(QColor(238, 238, 238));ui->navListView2->setChildBgSelectedColor(QColor(255, 69, 0));ui->navListView2->setChildBgHoverColor(QColor(255, 160, 122));ui->navListView2->setChildTextNormalColor(QColor(10, 10, 10));ui->navListView2->setChildTextSelectedColor(QColor(250, 250, 250));ui->navListView2->setChildTextHoverColor(QColor(10, 10, 10));ui->navListView2->setParentBgNormalColor(QColor(238, 238, 238));ui->navListView2->setParentBgSelectedColor(QColor(255, 69, 0));ui->navListView2->setParentBgHoverColor(QColor(255, 160, 122));ui->navListView2->setParentTextNormalColor(QColor(10, 10, 10));ui->navListView2->setParentTextSelectedColor(QColor(250, 250, 250));ui->navListView2->setParentTextHoverColor(QColor(10, 10, 10));ui->navListView3->setSeparateColor(QColor(193, 193, 193));ui->navListView3->setChildBgNormalColor(QColor(255, 255, 255));ui->navListView3->setChildBgSelectedColor(QColor(230, 230, 230));ui->navListView3->setChildBgHoverColor(QColor(240, 240, 240));ui->navListView3->setChildTextNormalColor(QColor(19, 36, 62));ui->navListView3->setChildTextSelectedColor(QColor(19, 36, 62));ui->navListView3->setChildTextHoverColor(QColor(19, 36, 62));ui->navListView3->setParentBgNormalColor(QColor(255, 255, 255));ui->navListView3->setParentBgSelectedColor(QColor(230, 230, 230));ui->navListView3->setParentBgHoverColor(QColor(240, 240, 240));ui->navListView3->setParentTextNormalColor(QColor(19, 36, 62));ui->navListView3->setParentTextSelectedColor(QColor(19, 36, 62));ui->navListView3->setParentTextHoverColor(QColor(19, 36, 62));ui->navListView4->setSeparateColor(QColor(32, 53, 74));ui->navListView4->setChildBgNormalColor(QColor(52, 73, 94));ui->navListView4->setChildBgSelectedColor(QColor(24, 189, 155));ui->navListView4->setChildBgHoverColor(QColor(24, 189, 155));ui->navListView4->setChildTextNormalColor(QColor(250, 250, 250));ui->navListView4->setChildTextSelectedColor(QColor(230, 230, 230));ui->navListView4->setChildTextHoverColor(QColor(10, 10, 10));ui->navListView4->setParentBgNormalColor(QColor(52, 73, 94));ui->navListView4->setParentBgSelectedColor(QColor(24, 189, 155));ui->navListView4->setParentBgHoverColor(QColor(24, 189, 155));ui->navListView4->setParentTextNormalColor(QColor(250, 250, 250));ui->navListView4->setParentTextSelectedColor(QColor(230, 230, 230));ui->navListView4->setParentTextHoverColor(QColor(10, 10, 10));ui->navListView1->setExpendMode(NavListView::ExpendMode_SingleClick);  //单击展开ui->navListView2->setExpendMode(NavListView::ExpendMode_DoubleClick); //双击展开ui->navListView3->setExpendMode(NavListView::ExpendMode_SingleClick); ui->navListView4->setExpendMode(NavListView::ExpendMode_DoubleClick);
}

做到这里就完成前期界面设计啦。

树形浏览功能实现

那么我们点击的时候能不能切换界面呢？答案肯定是可以的，每次写到这里我就不想再絮叨那么多了，可是秉承着乐观向上的生活态度，为了积极响应上级号召，应领导与客户的要求，跟上时代的步伐，首先介绍一下信号槽函数：

void pressed(const QString &text, const QString &parentText);   //参数携带的是子主题和副主题的名字
void pressed(int index, int parentIndex);       //  参数是第几个父节点和第几个子节点
void pressed(int childIndex);     //　　参数是第几个子节点

我们一般多用第二个，因为比较全面一点，树形浏览我先写到这里，我们要先添加一个widget来实现界面切换。

界面切换

要想实现界面切换，我们要用到QStackWidget，然后再添加新文件QT设计类，选择widget，然后就是next就可以了，中间根据爱好和规则取名字就ok。

然后根据要求设计界面就跳过了，主要是在主界面里先把头文件包含进来：

#include "formcamera.h"

然后new一个指针：

formcamera *camera;

camera = new formcamera;

然后就是添加到StackWidget即可

//添加窗口是有顺序的 ，从0开始  第一个添加的叫0窗口 依次往后是 1 2 3 ....ui->stackedWidget->addWidget(realtimedata);ui->stackedWidget->addWidget(face);ui->stackedWidget->addWidget(camera);

需要注意的一点就是添加的顺序是从0 1 2 3 …这样子排下去的。

树形浏览实现界面切换

前面的准备工作都做完了，就到了真正功能实现的环节，我们采用信号槽的方式来实现点击树形浏览框实现界面切换：

信号槽函数采用第几个父节点加第几个子节点的槽函数：

   void slotItemClicked(int index, int parentIndex);

关联信号槽函数：

 connect(ui->listView,SIGNAL(pressed(int,int)),this,SLOT(slotItemClicked(int,int)));

信号槽函数：

void mainWidget::slotItemClicked(int index, int parentIndex)
{qDebug("parentIndex = %d   index = %d",parentIndex,index);if(parentIndex == 1){ui->stackedWidget->setCurrentIndex(index+1);}else if(parentIndex == 0){if(index == 0){ui->stackedWidget->setCurrentIndex(index);}}
}

到这里简单的树形浏览和界面切换就完成啦，初出江湖的小码农将最进新学的知识及时分享给大家，希望大佬们批评指点，即是分享，也是自己对知识点的一点总结，希望能在这个平台学到更多，每天进步一点点，加油哦！最后实用干货就是有没有和我一样刚毕业初入行业一起成长的小伙伴呢，我这里有很多大学时期整理的资料可以一起学习，加我私信获取，一起进步哦，加油！