Navegación en árbol QT integrado-navListView

Tabla de contenido

1. ¿Qué es el ramoneo de árboles?

2. Ejemplo

3. Busque archivos de dependencia de diseño en formato de árbol

4. Proceso de uso de navListView

4.1 Agregar archivos

4.2 QListView se actualiza a navegación en árbol

4.3 Diseño de navegación en árbol

4.4 Implementación de la función de exploración de árboles

4.5 Conmutación de interfaz

4.6 Navegación en árbol para realizar el cambio de interfaz

1. ¿Qué es el ramoneo de árboles?

Como se muestra en la imagen a continuación, hay una vista de árbol a la izquierda en la que se puede hacer clic para cambiar de página. La vista de árbol se usa a menudo cuando creamos interfaces y es muy práctica.

2. Ejemplo

Figura II:

3. Busque archivos de dependencia de diseño en formato de árbol

Para controles QT como este que deben mejorarse , primero debemos obtener los archivos de encabezado .cpp y .h para la navegación en árbol, que se pueden descargar del sitio web oficial. Simplemente agréguelos a nuestro proyecto.

El archivo de imagen requiere principalmente el archivo de ícono dentro. Si no desea cambiar el código, cópielo junto con la carpeta de imágenes , porque al declarar la ruta en el código, contiene imagen . Los dos puntos al principio le dicen al compilador que está debajo del archivo de recursos. Por supuesto, también puedes cambiar el código, es opcional. ¿Qué es el archivo de icono en el directorio de imágenes y para qué se utiliza? De hecho, es una biblioteca de vectores, simplemente agréguela al archivo de recursos .

Hay muchos íconos que podemos elegir usar, solo necesitamos seleccionar el número de ícono correspondiente en el código.

4. Proceso de uso de navListView

4.1 Agregar archivos

1. Agregue los archivos navlistview.cpp y navlistview.h a nuestro propio proyecto

2. Agregue el archivo /image/fontawesome-webfont.ttf al archivo de recursos de nuestro propio proyecto.

4.2 QListView se actualiza a navegación en árbol

Primero necesitamos arrastrar un QListView . No arrastre el ListView incorrecto y luego haga clic derecho para actualizar. Aquí tratamos de no escribir a mano al realizar este tipo de mejora. Si accidentalmente escribe a mano, lo hará. estar en problemas Vaya al archivo de encabezado .h Simplemente copie . Luego haga clic en Agregar.

4.3 Diseño de navegación en árbol

Después de actualizar, encontramos que no hay nada, entonces, ¿qué debemos hacer? Abra el proyecto con QT .

Paso 1: Si copió la carpeta en una nueva ruta, elimine el archivo .user y ábralo nuevamente.

Paso 2: Ábrelo con QT y busca esta función;

void frmNavListView::initForm()

Esta función nos dice cómo usarla. Simplemente copie este párrafo y cámbielo según nuestras propias necesidades. Este es un ejemplo, habrá muchos, por lo que después de copiarlo, debemos eliminarlo según nuestras necesidades. Si queremos cambiar el ícono, podemos hacerlo de acuerdo con lo anterior. Para el archivo de ícono enviado, simplemente modifique los parámetros en el anexo en consecuencia.

Ejemplo: Puede actualizar, eliminar y agregar según sus necesidades;

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

En este punto, se completa el diseño preliminar de la interfaz.

4.4 Implementación de la función de exploración de árboles

Entonces, ¿podemos cambiar la interfaz cuando hacemos clic? La respuesta es definitivamente sí, solo use funciones de señal y ranura. Define las siguientes señales en navlistview.h :

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

Generalmente usamos el segundo porque es más completo. Primero escribiré sobre la navegación en árbol aquí. Primero debemos agregar un widget para realizar el cambio de interfaz.

4.5 Conmutación de interfaz

Generalmente usamos el segundo porque es más completo. Primero escribiré sobre la navegación en árbol aquí. Primero debemos agregar un widget para realizar el cambio de interfaz.

Luego omití diseñar la interfaz de acuerdo con los requisitos, principalmente incluyendo el archivo de encabezado en la interfaz principal:

#include "formcamera.h"

Luego nuevo un puntero:

formcamera * camera;

camera = new forcamera;

Luego simplemente agréguelo a StackWidget;

// Agregar ventanas está en orden. La primera que se agrega a partir de 0 se llama ventana 0 , seguida de 1 2 3....

ui->stackedWidget->addWidget(datos en tiempo real);

ui->stackedWidget->addWidget(cara);

ui->stackedWidget->addWidget(cámara);

Pero una cosa a tener en cuenta es que el orden de suma es de 0 1 2 3.

4.6 Navegación en árbol para realizar el cambio de interfaz

Se completaron los preparativos anteriores y ahora es el momento de realizar la función real. Usamos ranuras de señal para implementar el cambio de interfaz haciendo clic en el cuadro de navegación del árbol:

La función de señal y ranura utiliza la función de ranura del nodo principal más el nodo secundario:

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

Función de señal y ranura asociada:

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

Función de señal y ranura:

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

¡Finalizar! ! !