Create a Grid Layout Dynamically and manage it in Qt - c++

I'm new in Qt and currently I'm having some trouble. I want to create a grid layout in Qt from the c++ code and to be able to manage it from there. I have tried many different things but none of them work.
Basically, what I want to do is to have a window with a button in it(done that), and by pressing the button the window should change into a grid of buttons with no fixed number of rows or columns. ( hope I was clear on what I want to do)
At this point, I have created two .qml , one qml file has the code for the first window(the one with the one and only button) and the other qml file has a grid layout with nothing in it. There are also two c++ files the first one is the main.cpp and on the second one is the code I am writing to "fill" the grid on the click of the button.
Again, I'm new to Qt so if you have any better ideas please let me know!

You can use a Repeater to create some amount of Buttons as children of the Grid. The Grid will automatically set the positions of the Buttons so you should not set any anchors or coordinates.
To handle the signals, you define one signal somewhere, that you then connect to the buttons signal.
Grid {
id: buttonGrid
signal buttonClicked(int index)
Repeater {
model: 100 // or any integer number
delegate: Button {
onClicked: buttonGrid.buttonClicked(index)
}
}
}
Instead of using a integer model, you might also use e.g a ListModel or any QAbstractItemModel-descendent. Then you can also use their roles, to get stuff like textes or colors or functions...
A simple array with textes would also be possible.

Related

Qt: How do I stack widgets to do a transition between them, by fading one in and the other out?

Here's my end goal: I want to transition between two images. I want the original image to fade out, and at the same time, the new image to fade in.
I know I need to modify the opacity, and I found this great link for "How to make Qt widgets fade in or out": How to make Qt widgets fade in or fade out?
I also know I need to set the image for the QWidget, and I found out how to do that with the following code:
m_image1 = new QWidget();
m_image1->setStyleSheet("border-image: url(\"" + m_imagePath1 + "\") 0 0 0 0 strech strech; ");
Where I'm stuck is the layout. How do I lay a QWidget directly on top of another QWidget.
I did read about QStackedWidget, and it seems like it would be useful: https://doc.qt.io/qt-5/qstackedwidget.html . There's a method to set the current widget via setCurrentIndex(int). However, it doesn't seem to allow me to be transitioning out a widget and transitioning in a widget at the same time. It just either is one widget or the other widget. And from the class description, it says "a stack of widgets where only one widget is visible at a time."
A lot of the layouts I'm aware of, position items next to each other, not on top.
So, my question is how do I stack the widgets to do a transition between the widget contents, by fading them in/out?
Thank you.

Making UWP ComboBox exceeding parent windows

My app needs to be small in nature so I make it 500 x 100 px in size.
The problem is the ComboBox selection items are also squeezed into that small window size. Of course, I can scroll it, but it doesn't feel right this way.
Here is the picture:
Is it possible to expand the ComboBox selection list so that it exceeds the parent window? Preferably in XAML if possible
Is it possible to expand the ComboBox selection list so that it exceeds the parent window?
No, this is impossible in UWP apps. While using ComboBox class, it displays the drop-down list in PopupRoot, which is a layer has the same view port as its parent window. Anything outside this view port will be clipped, users can't see them. For example, following is a normal ComboBox:
After I give a Margin="-20,-30,0,0" to the drop-down list, it looks like
The part outside the window is clipped.
Besides, The implementation of ComboBox will also make sure the ComboBox's selection list won't exceeds the parent window. The selection list's max height is calculated at runtime, it will be always less than the parent window's height and we can't change its value manually, so it is not possible to expand the ComboBox's selection list.
It's not possible, but you can extend your page to the title bar to have at least some additional space using CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property.
Take a look here and here. (I know the examples are written in C# but it should be similar in C++)

How can I overlap qwidgets while using the grid layout and positioning overlapping widgets a particular distance from the window border?

I am programming a game and I have a tab widget which takes up the majority of the window. I want to use the extra space in the tab bar for buttons. I have the tab widget in a grid layout. To accomplish this, I use the code below in order to remove and add back the button widgets to the desired areas (the solution to someone else's question).
ui->centralLayout->removeWidget(ui->exitButton);
ui->centralLayout->removeWidget(ui->ResizeButton);
ui->centralLayout->addWidget(ui->ResizeButton,0,4, Qt::AlignTop|Qt::AlignRight);
ui->centralLayout->addWidget(ui->exitButton,0,4, Qt::AlignTop|Qt::AlignRight);
This does not work for me; however, because I would like the second widget-- the resize button-- to be just to the left of the exit button. What is occurring is that it instead overlaps the exit button. I simply need to move it 21 pixels to the left and have no idea how!
I tried putting both buttons in a frame and then removing and adding the frame the way I did the buttons. Unfortunately the same functions I used do not exist for the qt frame object.
Here are some pictures of my window.
https://docs.google.com/document/d/17w5USWQcCtb6OdcRShdcYcRjXTcdVpmdrG5TWLX71y8/edit?usp=sharing
you are using void QGridLayout::addWidget(QWidget * widget, int row, int column, Qt::Alignment alignment = 0) overload.
2-nd and 3-rd parameters are row and column of a grid. And you put 2 widgets in the same cell so they are overlaping each other.
I solved my problem. Earlier when I was trying to add them to a frame and reposition it I could not but using a widget as the container for my buttons let me place them the way I was earlier attempting to individually place the buttons.

How to add QMenus or Qactions on a Widget like QlistWidget area as a list item?

Is there any way to add QActions as a list item on QListWidget?
I want to make a customization window which will show list of actions on a widget for move up, move down, Rename and other options. I'd like to display it on the widget same as it appears as a context menu.
I tried adding it as a list item with icon and text, but the look it not very good:
i) list items with blank icon are not aligning properly, even after adding a blank icon of size 16*16 is not taking up any space and text with icons & w/o icon are not aligning.
ii) I'm unable to add right-pointing black triangle at the right most, in-case of sub-menus cause somehow unicode character for this is not getting displayed on my Linux machine.
That's why I want to add QActions as it are getting popped at original place.
Any suggestions?
Yes I have a suggestion : do not try to make fancy widgets like this, users will not find it intuitive
You should find another way to implement this.
Imo, something like a QToolButton with a QToolButton::MenuButtonPopup popup mode will do the trick. This way, you can embed menu and sub-menus in a widget, using QToolButton::setMenu().

Qt - how to make QPushButton change between two QVBoxLayouts

So i have a main layout called the 'vboxmain'. And the program has two states: blackjack and poker. For both I have a button. In this vboxmain I have an upper part, which covers most of the program, and is the same for both games, but I also have a bottom part which should display different parts for both games. For example, poker game should hold five QCheckBoxes and one button. As for the blackjack game i need simply two buttons. I created both of these bottom layouts as QVBoxLayouts. So now i have:
BlackjackiValikud = new QVBoxLayout; //for blackjack
Pokkerivalikud = new QVBoxLayout; //for poker
And I tried creating two button actions like this:
void mainwindow::BlackJack_clicked(){
vboxmain->removeItem(Pokkerivalikud);
vboxmain->addItem(BlackjackiValikud);
}
void mainwindow::Poker_clicked(){
vboxmain->removeItem(BlackjackiValikud);
vboxmain->addItem(Pokkerivalikud);
}
Buttons are connected like this:
connect(BlackjackButton, SIGNAL(clicked()), this, SLOT(BlackJack_clicked()));
connect(PokerButton, SIGNAL(clicked()), this, SLOT(Poker_clicked()));
But currently it's not working and I can't figure out a way to do this, so I'm asking for help. This is probably not the best way to do this either but I don't know any other ways. So I could use some help on how to make this work with whatever solution - so that with both buttons I can change the bottom part of my vboxmain as needed.
I'm open to solutions.
What do you mean by it is not working?
You have to make sure that the layout are enabled when you add them (via QLayout::setEnabled ( bool enable)) or that widget are visible (via QWidget::show()). In general you have to manuable make visible items which are added to a widget which is already visible...
An alternative would be to use a QStackedLayout to display either. You have a widget poker for the poker view and a widget blackjack for the black jack view. On button push you use either
void QStackedLayout::setCurrentIndex ( int index )
void QStackedLayout::setCurrentWidget ( QWidget * widget )
You may want to keep the layouts and change what's presented in the bottom layout. To do so, create classes for each game(say blakjackWidget and pokerWidget) derived from QWidget. and show only one of them in the bottom layout.