Dynamic Grid

Ragbot

I'm trying to make a grid view which a n no of Images but the images should not exceed a certain width limit.

How do I go about coding this[C++] grid view seems too difficult to work with for this setup but also seems to be the only way does anyone else have a better way to do so?

jsulm

@Ragbot Do you mean QGridLayout? You can simply set max size of the widgets you add to the layout.

Ragbot

@jsulm But that wouldn't change the no of items in one row right?
I'm trying to get make it so that if the window is resize to be more wider the widgets in the bottom row have to go to the upper row and vice versa to fill in the gap.

By setting max size that will do they size limits but to wont re arrange itself.

SGaist

Hi and welcome to devnet,

Are you looking for something like the Flow Layout Example ?

James Gallegos

Creating a grid view with a maximum width for images is a common task in many graphical user interface (GUI) frameworks. In C++, you have a few options depending on which GUI library you're using. Here are two popular libraries and how you might approach this task with them:

Qt (Using Qt Widgets)
If you're using Qt, you can use the QGridLayout to create a grid layout and QLabel widgets to display the images. You can set a maximum width for the labels to ensure the images don't exceed a certain width. Here's a simplified example:

#include <QtWidgets>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QGridLayout *gridLayout = new QGridLayout(&window);

    // Assuming images is a vector of QPixmap or QImage
    for(int i = 0; i < images.size(); ++i) {
        QLabel *label = new QLabel;
        label->setPixmap(QPixmap::fromImage(images[i]));
        label->setMaximumWidth(maxWidth); // Set your maximum width here
        gridLayout->addWidget(label, i / numColumns, i % numColumns);
    }

    window.show();

    return app.exec();
}

GTK (Using Gtkmm)
If you're using GTK, you can use Gtkmm, the C++ bindings for GTK. You can create a Gtk::Grid and Gtk::Image widgets to achieve the same effect:

#include <gtkmm.h>

int main(int argc, char *argv[]) {
    auto app = Gtk::Application::create(argc, argv, "org.example");

    Gtk::Window window;
    Gtk::Grid grid;
    window.add(grid);

    // Assuming images is a vector of Glib::RefPtr<Gdk::Pixbuf>
    for(int i = 0; i < images.size(); ++i) {
        Gtk::Image* image = new Gtk::Image(images[i]);
        image->set_max_width_chars(maxWidth); // Set your maximum width here
        grid.attach(*image, i % numColumns, i / numColumns);
    }

    window.show_all();

    return app->run(window);
}

Both of these examples assume you have a vector of images (images) that you want to display in a grid, and they won't exceed a certain maximum width (maxWidth). You can adjust numColumns to control how many images are displayed per row.

Remember to replace the placeholders (images, maxWidth, numColumns) with your actual data and desired values. Also, make sure you have the appropriate dependencies and include statements for the GUI libraries you're using.

protectivesystemaa

@James-Gallegos said in Dynamic Grid:

Creating a grid view with a maximum width for images is a common task in many graphical user interface (GUI) frameworks. In C++, you have a few options depending on which GUI library you're using. Here are two popular libraries and how you might approach this task with them:

Qt (Using Qt Widgets)
If you're using Qt, you can use the QGridLayout to create a grid layout and QLabel widgets to display the images. You can set a maximum width for the labels to ensure the images don't exceed a certain width. Here's a simplified example: geometry dash meltdown
#include <QtWidgets>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QGridLayout *gridLayout = new QGridLayout(&window);

    // Assuming images is a vector of QPixmap or QImage
    for(int i = 0; i < images.size(); ++i) {
        QLabel *label = new QLabel;
        label->setPixmap(QPixmap::fromImage(images[i]));
        label->setMaximumWidth(maxWidth); // Set your maximum width here
        gridLayout->addWidget(label, i / numColumns, i % numColumns);
    }

    window.show();

    return app.exec();
}
GTK (Using Gtkmm)
If you're using GTK, you can use Gtkmm, the C++ bindings for GTK. You can create a Gtk::Grid and Gtk::Image widgets to achieve the same effect:
#include <gtkmm.h> 

int main(int argc, char *argv[]) {
    auto app = Gtk::Application::create(argc, argv, "org.example");

    Gtk::Window window;
    Gtk::Grid grid;
    window.add(grid);

    // Assuming images is a vector of Glib::RefPtr<Gdk::Pixbuf>
    for(int i = 0; i < images.size(); ++i) {
        Gtk::Image* image = new Gtk:: Image(images[i]);
        image->set_max_width_chars(maxWidth); // Set your maximum width here
        grid.attach(*image, i % numColumns, i / numColumns);
    }

    window.show_all();

    return app->run(window);
}
Both of these examples assume you have a vector of images (images) that you want to display in a grid, and they won't exceed a certain maximum width (maxWidth). You can adjust numColumns to control how many images are displayed per row.

Remember to replace the placeholders (images, maxWidth, numColumns) with your actual data and desired values. Also, make sure you have the appropriate dependencies and include statements for the GUI libraries you're using.

It worked for me

John Sloan

This post is deleted!

John Sloan

@James-Gallegos It works, Thanks

Russell S. Frame

@Ragbot said in Dynamic Grid:

@jsulm But that wouldn't change the no of items in one row right?
I'm trying to get make it so that if the window is resize to be more wider the widgets in the bottom row have to go to the upper row and vice versa to fill in the gap.

By setting max size that will do they size limits but to wont re arrange itself.

It sounds like you want a responsive layout where widgets dynamically rearrange themselves based on the window size. If you're using Qt, you should consider using a QGridLayout or QFlowLayout (custom implementation) to achieve this behavior.

Possible Solutions
Using QGridLayout with Dynamic Column Count

You can track the window size changes and adjust the number of columns dynamically.

cpp
Copy
Edit
void MyWidget::resizeEvent(QResizeEvent* event) {
int width = event->size().width();
int numColumns = width / widgetWidth; // Adjust based on available space
updateGridLayout(numColumns);
}
Using QHBoxLayout & QVBoxLayout Dynamically

Arrange widgets in QHBoxLayout inside a QVBoxLayout, and move them between rows when the width changes.

Using QFlowLayout (Custom)

Qt does not have a built-in QFlowLayout, but you can implement a layout that automatically adjusts widgets to fit within available space.