Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved Display icons with text on a listwidget uniformly

    General and Desktop
    2
    5
    2803
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • g3ven
      g3ven last edited by

      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

      1 Reply Last reply Reply Quote 0
      • SGaist
        SGaist Lifetime Qt Champion last edited by

        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.

        Interested in AI ? www.idiap.ch
        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

        1 Reply Last reply Reply Quote 0
        • g3ven
          g3ven last edited by

          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

          1 Reply Last reply Reply Quote 0
          • SGaist
            SGaist Lifetime Qt Champion last edited by

            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.

            Interested in AI ? www.idiap.ch
            Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

            1 Reply Last reply Reply Quote 0
            • g3ven
              g3ven last edited by

              hi

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

              1 Reply Last reply Reply Quote 0
              • First post
                Last post