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 achieve Qt card based layout
Forum Updated to NodeBB v4.3 + New Features

How to achieve Qt card based layout

Scheduled Pinned Locked Moved Solved General and Desktop
21 Posts 2 Posters 5.0k 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.
  • U Ucn_

    @mrjj Thanks for the reference. I think my issue was that layouts were creating extra space when adding widgets. I'll stick with pure widgets, I'm not familiar with QML, but I'll have a look

    mrjjM Offline
    mrjjM Offline
    mrjj
    Lifetime Qt Champion
    wrote on last edited by
    #9

    @Ucn_
    well the scrollarea/layout will try to compress the widget etc so unless you set fixed size (a max height) on it - it will alter look a lot.

    Its in forms
    alt text

    1 Reply Last reply
    0
    • U Ucn_

      Sorry, maybe a silly question, but where is ui->CardsLayout? I can't find it in the ui. Or no where except where you mentioned in the mainwindow.cpp

      mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #10

      @Ucn_

      sorry misread.
      The layout is in
      scrollAreaWidgetContents
      alt text

      U 1 Reply Last reply
      1
      • mrjjM mrjj

        @Ucn_

        sorry misread.
        The layout is in
        scrollAreaWidgetContents
        alt text

        U Offline
        U Offline
        Ucn_
        wrote on last edited by
        #11

        @mrjj I was looking for it. Thanks. I will play with it and try to implement based on what I want to achieve. I will not mark as the correct answer for now because I may have question regarding the example. So I can come back, I wouldn't like to create another post. I will mark after everything. Thanks for the help

        1 Reply Last reply
        0
        • U Offline
          U Offline
          Ucn_
          wrote on last edited by
          #12

          @mrjj when creating Card instance "card":

              Card * card = new Card;
              ui->CardsLayout->addWidget(card);
          

          Is it possible to give different name each time it's clicked? maybe from a function parameter value or QString value. I'm asking this because later on I may want to removeWidget by name.

              ui->CardsLayout->removeWidget(card);
          

          It may remove all "card". So I would like to have different name for the instance every time is created. Thanks

          mrjjM 1 Reply Last reply
          0
          • U Ucn_

            @mrjj when creating Card instance "card":

                Card * card = new Card;
                ui->CardsLayout->addWidget(card);
            

            Is it possible to give different name each time it's clicked? maybe from a function parameter value or QString value. I'm asking this because later on I may want to removeWidget by name.

                ui->CardsLayout->removeWidget(card);
            

            It may remove all "card". So I would like to have different name for the instance every time is created. Thanks

            mrjjM Offline
            mrjjM Offline
            mrjj
            Lifetime Qt Champion
            wrote on last edited by mrjj
            #13

            @Ucn_
            Hi
            You can call card->setObjectName("card1");
            Then have a std::map with names, and widget pointer.

            Is it just to be able to close it / delete it ?

            We could close it using only signals
            and slot but if you need other operations then using names might be easier.

            U 1 Reply Last reply
            2
            • mrjjM mrjj

              @Ucn_
              Hi
              You can call card->setObjectName("card1");
              Then have a std::map with names, and widget pointer.

              Is it just to be able to close it / delete it ?

              We could close it using only signals
              and slot but if you need other operations then using names might be easier.

              U Offline
              U Offline
              Ucn_
              wrote on last edited by
              #14

              @mrjj Yes I want to be able to replace the info or remove the widget by name if something changes. I will be giving the names dynamically. Also could you tell me how to make the widget appear on top when clicking add? It adds in the middle, I set the CardsLayout VerticalPolicy to fixed. It appears on top, but the height is not adjusting. It squeezes the picture. Thanks

              mrjjM 1 Reply Last reply
              0
              • U Ucn_

                @mrjj Yes I want to be able to replace the info or remove the widget by name if something changes. I will be giving the names dynamically. Also could you tell me how to make the widget appear on top when clicking add? It adds in the middle, I set the CardsLayout VerticalPolicy to fixed. It appears on top, but the height is not adjusting. It squeezes the picture. Thanks

                mrjjM Offline
                mrjjM Offline
                mrjj
                Lifetime Qt Champion
                wrote on last edited by mrjj
                #15

                @Ucn_
                Ok, if it has to be by name, the objectname should work good.

                to have be at top.
                Add a vertical spacer to the ScroallArea widget
                alt text

                alt text

                and change addWidget to insertWidget
                ui->CardsLayout->insertWidget(0,card);

                to have it add to index zero so it comes before the spacer
                then it will push them up

                U 1 Reply Last reply
                1
                • mrjjM mrjj

                  @Ucn_
                  Ok, if it has to be by name, the objectname should work good.

                  to have be at top.
                  Add a vertical spacer to the ScroallArea widget
                  alt text

                  alt text

                  and change addWidget to insertWidget
                  ui->CardsLayout->insertWidget(0,card);

                  to have it add to index zero so it comes before the spacer
                  then it will push them up

                  U Offline
                  U Offline
                  Ucn_
                  wrote on last edited by Ucn_
                  #16

                  @mrjj Thanks. It does the job. However, the card doesn't expand its height, it squeezes the rest if a new layout with widgets is added And ui->CardsLayout->removeWidget() won't take QString in the parameter. I came up with this solution, I created QVector-QWidget-cards*. And every time I add a widget to the layout I also append to cards. Then for deleting I do this:

                  for (int i = 0; i < cards.size(); ++i) {
                  if (cards.at(i)->objectName() == ui->lineEdit->text()){

                          qDebug () << "widget found at " << i << cards.at(i) << cards.at(i)->objectName();
                          delete cards.at(i);
                          cards.removeAt(i);
                      }
                  }
                  
                  mrjjM 1 Reply Last reply
                  1
                  • U Ucn_

                    @mrjj Thanks. It does the job. However, the card doesn't expand its height, it squeezes the rest if a new layout with widgets is added And ui->CardsLayout->removeWidget() won't take QString in the parameter. I came up with this solution, I created QVector-QWidget-cards*. And every time I add a widget to the layout I also append to cards. Then for deleting I do this:

                    for (int i = 0; i < cards.size(); ++i) {
                    if (cards.at(i)->objectName() == ui->lineEdit->text()){

                            qDebug () << "widget found at " << i << cards.at(i) << cards.at(i)->objectName();
                            delete cards.at(i);
                            cards.removeAt(i);
                        }
                    }
                    
                    mrjjM Offline
                    mrjjM Offline
                    mrjj
                    Lifetime Qt Champion
                    wrote on last edited by
                    #17

                    @Ucn_
                    Hi
                    The card has a fixed size set to prevent it from being compressed below the design size.
                    You can just make it bigger if you need more room.

                    The QVector is a fine idea, however, if you had many Cards to manage , i think i would have used
                    std::map<QString, Card *> CardsMap;
                    To avoid having to loop a list to find the one i want. std::map supports direct lookup
                    but for a small set of Cards, it really dont matter.

                    U 1 Reply Last reply
                    1
                    • mrjjM mrjj

                      @Ucn_
                      Hi
                      The card has a fixed size set to prevent it from being compressed below the design size.
                      You can just make it bigger if you need more room.

                      The QVector is a fine idea, however, if you had many Cards to manage , i think i would have used
                      std::map<QString, Card *> CardsMap;
                      To avoid having to loop a list to find the one i want. std::map supports direct lookup
                      but for a small set of Cards, it really dont matter.

                      U Offline
                      U Offline
                      Ucn_
                      wrote on last edited by
                      #18

                      @mrjj Thanks, I will give a try with map. About the size, I set the card sizePolicy to Expanding still squeezing.

                      mrjjM 1 Reply Last reply
                      0
                      • U Ucn_

                        @mrjj Thanks, I will give a try with map. About the size, I set the card sizePolicy to Expanding still squeezing.

                        mrjjM Offline
                        mrjjM Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on last edited by
                        #19

                        @Ucn_ said in How to achieve Qt card based layout:

                        Expanding still squeezing.

                        Yeah, it will be squeezed if many cards are added. You have to set a minimum Height to avoid that.
                        On the Top Card in UI. So the laytout wont make it smaller if it can.
                        Even when set to Expanding, its only when there are left over space , however, we add them next to each other so it tries to fit as many as possible and unless we say Not smaller than this, it might not look like we want to.

                        U 1 Reply Last reply
                        0
                        • mrjjM mrjj

                          @Ucn_ said in How to achieve Qt card based layout:

                          Expanding still squeezing.

                          Yeah, it will be squeezed if many cards are added. You have to set a minimum Height to avoid that.
                          On the Top Card in UI. So the laytout wont make it smaller if it can.
                          Even when set to Expanding, its only when there are left over space , however, we add them next to each other so it tries to fit as many as possible and unless we say Not smaller than this, it might not look like we want to.

                          U Offline
                          U Offline
                          Ucn_
                          wrote on last edited by
                          #20

                          @mrjj This is what I'm trying to achieve:
                          hover.gif

                          mrjjM 1 Reply Last reply
                          0
                          • U Ucn_

                            @mrjj This is what I'm trying to achieve:
                            hover.gif

                            mrjjM Offline
                            mrjjM Offline
                            mrjj
                            Lifetime Qt Champion
                            wrote on last edited by mrjj
                            #21

                            @Ucn_
                            Hi
                            Well pictures help so much. :)
                            You have to alter the Maximum Height to allow for the popup lineEdit.
                            It seems its not allow to alter Card size so it will compress the other elements to
                            make room.

                            Ps. its looking good :)

                            1 Reply Last reply
                            0

                            • Login

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