Display icons with text on a listwidget uniformly



  • 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


  • Lifetime Qt Champion

    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.



  • 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


  • Lifetime Qt Champion

    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.



  • hi

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.