0

Estoy realizando un proyecto y su interfaz de usuario la estoy realizando en Gtk+ encapsulado por C++ osea, Gtkmm, como estoy conociendo la API no estoy utilizando un editor visual como Glade, quiero hacer todo desde código para conocer el funcionamiento de esta y surgen problemas como este.

Siguiendo el pequeño tutorial que da Gnome, decidí que lo mejor es utilizar un Grid para el proyecto por lo que permite más libertad en el diseño, es un poco frustrarte porque la documentación que se da del funcionamiento del objeto es un poco al boleo, como de rapidez, dando solo un ejemplo bastante pequeño que no muestra realmente como funciona y dejándome en el limbo porque es la primera vez que me topo con este objeto.

pensé que se podría definir el número de filas y columnas en la hora de la instancia de este objeto, y por lo que veo, todo se hace al mismo ritmo que se le ingresan Widgets con la función attack.

Ademas el otro problema, es que no se me redimenciona con la ventana, se supone que ese objeto ocupa todo el espacio que le dispone su contenedor padre, en este caso un Window, pero no es así, si maximizo el Window, el Grid con sus respectivos objetos se quedan en una pequeña esquina en la parte superior izquierda y queda un vació en el resto de la ventana.

Mi intención es saber cómo funciona este Widget, pero como la pregunta no puede ser abierta, entonces está es la pregunta, ¿Cómo puedo ingresar tres botones en un Grid, colocando uno en la coordenada(0,0), el otro en la coordenada(4,4) el otro en la coordenada (8,8) y que se distribuyan de manera homogénea en el contenedor padre(Window), redimensionandose con este?

NOTA: no me importa si el código es en C o C++, quiero es saber su funcionamiento lógico.


Editado 1

Emule el ejemplo que platee y sucede lo que precisamente había indicado, estando la ventana a su tamaño minimo, hace la ilusión que se obtuvo lo que se quería: Imagen A tamaño minimo

Pero cuando se maximixa: introducir la descripción de la imagen aquí

El código que utilice es el siguiente:

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();        
}

El tamaño de los widgets dentro del contedendor Grid se definen en attack, indicando cuantas filas del contenedor Grid va a ocupar este, pero, ¿Qué me define el ancho de cada fila?.

Note también que las filas que no tengan widgets, es como si no existieran, como pueden notar, no tienen ancho, porque a pesar de estar los botones separados por 3 filas, aparecen casi pegados, debería notarse un espacio entre ellos(Viendo solo la perspectiva horizontal, no la vertical).

Esto ultimo me hace pensar un poco paradojicamente, el ancho y alto de una fila y columna dentro de un Grid, esta definido por el ancho y alto del objeto que lo ocupe, pero, el ancho y alto del objeto, este caso botón, lo define es el ancho y alto del las filas y columnas dentro del Grid, ajá y no puede ser.

Esa es mi confusión con este objeto, y la poca documentación que personalmente posee.

1 respuesta 1

0

Después de matarme varios días con este problema, el problema era otro no relacionado con este, aunque eso me ayudo a conocer de manera básica este objeto y poder responder.

Este es el diagrama de herencia de Grid: documentación oficial https://developer.gnome.org/gtkmm/3.89/classGtk_1_1Grid.html

Su padre llamado Container, es un contenedor el cual acepta un único hijo, Grid, agrega funcionalidad al poder aceptar muchos hijos y poderlos ordenar, dando una ventaja en lo que respecta a diseño, de hecho es el recomendando a la hora de realizar una GUI en GTK+.

La definición que da la documentación oficial de la versión 3.89(me encantaría poner la de la versión 3.24, pero esta se encuentra caida), es la siguiente:

Grid es un contenedor que organiza sus widgets hijos en filas y columnas.

Este es muy similar a Box, pero utiliza de manera consistente el margen y las propiedades de expansión de Widget en lugar de las propiedades secundarias personalizadas, y es totalmente compatible con la administración de geometría de altura por ancho.

Los hijos se agregan usando attach(). Pueden abarcar varias filas o columnas. También es posible agregar un hijo junto a un hijo existente, usando attach_next_to(). El comportamiento de la cuadrícula cuando varios hijos ocupan la misma celda de cuadrícula no está definido.

Grid se puede usar como una Box con solo usar Gtk::Container::add(), que colocará a los hijos uno al lado del otro en la dirección determinada por la propiedad de orientación.

Ahora, antes de explicar como funciona el objeto, se debe tener claro las diferencias entre dos propiedades, expand y fill.

Expand vs Fill

Expand y fill determinan como se va a comportar el tamaño del hijo en relación con el espacio proporcionado por el padre o una casilla.

Expand, el padre permite que el hijo crezca cuando haya espacio adicional disponible.

Fill, el espacio adicional es asignado al propio hijo en si.

documentación, https://developer.gnome.org/gtk3/stable/ch30s02.html

Grid no posee ninguna propiedad personalizada para controlar el espacio a sus hijos, pero soporta hexpand, vexpand, halign, valign; v para vertical y h para horizontal.

hexpand y vexpand, permiten que una columna de Grid crezca si hay espacio disponible cuando contiene un hijo con expand asignado.

la propiedad fill es asignada por halign y valign respectivamente, por medio del enum Align el cual posee la siguiente definición:

enum Align 
{ 
  ALIGN_FILL, 
  ALIGN_START, 
  ALIGN_END, 
  ALIGN_CENTER, 
  ALIGN_BASELINE 
};

Su funcionamiento y como se comporta un objeto se puede entender mejor con la siguiente imagen:

introducir la descripción de la imagen aquí

Un comportamiento de Grid cuando se asigna expand tanto vertical como horizontal y se le indica que todas sus filas y columnas se distribuyan de manera homogénea, con set_row_homogeneous y set_column_homogeneous el padre del contenedor Grid dejara crecer hasta ocupar todo el espacio disponible, y el tamaño de las filas y columnas de Grid se distribuirán de manera homogenea.

Solución de la pregunta

Poseo el siguiente código:

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

    Gtk::Window ventanaPrincipal;
    Gtk::Frame  rellenoCentro;//<==mejor utilice Box, Frame muestra bordes
    Gtk::Button boton1, boton2;
    Gtk::Grid   contenedorMaestro;

    boton1.set_label("Boton1");
    boton1.set_vexpand(true);
    boton1.set_hexpand(true);

    boton2.set_label("Boton2");
    boton2.set_halign(Gtk::Align::ALIGN_CENTER);
    boton2.set_valign(Gtk::Align::ALIGN_FILL);

    rellenoCentro.set_vexpand(true);
    rellenoCentro.set_hexpand(true);

    contenedorMaestro.attach(boton1, 0, 0);
    contenedorMaestro.attach(rellenoCentro, 1, 1);
    contenedorMaestro.attach(boton2, 2, 2);       

    contenedorMaestro.set_vexpand(true);
    contenedorMaestro.set_hexpand(true);
    contenedorMaestro.set_row_homogeneous(true);
    contenedorMaestro.set_column_homogeneous(true);

    ventanaPrincipal.add(contenedorMaestro);
    ventanaPrincipal.show_all_children();

    return app->run(ventanaPrincipal);
}

el resultado es el siguiente:

introducir la descripción de la imagen aquí

Utilice la variable rellenoCentro para agregar un vació estratégico en el diseño, fácilmente pudo haber sido un botón, ahora que pasa si de la solución comentamos las siguientes líneas:

contenedorMaestro.set_row_homogeneous(true);
contenedorMaestro.set_column_homogeneous(true);

Se obtiene el siguiente resultado:

introducir la descripción de la imagen aquí

Y ahora, si de la solución comentamos es la siguiente línea:

contenedorMaestro.attach(rellenoCentro, 1, 1);

Se obtiene el siguiente resultado:

introducir la descripción de la imagen aquí

De este ultimo ejemplo, se puede notar, que la columnas del Grid no se expanden si no posee un objeto hijo, así la propiedad de homogeneidad este definida.


Documentación:

https://developer.gnome.org/gtkmm-tutorial/stable/ https://developer.gnome.org/gtkmm/3.89/namespaceGtk.html https://developer.gnome.org/gtk3/stable/ch30s02.html

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.