Display icons with text on a listwidget uniformly

g3ven

Hi,

I am a newbie in Qt Development. I need some help regarding displaying images on a listwidget.

I am adding thumbanil images to a list widget and display the same in an icon mode along with text. However, due to the aspect ratio of the thumnails , i get the images up and down and not in a uniform line. the beginning of the images are the same but they all end in a different line looking awkward. Could you please help me ? I have listed by efforts so far in programmatic way and through styling. I also need a border around the item when selected with some padding ... but i get it too close to the image

Qt code
// list the files in the list widget in the icon mode
for (int i=1; i<imgList.size(); ++i)
{
QSize grid(150,150);
QString imgPath = scaledDirPath.absoluteFilePath(imgList[i]);
ui->FilesList->setMovement(QListWidget::Static);
ui->FilesList->setViewMode(QListWidget::IconMode);
ui->FilesList->setWordWrap(true);
QString origImageName = (imgList[i].remove("_scaled", Qt::CaseSensitive));
QListWidgetItem *item = new QListWidgetItem(QIcon(imgPath),origImageName);

    item->setTextAlignment(Qt::AlignBottom);

    ui->FilesList->setGridSize(grid);

    ui->FilesList->addItem(new QListWidgetItem(QIcon(imgPath),origImageName));

 }

Qt STyling

QListWidget{
font-size:8pt;
font:url(:/Font/Fonts/Lato-Regular.ttf);
border:none;
background-color:white;
}

QListWidget::item{
color:black;
font-size:8pt;
padding: 10px 10px 10px 10px;
}

QListWidget::item:selected{
padding: 0px 0px 0px 0px;
border: 2px solid #82b9bc;
background-color:white;
color:black
}

I hope to get some help in this.

Thanks
Gayathri

SGaist

Hi and welcome to devnet,

If you want your icon to be nicely aligned then you need to scale the images used before creating the icons.

g3ven

Hi,
thank you for responding

I have scaled the images to a uniform size as well. When i keep the aspect ratio, some of the images adjust their widths and height to accomodate the aspect ration, therefore the discrepancy. I hope am understanding right

Thanks
Gayathri

SGaist

To keep the aspect ratio and have all images at the same size, you should have a "background image" at that size and then paint your newly scaled image on it. Doing so you'll have the letter or pillar box effect similar to what you can see when there's a 4:3 movie shown on a 16:9 TV.

g3ven

hi

Thank you so much , I will try the same . Thanks for responding