I am making a project and its user interface is being made in Gtk+ encapsulated by C++, that is, Gtkmm, as I am getting to know the API I am not using a visual editor like Glade, I want to do everything from code to know how it works and problems arise like East.
Following the small tutorial that Gnome gives, I decided that it is best to use a Grid for the project because it allows more freedom in the design, it is a bit frustrating because the documentation that is given of the operation of the object is a bit of a ball, like quickly, giving only a fairly small example that doesn't really show how it works and leaving me in limbo because it's the first time I've come across this object.
I thought that the number of rows and columns could be defined at the time of the instance of this object, and from what I see, everything is done at the same rate as Widgets are passed to it with the attack function .
In addition, the other problem is that it is not resized with the window, it is assumed that this object occupies all the space that its parent container has, in this case a Window , but it is not like that, if I maximize the Window, the Grid with their respective objects stay in a small corner at the top left and there is a void in the rest of the window.
My intention is to know how this Widget works, but since the question cannot be opened, then this is the question, How can I enter three buttons in a Grid, placing one at coordinate(0,0), the other at coordinate (4,4) the other in the coordinate (8,8) and that they are distributed evenly in the parent container (Window), resizing with it?
NOTE: I don't care if the code is in C or C++, I just want to know its logical operation.
edited 1
Emulate the example I provided and exactly what I had indicated happens, with the window at its minimum size, it gives the illusion that what was wanted was obtained:
The code I use is the following:
gui.hpp
class InterfazUsuario : public Gtk::Window
{
public:
InterfazUsuario();
virtual ~InterfazUsuario();
private:
Gtk::Window _windowPrincipal;
Gtk::Button _btnBoton1;
Gtk::Button _btnBoton2;
Gtk::Button _btnBoton3;
Gtk::Grid _contenedorMaestro;
};
gui.cpp
InterfazUsuario::InterfazUsuario() : Gtk::Window(Gtk::WINDOW_TOPLEVEL)
{
_btnBoton1 = Gtk::Button("Boton1");
_btnBoton2 = Gtk::Button("Boton2");
_btnBoton3 = Gtk::Button("Boton3");
_contenedorMaestro.set_row_homogeneous(false);
_contenedorMaestro.set_column_homogeneous(false);
_contenedorMaestro.set_vexpand(true);
_contenedorMaestro.attach(_btnBoton1, 0, 0, 1, 1);
_contenedorMaestro.attach(_btnBoton2, 4, 4, 1, 1);
_contenedorMaestro.attach(_btnBoton3, 7, 7, 1, 1);
set_title("Ejemplo Grid");
set_position(Gtk::WindowPosition::WIN_POS_CENTER);
maximize();
add(_contenedorMaestro);
show_all_children();
}
The size of the widgets inside the Grid container are defined in attack , indicating how many rows of the Grid container it will occupy, but what defines the width of each row?
Also note that the rows that do not have widgets, it is as if they did not exist, as you can see, they do not have width, because despite the buttons being separated by 3 rows, they appear almost glued, a space between them should be noticed (Seeing only the horizontal perspective, not vertical).
The latter makes me think a bit paradoxically, the width and height of a row and column within a Grid, is defined by the width and height of the object that occupies it, but the width and height of the object, this case button, define is the width and height of the rows and columns inside the Grid, aha and it can't be.
That is my confusion with this object, and the little documentation that I personally have.
After spending several days with this problem, the problem was another one unrelated to this one, although that helped me to know this object in a basic way and to be able to respond.
This is the Grid inheritance diagram:
Its parent called
Container
, is a container which accepts a single child,Grid
, it adds functionality by being able to accept many children and being able to order them, giving an advantage in terms of design, in fact it is recommended when making a GUI in GTK+ .The definition given by the official documentation of version 3.89 (I would love to put the version 3.24, but this is down), is the following:
Now, before explaining how the object works, we must be clear about the differences between two properties,
expand
andfill
.Expand vs Fill
Expand and fill determine how the size of the child will behave in relation to the space provided by the parent or a cell.
Expand , the parent allows the child to grow when additional space is available.
Fill , the extra space is allocated to the child itself.
Grid
does not have any custom properties to control the spacing of its children, but supports hexpand , vexpand , halign , valign ; v for vertical and h for horizontal.hexpand
andvexpand
, allow a column toGrid
grow if space is available when it contains a child withexpand
assigned .the fill property is assigned by
halign
andvalign
respectively, by means ofenum Align
which it has the following definition:Its operation and how an object behaves can be better understood with the following image:
A behavior of when both vertical and horizontal
Grid
are assigned and it is indicated that all its rows and columns are distributed in a homogeneous way, with set_row_homogeneous and set_column_homogeneous the parent of the container will let it grow until it occupies all the available space, and the size of the rows and columns of will be distributed homogeneously.expand
Grid
Grid
Solution of the question
I have the following code:
The result is as follows:
Use the variable
rellenoCentro
to add a strategic gap in the design, it could easily have been a button, now what happens if we comment the following lines from the solution:The following result is obtained:
And now, if we comment on the solution, it is the following line:
The following result is obtained:
From this last example, it can be seen that the columns of the
Grid
do not expand if they do not have a child object, even if the homogeneity property is defined.Documentation:
https://developer.gnome.org/gtkmm-tutorial/stable/ https://developer.gnome.org/gtkmm/3.89/namespaceGtk.html https://developer.gnome.org/gtk3/stable/ch30s02.html