Navigation dans l'arborescence QT intégrée-navListView

Table des matières

1. Qu’est-ce que le parcours dans les arbres ?

2. Exemple 

3. Parcourez les fichiers de dépendances de conception au format arborescent

 4. Processus d'utilisation de navListView

4.1 Ajouter des fichiers

4.2 QListView est mis à niveau vers la navigation arborescente

4.3 Conception de l'arborescence 

4.4 Implémentation de la fonction de navigation arborescente

4.5 Commutation d'interface

4.6 Parcourir l'arborescence pour réaliser la commutation d'interface

---

1. Qu’est-ce que le parcours dans les arbres ?

Comme le montre l'image ci-dessous, il y a une arborescence sur la gauche sur laquelle on peut cliquer pour changer de page. L'arborescence est souvent utilisée lorsque nous créons des interfaces et est très pratique.

2. Exemple 

Figure II :

3. Parcourez les fichiers de dépendances de conception au format arborescent

   Pour les contrôles QT comme celui-ci qui doivent être améliorés , nous devons d'abord obtenir les fichiers d'en-tête .cpp et .h pour la navigation dans l'arborescence, qui peuvent être téléchargés sur le site officiel. Ajoutez-les simplement à notre projet.

Le fichier image nécessite principalement le fichier icône à l'intérieur. Si vous ne souhaitez pas modifier le code, copiez-le avec le dossier image , car lors de la déclaration du chemin dans le code, il contient image . Les deux points au début indiquent au compilateur qu'il se trouve sous le fichier de ressources. Bien sûr, vous pouvez également modifier le code, c'est facultatif. Qu'est-ce que le fichier icône dans le répertoire image et à quoi sert-il ? En fait, c'est une bibliothèque vectorielle, il suffit de l'ajouter au fichier de ressources .

 

Il contient de nombreuses icônes que nous pouvons choisir d'utiliser. Il suffit de sélectionner le numéro d'icône correspondant dans le code. 

 4. Processus d'utilisation de navListView

4.1 Ajouter des fichiers

1. Ajoutez les fichiers navlistview.cpp et navlistview.h à notre propre projet

2. Ajoutez le fichier /image/fontawesome-webfont.ttf au fichier de ressources de notre propre projet

4.2 QListView est mis à niveau vers la navigation arborescente

   Nous devons d'abord faire glisser un QListView . Ne faites pas glisser le mauvais ListView, puis cliquez avec le bouton droit pour effectuer la mise à niveau. Ici, nous essayons de ne pas taper à la main lorsque vous effectuez ce type d'amélioration. Si vous tapez accidentellement à la main, vous avoir des ennuis. Allez dans le fichier d'en- tête .h Copiez simplement . Cliquez ensuite sur Ajouter.

4.3 Conception de l'arborescence 

   Après la mise à niveau, nous constatons qu’il n’y a rien, alors que devons-nous faire ? Ouvrez le projet avec QT .

Étape 1 : Si vous avez copié le dossier vers un nouveau chemin, supprimez le fichier .user et rouvrez-le.

Étape 2 : Ouvrez-le avec QT et recherchez cette fonction ;

void frmNavListView::initForm()

Cette fonction nous indique comment l'utiliser. Copiez simplement ce paragraphe et modifiez-le en fonction de nos propres besoins. Ceci est un exemple, il y en aura beaucoup, donc après la copie, nous devons le supprimer en fonction de nos besoins. Si nous voulons changez l'icône, nous pouvons le faire selon ce qui précède. Pour le fichier d'icône envoyé, modifiez simplement les paramètres en annexe en conséquence.

Exemple : vous pouvez mettre à jour, supprimer et ajouter selon vos besoins ;

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

 À ce stade, la conception préliminaire de l’interface est terminée.

4.4 Implémentation de la fonction de navigation arborescente

Alors peut-on changer d’interface lorsque l’on clique ? La réponse est définitivement oui, utilisez simplement les fonctions de signal et de slot. Il définit les signaux suivants dans navlistview.h :

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

Nous utilisons généralement le second car il est plus complet. J'écrirai ici en premier sur la navigation dans l'arborescence. Nous devons d'abord ajouter un widget pour réaliser la commutation d'interface.

4.5 Commutation d'interface

  Nous utilisons généralement le second car il est plus complet. J'écrirai ici en premier sur la navigation dans l'arborescence. Nous devons d'abord ajouter un widget pour réaliser la commutation d'interface.

Ensuite, j'ai ignoré la conception de l'interface en fonction des exigences, en incluant principalement le fichier d'en-tête dans l'interface principale :

#include "formcamera.h"

 Puis nouveau un pointeur :

formcamera * camera;

camera = new forcamera;

Ensuite, ajoutez-le simplement à StackWidget ;

// L'ajout de fenêtres est dans l'ordre. La première ajoutée à partir de 0 s'appelle fenêtre 0 , suivie de 1 2 3....

ui->stackedWidget->addWidget(realtimedata);

ui->stackedWidget->addWidget(face);

ui->stackedWidget->addWidget(caméra);

Mais une chose à noter est que l’ordre d’addition va de 0 1 2 3.

4.6 Parcourir l'arborescence pour réaliser la commutation d'interface

Les préparatifs précédents sont terminés et il est maintenant temps de réaliser la fonction réelle. Nous utilisons des emplacements de signal pour implémenter la commutation d'interface en cliquant sur la case de navigation arborescente :

La fonction signal et slot utilise la fonction slot du nœud parent plus le nœud enfant :

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

Fonction signal et slot associée :

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

 Fonction signal et slot :

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

Finition! ! !