Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to create QListWidgetItem with aligned left and right text in Qt?
QtWS25 Last Chance

How to create QListWidgetItem with aligned left and right text in Qt?

Scheduled Pinned Locked Moved Solved General and Desktop
7 Posts 6 Posters 294 Views
  • 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.
  • Y Offline
    Y Offline
    YJMForgive
    wrote on last edited by
    #1

    I'm trying to create a QListWidget where each QListWidgetItem displays text in two parts:

    • Left-aligned text on the left side
    • Right-aligned text on the right side

    Example of desired layout:
    alt text

    I know I can add spaces between the left and right text, but this isn't reliable since:

    1. Font width can vary
    2. Widget width can change
    3. Text lengths are dynamic

    What's the proper way to implement this kind of layout with QListWidget?

    Btw, I'm using Qt 6.8 on Windows.

    Pl45m4P 1 Reply Last reply
    0
    • InTheBeningingI Offline
      InTheBeningingI Offline
      InTheBeninging
      wrote on last edited by
      #7

      Using a custom QStyledItemDelegate like this

      class CustomListWidgetItemDelegate : public QStyledItemDelegate {
      public:
          void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override {
              painter->save();
              if (option.state & QStyle::State_Selected)
                  painter->fillRect(option.rect, option.palette.highlight());
              else if (option.state & QStyle::State_MouseOver)
                  painter->fillRect(option.rect, option.palette.highlight());
              
              //left aligned
              if(index.data(Qt::DisplayRole).isValid()) {
                  QString text = index.data(Qt::DisplayRole).toString();
                  painter->drawText(QPoint(option.rect.left() + 5, option.rect.bottom()-5), text);
              }
              //right aligned
              if(index.data(Qt::UserRole).isValid()) {
                  QString text = index.data(Qt::UserRole).toString();
                  int textwidth = painter->fontMetrics().boundingRect(text).width();
                  painter->drawText(QPoint(option.rect.right() - textwidth - 5, option.rect.bottom()-5), text);;
              }
              //fixed
              if(index.data(Qt::UserRole + 1).isValid()) {
                  QString text = index.data(Qt::UserRole + 1).toString();
                  painter->drawText(QPoint(200, option.rect.bottom()-5), text);;
              }
              painter->restore();
          }
      };
      

      Now that theres more than one text, the other texts are stored in UserRoles

          //install delegate on the ListWidget
          ui->listWidget->setItemDelegate(new CustomListWidgetItemDelegate);
      
          QListWidgetItem * item = nullptr;
          for(int i = 0; i < 5; i++) {
              item = new QListWidgetItem("ListItem");
              item->setData(Qt::UserRole, "Yep");
              item->setData(Qt::UserRole + 1, "Maybe");
              ui->listWidget->addItem(item);
          }
      
      1 Reply Last reply
      3
      • dheerendraD Offline
        dheerendraD Offline
        dheerendra
        Qt Champions 2022
        wrote on last edited by
        #2

        Use text Alignment. Did you get a chance to look at the doc here
        https://doc.qt.io/qt-6/qlistwidgetitem.html#setTextAlignment

        Dheerendra
        @Community Service
        Certified Qt Specialist
        http://www.pthinks.com

        JonBJ 1 Reply Last reply
        0
        • dheerendraD dheerendra

          Use text Alignment. Did you get a chance to look at the doc here
          https://doc.qt.io/qt-6/qlistwidgetitem.html#setTextAlignment

          JonBJ Offline
          JonBJ Offline
          JonB
          wrote on last edited by
          #3

          @dheerendra How would you use that to place some text at left and some text at right?

          1 Reply Last reply
          1
          • Y YJMForgive

            I'm trying to create a QListWidget where each QListWidgetItem displays text in two parts:

            • Left-aligned text on the left side
            • Right-aligned text on the right side

            Example of desired layout:
            alt text

            I know I can add spaces between the left and right text, but this isn't reliable since:

            1. Font width can vary
            2. Widget width can change
            3. Text lengths are dynamic

            What's the proper way to implement this kind of layout with QListWidget?

            Btw, I'm using Qt 6.8 on Windows.

            Pl45m4P Offline
            Pl45m4P Offline
            Pl45m4
            wrote on last edited by
            #4

            @YJMForgive

            Maybe you want to check how QShortcut is implemented for QAction and QMenu, because this is what you are showing there.


            If debugging is the process of removing software bugs, then programming must be the process of putting them in.

            ~E. W. Dijkstra

            1 Reply Last reply
            2
            • dheerendraD Offline
              dheerendraD Offline
              dheerendra
              Qt Champions 2022
              wrote on last edited by
              #5

              @JonB Read the question on more time. My interpretation was wrong. Same widget align left/right. No direct way.

              Dheerendra
              @Community Service
              Certified Qt Specialist
              http://www.pthinks.com

              1 Reply Last reply
              1
              • hskoglundH Offline
                hskoglundH Offline
                hskoglund
                wrote on last edited by
                #6

                Instead of using a QListWidget you could try using a QTableWidget.
                With 2 columns of text (one left- and one right-aligned) and gridlines turned off it should look the same.

                1 Reply Last reply
                0
                • InTheBeningingI Offline
                  InTheBeningingI Offline
                  InTheBeninging
                  wrote on last edited by
                  #7

                  Using a custom QStyledItemDelegate like this

                  class CustomListWidgetItemDelegate : public QStyledItemDelegate {
                  public:
                      void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override {
                          painter->save();
                          if (option.state & QStyle::State_Selected)
                              painter->fillRect(option.rect, option.palette.highlight());
                          else if (option.state & QStyle::State_MouseOver)
                              painter->fillRect(option.rect, option.palette.highlight());
                          
                          //left aligned
                          if(index.data(Qt::DisplayRole).isValid()) {
                              QString text = index.data(Qt::DisplayRole).toString();
                              painter->drawText(QPoint(option.rect.left() + 5, option.rect.bottom()-5), text);
                          }
                          //right aligned
                          if(index.data(Qt::UserRole).isValid()) {
                              QString text = index.data(Qt::UserRole).toString();
                              int textwidth = painter->fontMetrics().boundingRect(text).width();
                              painter->drawText(QPoint(option.rect.right() - textwidth - 5, option.rect.bottom()-5), text);;
                          }
                          //fixed
                          if(index.data(Qt::UserRole + 1).isValid()) {
                              QString text = index.data(Qt::UserRole + 1).toString();
                              painter->drawText(QPoint(200, option.rect.bottom()-5), text);;
                          }
                          painter->restore();
                      }
                  };
                  

                  Now that theres more than one text, the other texts are stored in UserRoles

                      //install delegate on the ListWidget
                      ui->listWidget->setItemDelegate(new CustomListWidgetItemDelegate);
                  
                      QListWidgetItem * item = nullptr;
                      for(int i = 0; i < 5; i++) {
                          item = new QListWidgetItem("ListItem");
                          item->setData(Qt::UserRole, "Yep");
                          item->setData(Qt::UserRole + 1, "Maybe");
                          ui->listWidget->addItem(item);
                      }
                  
                  1 Reply Last reply
                  3
                  • Y YJMForgive has marked this topic as solved on

                  • Login

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved