嵌入式QT 树形浏览 - navListView

简介: 嵌入式QT 树形浏览 - navListView

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

完成!!!

相关文章
|
6月前
|
开发框架 Linux C语言
C、C++、boost、Qt在嵌入式系统开发中的使用
C、C++、boost、Qt在嵌入式系统开发中的使用
211 1
|
4月前
|
机器学习/深度学习 人工智能 计算机视觉
好的资源-----打卡机+Arm+Qt+OpenCV嵌入式项目-基于人脸识别的考勤系统-----B站神经网络与深度学习,商城
好的资源-----打卡机+Arm+Qt+OpenCV嵌入式项目-基于人脸识别的考勤系统-----B站神经网络与深度学习,商城
|
6月前
|
索引 Windows
【qt】QTreeWidget 树形组件2
【qt】QTreeWidget 树形组件
53 0
|
6月前
|
C++
【qt】QTreeWidget 树形组件1
【qt】QTreeWidget 树形组件
61 0
|
6月前
|
测试技术 开发者 C++
【Qt 职业生涯规划】Qt 开发者的多元宇宙:从桌面到嵌入式,从2D到3D,你适合哪条路?
【Qt 职业生涯规划】Qt 开发者的多元宇宙:从桌面到嵌入式,从2D到3D,你适合哪条路?
406 1
|
6月前
用Qt画圣诞树——要画就画最丑的圣诞树
用Qt画圣诞树——要画就画最丑的圣诞树
|
6月前
|
编译器 C语言 C++
Qt6学习笔记一(安装、新建工程(cmake编译)、QPushButton、对象树、Qt窗口坐标系)
Qt6学习笔记一(安装、新建工程(cmake编译)、QPushButton、对象树、Qt窗口坐标系)
153 0
|
6月前
|
Ubuntu 数据库 C++
百度搜索:蓝易云【【嵌入式Qt开发入门】在Ubuntu下编写C++教程。】
请注意,这只是一个入门教程,Qt开发涉及到更广泛的主题和概念,例如信号与槽机制、界面设计、数据库操作等。建议参考Qt官方文档和教程,以深入了解和掌握嵌入式Qt开发。
171 0
嵌入式 QT QListWidget 显示列表视图的小部件类
嵌入式 QT QListWidget 显示列表视图的小部件类
嵌入式 QT QListWidget 显示列表视图的小部件类
|
传感器 消息中间件 网络协议
嵌入式QT- QT使用MQTT
嵌入式QT- QT使用MQTT