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(",