Qt创建列表，通过外部按钮控制列表的选中下移、上移以及左侧图标的显现

news2024/9/22 17:26:32

引言

项目中需要使用列表QListWidget，但是不能直接拿来使用。需要创建一个列表，通过向上和向下的按钮来向上或者向下移动选中列表项，当当前项背选中再去点击确认按钮，会在列表项的前面出现一个图标。

实现效果

本实例实现的效果如下：
在这里插入图片描述

实现思路

思路一

直接采用QListWidget控件来实现，但是会有一个问题，每项前面的图标开始时隐藏，当选中当前项，然后点击确认按钮的时候，会出现左侧的图标挤动右侧的文本，导致整列的文本中，左侧出现图标的项的文本，与没有出现的图标的项的文本不对齐。

效果如下：

在这里插入图片描述

核心代码

该思路实现的核心代码如下：

void MainWindow::initListWidget()//初始化列表
{
   
    QStringList itemsText = {
   "一年级","二年级","三年级","四年级","五年级"};
    for(const QString& str:itemsText){
    
        QListWidgetItem *item = new QListWidgetItem(QIcon(""),str,ui->listWidget);//初始列表项，虽设置了图标，但是没有添加实际意义上的图标图片，只有一个空图标，不占任何的位置
    }
    ui->listWidget->setCurrentRow(0);//设置默认选中第一行
}

void MainWindow::on_pushButton_clicked()//向上
{
   
    int nRow = ui->listWidget->currentRow();

    if(nRow > 0){
   //行下标从0开始计算
        ui->listWidget->setCurrentRow(nRow -1);
    }
}

void MainWindow::on_pushButton_2_clicked()//向下
{
   
     int nCount = ui->listWidget->count();
     int nRow = ui->listWidget->currentRow();

     if(nRow < nCount -1){
   //行下标从0开始计算
         ui->listWidget->setCurrentRow(nRow +1);//要想循环向下，将判断条件改为nRow < nCount
     }
}

void MainWindow::on_pushButton_3_clicked()//确认
{
   
     QListWidgetItem *pItem = ui->listWidget->currentItem();
     QIcon icon(":/new/prefix1/images/https___icon-park.com_imagefiles_location_map_pin_red10 (1).svg");
     pItem->setIcon(icon);
}

由于之前的图标是一个‘空图标’，不占任何位置，所以当点击确认设置图标的图像时会出现挤压后面的文本。

附加思路

可以在思路一的基础上将

 QListWidgetItem *item = new QListWidgetItem(QIcon(""),str,ui->listWidget);

中的‘空图标’变为一个透明图标，先占位置，后面点击确认按钮的时候在加载要显示的图标，就可以避免加载图标之后的挤压文本导致的文本偏移。

思路二

采用QWidget实现每一项来模拟列表的上下移动选中，和确认后左侧出现图标。

实现效果

在这里插入图片描述

核心代码

该思路实现没有问题，但是较复杂一点。
下面是ui设计器中的控件使用：
在这里插入图片描述
红色框圈出来的部分是对应的实现效果中的控件使用。
其中使用ui设计器的时候，在属性栏设置了下面这几个窗口的高度。

另外最外层的窗口BackGroundWidget也被设置了大小。

布局的属性页做了修改。

在这里插入图片描述

差不多就这些。

下面是代码：
MainWindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QMap>
#include <QLabel>

class QListWidgetItem;
QT_BEGIN_NAMESPACE
namespace