Embedded QT tree browsing-navListView

Table of contents

1. What is tree browsing?

2. Example 

3. Browse design dependency files in tree format

 4. navListView usage process

4.1 Add files

4.2 QListView is upgraded to tree browsing

4.3 Tree browsing design 

4.4 Implementation of tree browsing function

4.5 Interface switching

4.6 Tree browsing to realize interface switching

---

1. What is tree browsing?

As shown in the picture below, there is a tree view on the left that can be clicked to switch pages. Tree view is often used when we make interfaces and is very practical.

2. Example 

Figure II:

3. Browse design dependency files in tree format

   For QT controls like this that need to be improved , first we need to get the .cpp and .h header files for tree browsing, which can be downloaded from the official website. Just add them to our project.

The image file mainly requires the icon file inside. If you don’t want to change the code, copy it together with the image folder , because when declaring the path in the code, it contains image . The colon at the beginning tells the compiler that it is under the resource file. Of course, you can also Change the code, it's optional. What is the icon file in the image directory and what is it used for? In fact, it is a vector library, just add it to the resource file .

 

There are many icons in it that we can choose to use. We just need to select the corresponding icon number in the code. 

 4. navListView usage process

4.1 Add files

1. Add navlistview.cpp and navlistview.h files to our own project

2. Add the /image/fontawesome-webfont.ttf file to the resource file of our own project

4.2 QListView is upgraded to tree browsing

   First we need to drag a QListView out. Don’t drag the wrong ListView, and then right-click to upgrade to. Here we try not to type by hand when doing this type of improvement. If you accidentally type by hand, you will be in trouble. Go to the .h header file Just copy . Then click Add.

4.3 Tree browsing design 

   After upgrading, we find that there is nothing, so what should we do? Open the project with QT .

Step 1: If you copied the folder to a new path, delete the .user file and open it again.

Step 2: Open it with QT and find this function;

void frmNavListView::initForm()

This function tells us how to use it. Just copy this paragraph and change it according to our own needs. This is an example, there will be many, so after copying, we need to delete it according to our needs. If we want to change the icon, we can do it according to the above. For the sent icon file, just modify the parameters in append accordingly.

Example: You can update, delete, and add according to your needs;

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

 At this point, the preliminary interface design is completed.

4.4 Implementation of tree browsing function

So can we switch the interface when we click? The answer is definitely yes, just use signal and slot functions. It defines the following signals in navlistview.h :

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

We usually use the second one because it is more comprehensive. I will write about the tree browsing here first. We need to first add a widget to realize interface switching.

4.5 Interface switching

  We usually use the second one because it is more comprehensive. I will write about the tree browsing here first. We need to first add a widget to realize interface switching.

Then I skipped designing the interface according to the requirements, mainly including the header file in the main interface:

#include "formcamera.h"

 Then new a pointer:

formcamera * camera;

camera = new forcamera;

Then just add it to StackWidget;

// Adding windows is in order. The first one added starting from 0 is called window 0 , followed by 1 2 3....

ui->stackedWidget->addWidget(realtimedata);

ui->stackedWidget->addWidget(face);

ui->stackedWidget->addWidget(camera);

But one thing to note is that the order of addition is from 0 1 2 3.

4.6 Tree browsing to realize interface switching

The previous preparations are completed, and now it’s time to realize the actual function. We use signal slots to implement interface switching by clicking on the tree browsing box:

The signal and slot function uses the slot function of the parent node plus the child node:

private slots:
 void slotItemClicked(int index, int parentIndex);

Associated signal and slot function:

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

 Signal and slot function:

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

Finish! ! !