嵌入式QT 树形浏览 - navListView

冷不防 2024-03-16 18:35 99阅读 0赞

**目录**

1、什么是树形浏览

2、示例

3、树形浏览设计依赖文件

4、navListView 使用过程

4.1 添加文件

4.2 QListView提升为树形浏览

4.3 树形浏览设计

4.4 树形浏览功能实现

4.5 界面切换

4.6 树形浏览实现界面切换

--------------------

### 1、什么是树形浏览 ###

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

![0c31219639ad4aa2aaf90eecff820bc8.png][]

### 2、示例 ###

![e35bfb8a001c4833998495c5b9e2fc36.png][]

图二：

![18fd2d7bb43a4622b3a9d165b7aa943d.png][]

### 3、树形浏览设计依赖文件 ###

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

![5ffed1ccee0f4508ba22b38a1e4aa2b4.png][]

image 文件主要是要里面的图标文件，如果不想改代码就连同 image 文件夹一同 copy，因为在代码中声明路径的时候带有 image，冒号开头是告诉编译器在资源文件下，当然你也可以改代码，这个随意。image 目录下那个图标文件到底是什么，有什么用呢？其实他就是一个矢量图库，把它添加到资源文件就 OK 啦.

![5c1049a297fb43b1835f03305e756a38.png][]

![b89b34da41264fec9ba2c4bd245f3749.png][]

里面有很多图标我们选择使用，只要在代码当中选择对应的图标号就可以了

### 4、navListView 使用过程 ###

#### 4.1 添加文件 ####

1.  添加  navlistview.cpp  和  navlistview.h  文件到我们自己的工程

2.  添加  /image/fontawesome-webfont.ttf  文件到我们自己工程的资源文件中

#### 4.2 QListView提升为树形浏览 ####

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

![d06d09fc994148b0bdec5eb6d465c0c8.png][]

#### 4.3 树形浏览设计 ####

提升之后我们发现并没有东西，那我们该怎么办呢？用 QT 打开工程。

第一步：如果你是把文件夹复制了新的路径就把这个 .user  文件删了再打开。

![e38d2d121dd244a6b136b6ea791f733e.png][]

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

void frmNavListView::initForm()

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

![fcbed28355eb455592dfc74489910bfc.png][]

![a4fc3c9212b94ff6bf7324446cf28ca2.png][]

示例：可以根据自己的需要进行更新、删除、增添；

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  来实现界面切换。

![7add5064917749118bf68a2e3632023f.png][]

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

#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);
     } } }

完成！！！

[0c31219639ad4aa2aaf90eecff820bc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c2677bb34bc948e497b8bffb48211a8b.png
[e35bfb8a001c4833998495c5b9e2fc36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/6ba843021741464b9647ebea9fce83ab.png
[18fd2d7bb43a4622b3a9d165b7aa943d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d87628766cdf4a0d833732ccde29a3fb.png
[5ffed1ccee0f4508ba22b38a1e4aa2b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/8aa3cdbed0fc4d50aa8edd3c80dfc7e3.png
[5c1049a297fb43b1835f03305e756a38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/7c24bd8b21214ab5bf49384af9c1332a.png
[b89b34da41264fec9ba2c4bd245f3749.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/63fa6a00ff524e7e98b2ddd7b1b8efb0.png
[d06d09fc994148b0bdec5eb6d465c0c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9bad5177b4cb4f25a35ec2b6400af9ee.png
[e38d2d121dd244a6b136b6ea791f733e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/7676281d7a074436897d62597380b619.png
[fcbed28355eb455592dfc74489910bfc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/1da01d50375e4a698276a2f3f6bac6e3.png
[a4fc3c9212b94ff6bf7324446cf28ca2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/de91a00197b24882ba797d23819f23ff.png
[7add5064917749118bf68a2e3632023f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e6bb68b80db44acbbae7051ca0d4aa8d.png