1、什么是树形浏览
像下图这种左侧带有可以点击切换页面就是树形浏览，树形浏览在我们做界面的时候经常能够用到并且非常的实用。
2、示例
图二：
3、树形浏览设计依赖文件
像这种需要提升而来的 QT 控件，首先我们要拿到树形浏览的.cpp 和.h 头文件，可自行到官网下载。把他们添加到我们的工程即可。
image 文件主要是要里面的图标文件，如果不想改代码就连同 image 文件夹一同 copy，因为在代码中声明路径的时候带有 image，冒号开头是告诉编译器在资源文件下，当然你也可以改代码，这个随意。image 目录下那个图标文件到底是什么，有什么用呢？其实他就是一个矢量图库，把它添加到资源文件就 OK 啦.
里面有很多图标我们选择使用，只要在代码当中选择对应的图标号就可以了
4、navListView 使用过程
4.1 添加文件
1. 添加 navlistview.cpp 和 navlistview.h 文件到我们自己的工程
2. 添加 /image/fontawesome-webfont.ttf 文件到我们自己工程的资源文件中
4.2 QListView提升为树形浏览
首先我们要拖一个 QListView 出来，是 ListView 别拖错了哦，然后右键提升为，这里呢就是我们在做这一类提升的时候尽量不要手打，手打偶尔错了就很亏，去.h 头文件 copy 就行了。然后点添加即可。
4.3 树形浏览设计
提升之后我们发现并没有东西，那我们该怎么办呢？用 QT 打开工程。
第一步：如果你是把文件夹复制了新的路径就把这个.user 文件删了再打开。
第二步：用QT打开，然后找到这个函数;
void frmNavListView::initForm()
这个函数就是告诉我们的用法，只要复制这一段然后根据我们自己的需求改就好了，这个是示例，会有很多， 所以复制之后我们需要根据需求删减，然后想改图标的话就是根据上面我发出来的图标文件，将 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); }
到这里就完成前期的界面设计了。
4.4 树形浏览功能实现
那么我们点击的时候能不能切换界面呢？答案肯定是可以的，使用信号与槽函数即可。它在 navlistview.h 中定义了以下几个信号：
void pressed(const QString &text, const QString &parentText);//参数携带的是子主题和 副主题的名字 void pressed(int index, int parentIndex);//参数是第几个父节点和第几个子节点 void pressed(int childIndex); //参数是第几个子节点
我们一般多用第二个，因为比较全面一点，树形浏览我先写到这里，我们要先添加一个 widget 来实现界面切换。
4.5 界面切换
我们一般多用第二个，因为比较全面一点，树形浏览我先写到这里，我们要先添加一个 widget 来实现界面切换。
然后根据要求设计界面就跳过了，主要是在主界面里面先把头文件包含进来：
#include "formcamera.h"
然后new一个指针：
formcamera * camera;
camera = new forcamera;
然后就是添加到StackWidget即可；
//添加窗口是有顺序的 ，从 0 开始第一个添加的叫 0 窗口 依次往后是 1 2 3 ....
ui->stackedWidget->addWidget(realtimedata);
ui->stackedWidget->addWidget(face);
ui->stackedWidget->addWidget(camera);
但是需要注意的一点就是添加的顺序是从0 1 2 3这个样子排下去的。
4.6 树形浏览实现界面切换
前面的准备工作完成了，到了真正功能实现的环节，我们采用信号槽的方式来实现点击树形浏览框实现界面切换：
信号槽函数采用第几个父节点加第几个子节点的槽函数：
private slots: 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); } } }
完成！！！
