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 in QT main chat windows like this?
Forum Updated to NodeBB v4.3 + New Features

How to create in QT main chat windows like this?

Scheduled Pinned Locked Moved Unsolved General and Desktop
31 Posts 2 Posters 5.1k Views 1 Watching
  • 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.
  • Q qwe3
    4 Jul 2020, 15:54

    @mrjj Now I add to paint() function:

        QPen pen(Qt::black, 1);
        painter->setPen(pen);
        painter->drawText(0,0,100,100,0,index.data().toString());
    

    and it works!

    But I see next 2 problems:

    1. I have to write 100,100 in drawText() function. Is there any way to get size which my index.data().toString() needs?

    2. When I add this lines to my paint() function I only see this text in first cell (0,0).

    I have:

        item = new QStandardItem("somethingABC");
        item2 = new QStandardItem("somethingABC");
        item3 = new QStandardItem("somethingABC");
        model->setItem(0,0,item);
        model->setItem(1,0,item2);
        model->setItem(2,0,item3);
    

    So I think I have to get 3 texts "somethingABC" in my QTableView. Right?

    M Offline
    M Offline
    mrjj
    Lifetime Qt Champion
    wrote on 4 Jul 2020, 15:56 last edited by mrjj 7 Apr 2020, 15:57
    #12

    @qwe3 said in How to create in QT main chat windows like this?:

    1
    The cell area is in option.rect. (one of the parameters to paint)
    2:
    i think its related to 1 as all cells then paint its text in 100,100 :)

    painter->drawText(option.rect, index.data().toString());

    1 Reply Last reply
    1
    • Q Offline
      Q Offline
      qwe3
      wrote on 4 Jul 2020, 16:01 last edited by
      #13

      @mrjj One line and 2 problems aren't now problems :D Perfect!

      M 1 Reply Last reply 4 Jul 2020, 16:16
      1
      • Q qwe3
        4 Jul 2020, 16:01

        @mrjj One line and 2 problems aren't now problems :D Perfect!

        M Offline
        M Offline
        mrjj
        Lifetime Qt Champion
        wrote on 4 Jul 2020, 16:16 last edited by
        #14

        @qwe3
        Super.
        Delegates are a bit complicated to begin with but later you love them as you can do anything you like.
        and then have good performance too \o/

        1 Reply Last reply
        0
        • Q Offline
          Q Offline
          qwe3
          wrote on 4 Jul 2020, 16:23 last edited by
          #15

          @mrjj I create rounded rectangle and it works :)

          But I don't know how can I do the last thing:

          The message text can be longer than one line. I think I have to change row's height. This is not a problem: table->setRowHeight(1,240);

          But when I have to do that? In delegate functions()?

          M 1 Reply Last reply 4 Jul 2020, 16:30
          0
          • Q qwe3
            4 Jul 2020, 16:23

            @mrjj I create rounded rectangle and it works :)

            But I don't know how can I do the last thing:

            The message text can be longer than one line. I think I have to change row's height. This is not a problem: table->setRowHeight(1,240);

            But when I have to do that? In delegate functions()?

            M Offline
            M Offline
            mrjj
            Lifetime Qt Champion
            wrote on 4 Jul 2020, 16:30 last edited by
            #16

            @qwe3
            Hi
            Nope, its not the delegates job
            if its for all rows then

            QHeaderView *verticalHeader = myTableView->verticalHeader();
            verticalHeader->setSectionResizeMode(QHeaderView::Fixed);
            verticalHeader->setDefaultSectionSize(24);
            
            1 Reply Last reply
            1
            • Q Offline
              Q Offline
              qwe3
              wrote on 4 Jul 2020, 17:04 last edited by
              #17

              @mrjj Thank you! I have to change your code to:

              verticalHeader->setSectionResizeMode(QHeaderView::ResizeToContents);
              

              But you helped me next time! :)

              Thank you

              M 1 Reply Last reply 4 Jul 2020, 17:25
              0
              • Q qwe3
                4 Jul 2020, 17:04

                @mrjj Thank you! I have to change your code to:

                verticalHeader->setSectionResizeMode(QHeaderView::ResizeToContents);
                

                But you helped me next time! :)

                Thank you

                M Offline
                M Offline
                mrjj
                Lifetime Qt Champion
                wrote on 4 Jul 2020, 17:25 last edited by
                #18

                @qwe3
                Hi
                Super.
                Congratulation on your first Delegate.

                1 Reply Last reply
                0
                • Q Offline
                  Q Offline
                  qwe3
                  wrote on 5 Jul 2020, 04:54 last edited by qwe3 7 May 2020, 05:17
                  #19

                  @mrjj Only in 50%.

                  I need one more:

                  QWidget *delegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
                  {
                      return nullptr;
                  }
                  
                  void delegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
                  {
                      editor->setGeometry(option.rect);
                  }
                  
                  void delegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
                  {
                      if(index.row()%2==0 && index.column()!=1)
                      {
                          QPen pen2(Qt::yellow, 1);
                          painter->setPen(pen2);
                      
                          QPainterPath path;
                          path.addRoundedRect(QRectF(option.rect), 10, 10);
                          painter->fillPath(path, Qt::yellow);
                          painter->drawPath(path);
                          QPen pen(Qt::black, 1);
                          painter->setPen(pen);
                          painter->drawText(option.rect,Qt::AlignCenter, index.data().toString());
                      }
                  }
                  

                  I would like to select text message, click on it right mouse button, get the list, where is "copy" and other possibilities. How can I do this?

                  Now I can't select text and click right mouse button

                  1 Reply Last reply
                  0
                  • M Offline
                    M Offline
                    mrjj
                    Lifetime Qt Champion
                    wrote on 5 Jul 2020, 05:47 last edited by
                    #20

                    Hi
                    For right click menu you can use a context menu

                    https://forum.qt.io/topic/31233/how-to-create-a-custom-context-menu-for-qtableview/8

                    1 Reply Last reply
                    1
                    • Q Offline
                      Q Offline
                      qwe3
                      wrote on 5 Jul 2020, 17:38 last edited by
                      #21

                      @mrjj Next small problem :)

                      I have now ( in the picture is small error - the third row have smaller rectangle ( whre is text "somethingABC ") - I change it in paint application; this rectangle have width like the others )

                      example4.png

                      My delegate:

                      path.addRoundedRect(QRectF(option.rect), 10, 10);
                      

                      When I change it to:

                      path.addRoundedRect(QRectF(option.rect.x(), option.rect.y(),option.rect.width()/2,option.rect.height()), 10, 10);
                      

                      I get:
                      example5.png

                      There are 3 columns in QTableView:
                      the first one for my messages
                      the second one - seperator
                      the third for other person's messages

                      I would like to align to right the third column - yellow rectangles. Like this:
                      example6.png

                      With the text there is not a problem:

                      painter->drawText(QRect(option.rect),Qt::AlignVCenter, index.data().toString());
                      

                      But function

                      painter->drawPath(path);
                      

                      doesn't have a parameter with alignments

                      M 1 Reply Last reply 5 Jul 2020, 17:47
                      0
                      • Q qwe3
                        5 Jul 2020, 17:38

                        @mrjj Next small problem :)

                        I have now ( in the picture is small error - the third row have smaller rectangle ( whre is text "somethingABC ") - I change it in paint application; this rectangle have width like the others )

                        example4.png

                        My delegate:

                        path.addRoundedRect(QRectF(option.rect), 10, 10);
                        

                        When I change it to:

                        path.addRoundedRect(QRectF(option.rect.x(), option.rect.y(),option.rect.width()/2,option.rect.height()), 10, 10);
                        

                        I get:
                        example5.png

                        There are 3 columns in QTableView:
                        the first one for my messages
                        the second one - seperator
                        the third for other person's messages

                        I would like to align to right the third column - yellow rectangles. Like this:
                        example6.png

                        With the text there is not a problem:

                        painter->drawText(QRect(option.rect),Qt::AlignVCenter, index.data().toString());
                        

                        But function

                        painter->drawPath(path);
                        

                        doesn't have a parameter with alignments

                        M Offline
                        M Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on 5 Jul 2020, 17:47 last edited by
                        #22

                        @qwe3
                        Hi
                        Only drawText uses align. Not other paint functions as far as i know :0

                        Since option.rect IS the cell, i think you just need to set
                        ui->table->horizontalHeader()->setStretchLastSection(true);

                        so the last col is actually to the far right

                        1 Reply Last reply
                        0
                        • Q Offline
                          Q Offline
                          qwe3
                          wrote on 5 Jul 2020, 18:02 last edited by qwe3 7 May 2020, 18:03
                          #23

                          @mrjj Thank you, I think I can use something like:

                          path.addRoundedRect(QRectF(option.rect.x()+100, option.rect.y(),option.rect.width()/2,option.rect.height()), 10, 10);
                          

                          for the last column.

                          But there is next problem :D

                          When I use:

                          table->verticalHeader()->setSectionResizeMode(QHeaderView::ResizeToContents);
                          

                          I get the perfect height for cell (0,0). Perfect. But cell (0,1) must has the same height like cell (0,0), so it can be too big for cell (0,1).

                          M 1 Reply Last reply 5 Jul 2020, 18:05
                          0
                          • Q qwe3
                            5 Jul 2020, 18:02

                            @mrjj Thank you, I think I can use something like:

                            path.addRoundedRect(QRectF(option.rect.x()+100, option.rect.y(),option.rect.width()/2,option.rect.height()), 10, 10);
                            

                            for the last column.

                            But there is next problem :D

                            When I use:

                            table->verticalHeader()->setSectionResizeMode(QHeaderView::ResizeToContents);
                            

                            I get the perfect height for cell (0,0). Perfect. But cell (0,1) must has the same height like cell (0,0), so it can be too big for cell (0,1).

                            M Offline
                            M Offline
                            mrjj
                            Lifetime Qt Champion
                            wrote on 5 Jul 2020, 18:05 last edited by
                            #24

                            @qwe3
                            Hi

                            • I get the perfect height for cell (0,0). Perfect. But cell (0,1) must has the same height like cell (0,0), so it can be too big for cell (0,1).

                            Im not really sure what you say here :)

                            1 Reply Last reply
                            0
                            • Q Offline
                              Q Offline
                              qwe3
                              wrote on 5 Jul 2020, 18:12 last edited by
                              #25

                              example6.png
                              Please look at first row. In cell (0,0) there is text "somethingABC\ntext\njdsa". In cell ( 0,2 ) there is text "so". When I use

                              table->verticalHeader()->setSectionResizeMode(QHeaderView::ResizeToContents);
                              

                              QT resize height of the first row to height which cell (0,0 ) needs. But cell (0,2) must have the same height. In cell (0,2) there is only text "so" , so it can have smaller height.

                              M 1 Reply Last reply 5 Jul 2020, 18:14
                              0
                              • Q qwe3
                                5 Jul 2020, 18:12

                                example6.png
                                Please look at first row. In cell (0,0) there is text "somethingABC\ntext\njdsa". In cell ( 0,2 ) there is text "so". When I use

                                table->verticalHeader()->setSectionResizeMode(QHeaderView::ResizeToContents);
                                

                                QT resize height of the first row to height which cell (0,0 ) needs. But cell (0,2) must have the same height. In cell (0,2) there is only text "so" , so it can have smaller height.

                                M Offline
                                M Offline
                                mrjj
                                Lifetime Qt Champion
                                wrote on 5 Jul 2020, 18:14 last edited by mrjj 7 May 2020, 18:15
                                #26

                                Hi
                                But that is what ResizeToContents does ?
                                So if it has lesser text, it will be smaller.

                                Do you want all to have same size regardless of text ?

                                ahh you mean the "so" should be smaller ?

                                1 Reply Last reply
                                0
                                • Q Offline
                                  Q Offline
                                  qwe3
                                  wrote on 5 Jul 2020, 18:17 last edited by qwe3 7 May 2020, 18:18
                                  #27

                                  @mrjj
                                  I would like something like that:

                                  example7.png

                                  M 1 Reply Last reply 5 Jul 2020, 18:24
                                  0
                                  • Q qwe3
                                    5 Jul 2020, 18:17

                                    @mrjj
                                    I would like something like that:

                                    example7.png

                                    M Offline
                                    M Offline
                                    mrjj
                                    Lifetime Qt Champion
                                    wrote on 5 Jul 2020, 18:24 last edited by
                                    #28

                                    @qwe3
                                    Hi
                                    I think that will be hard as one row can only have one height.
                                    https://doc.qt.io/archives/qt-4.8/qtableview.html#setRowHeight
                                    but you can span cells to give them uneven sizes
                                    void QTableView::setSpan(int row, int column, int rowSpanCount, int columnSpanCount)

                                    But im wondering if it would not be easier to just use a QListView ( you can reuse delegate)
                                    and have 2 of them .
                                    one in each side and then just some white Qwidget in between ?

                                    1 Reply Last reply
                                    0
                                    • Q Offline
                                      Q Offline
                                      qwe3
                                      wrote on 5 Jul 2020, 18:31 last edited by
                                      #29

                                      @mrjj I never used QListView. I don't need to use QTableView. But when I add 2 QListView there are two sliders to move? I would like to have only one like in QTableView ( on the right )

                                      M 1 Reply Last reply 5 Jul 2020, 18:40
                                      0
                                      • Q qwe3
                                        5 Jul 2020, 18:31

                                        @mrjj I never used QListView. I don't need to use QTableView. But when I add 2 QListView there are two sliders to move? I would like to have only one like in QTableView ( on the right )

                                        M Offline
                                        M Offline
                                        mrjj
                                        Lifetime Qt Champion
                                        wrote on 5 Jul 2020, 18:40 last edited by mrjj 7 May 2020, 18:40
                                        #30

                                        @qwe3
                                        Its just like TableView but just having one column.

                                        Then each row can be any height you wish pr item/shape and same for the right one.

                                        Else i think it get complicated to do with one tableView.
                                        You would have to make one row as hight as the biggest shape or merge cells to allow it to be uneven.
                                        Not easy in my book to calc that.
                                        But your call.

                                        Well its not so hard to make both scroll at same time

                                        connect(view1->horizontalScrollBar(), SIGNAL(valueChanged(int)), view2->horizontalScrollBar(), SLOT(setValue(int)));
                                        connect(view2->horizontalScrollBar(), SIGNAL(valueChanged(int)), view1->horizontalScrollBar(), SLOT(setValue(int)));
                                        

                                        and ofc you can just hide one of them if you wish

                                        1 Reply Last reply
                                        0
                                        • Q Offline
                                          Q Offline
                                          qwe3
                                          wrote on 6 Jul 2020, 06:09 last edited by
                                          #31

                                          @mrjj Hello,

                                          Could you tell me how will you do this GUI? Using QTableView, QListView or something other? At the moment please forget about 3 columns. Change it to only one column. In telegram application I see only one column for all people ( maybe two - the first one is for avatar in circle ). Do you know how it is done in telegram application? You told me that application has delegate. And it's using QListView too? What about the size of circle where is the text? How it is implemented that we have circle with text in other sizes?

                                          1 Reply Last reply
                                          0

                                          21/31

                                          5 Jul 2020, 17:38

                                          • Login

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