Gtk.Container

const Gtk = imports.gi.Gtk;

let container = new Gtk.Container({
    border_width: value,
    child: value,
    resize_mode: value,
});
  

A GTK+ user interface is constructed by nesting widgets inside widgets. Container widgets are the inner nodes in the resulting tree of widgets: they contain other widgets. So, for example, you might have a Gtk.Window containing a Gtk.Frame containing a Gtk.Label. If you wanted an image instead of a textual label inside the frame, you might replace the Gtk.Label widget with a Gtk.Image widget.

There are two major kinds of container widgets in GTK+. Both are subclasses of the abstract GtkContainer base class.

The first type of container widget has a single child widget and derives from Gtk.Bin. These containers are <emphasis>decorators</emphasis>, which add some kind of functionality to the child. For example, a Gtk.Button makes its child into a clickable button; a Gtk.Frame draws a frame around its child and a Gtk.Window places its child widget inside a top-level window.

The second type of container can have more than one child; its purpose is to manage <emphasis>layout</emphasis>. This means that these containers assign sizes and positions to their children. For example, a Gtk.HBox arranges its children in a horizontal row, and a Gtk.Grid arranges the widgets it contains in a two-dimensional grid.

<refsect2 id="container-geometry-management"> <title>Height for width geometry management</title> <para> GTK+ uses a height-for-width (and width-for-height) geometry management system. Height-for-width means that a widget can change how much vertical space it needs, depending on the amount of horizontal space that it is given (and similar for width-for-height).

There are some things to keep in mind when implementing container widgets that make use of GTK+'s height for width geometry management system. First, it's important to note that a container must prioritize one of its dimensions, that is to say that a widget or container can only have a Gtk.SizeRequestMode that is Gtk.SizeRequestMode.height_for_width or Gtk.SizeRequestMode.width_for_height. However, every widget and container must be able to respond to the APIs for both dimensions, i.e. even if a widget has a request mode that is height-for-width, it is possible that its parent will request its sizes using the width-for-height APIs.

To ensure that everything works properly, here are some guidelines to follow when implementing height-for-width (or width-for-height) containers.

Each request mode involves 2 virtual methods. Height-for-width apis run through Gtk.get_preferred_width and then through Gtk.get_preferred_height_for_width. When handling requests in the opposite Gtk.SizeRequestMode it is important that every widget request at least enough space to display all of its content at all times.

When Gtk.get_preferred_height is called on a container that is height-for-width, the container must return the height for its minimum width. This is easily achieved by simply calling the reverse apis implemented for itself as follows:

<programlisting><![CDATA[ static void foo_container_get_preferred_height (GtkWidget *widget, gint *min_height, gint *nat_height) { if (i_am_in_height_for_width_mode) { gint min_width;

GTK_WIDGET_GET_CLASS (widget)->get_preferred_width (widget, &min_width, NULL); GTK_WIDGET_GET_CLASS (widget)->get_preferred_height_for_width (widget, min_width, min_height, nat_height); } else { ... many containers support both request modes, execute the real width-for-height request here by returning the collective heights of all widgets that are stacked vertically (or whatever is appropriate for this container) ... } } ]]></programlisting>

Similarly, when Gtk.get_preferred_width_for_height is called for a container or widget that is height-for-width, it then only needs to return the base minimum width like so:

<programlisting><![CDATA[ static void foo_container_get_preferred_width_for_height (GtkWidget *widget, gint for_height, gint *min_width, gint *nat_width) { if (i_am_in_height_for_width_mode) { GTK_WIDGET_GET_CLASS (widget)->get_preferred_width (widget, min_width, nat_width); } else { ... execute the real width-for-height request here based on the required width of the children collectively if the container were to be allocated the said height ... } } ]]></programlisting>

Height for width requests are generally implemented in terms of a virtual allocation of widgets in the input orientation. Assuming an height-for-width request mode, a container would implement the <function>get_preferred_height_for_width()</function> virtual function by first calling Gtk.get_preferred_width for each of its children.

For each potential group of children that are lined up horizontally, the values returned by Gtk.get_preferred_width should be collected in an array of Gtk.RequestedSize structures. Any child spacing should be removed from the input @for_width and then the collective size should be allocated using the distribute_natural_allocation convenience function.

The container will then move on to request the preferred height for each child by using Gtk.get_preferred_height_for_width and using the sizes stored in the Gtk.RequestedSize array.

To allocate a height-for-width container, it's again important to consider that a container must prioritize one dimension over the other. So if a container is a height-for-width container it must first allocate all widgets horizontally using a Gtk.RequestedSize array and distribute_natural_allocation and then add any extra space (if and where appropriate) for the widget to expand.

After adding all the expand space, the container assumes it was allocated sufficient height to fit all of its content. At this time, the container must use the total horizontal sizes of each widget to request the height-for-width of each of its children and store the requests in a Gtk.RequestedSize array for any widgets that stack vertically (for tabular containers this can be generalized into the heights and widths of rows and columns). The vertical space must then again be distributed using distribute_natural_allocation while this time considering the allocated height of the widget minus any vertical spacing that the container adds. Then vertical expand space should be added where appropriate and available and the container should go on to actually allocating the child widgets.

See <link linkend="geometry-management">GtkWidget's geometry management section</link> to learn more about implementing height-for-width geometry management for widgets. </para> </refsect2> <refsect2 id="child-properties"> <title>Child properties</title> <para> GtkContainer introduces <emphasis>child properties</emphasis>. These are object properties that are not specific to either the container or the contained widget, but rather to their relation. Typical examples of child properties are the position or pack-type of a widget which is contained in a Gtk.Box.

Use Gtk.install_child_property to install child properties for a container class and Gtk.find_child_property or Gtk.list_child_properties to get information about existing child properties.

To set the value of a child property, use Gtk.child_set_property, Gtk.child_set or Gtk.child_set_valist. To obtain the value of a child property, use Gtk.child_get_property, Gtk.child_get or Gtk.child_get_valist. To emit notification about child property changes, use Gtk.child_notify. </para> </refsect2> <refsect2 id="GtkContainer-BUILDER-UI"> <title>GtkContainer as GtkBuildable</title> <para> The GtkContainer implementation of the GtkBuildable interface supports a &lt;packing&gt; element for children, which can contain multiple &lt;property&gt; elements that specify child properties for the child. <example> <title>Child properties in UI definitions</title> <programlisting><![CDATA[ <object class="GtkVBox"> <child> <object class="GtkLabel"/> <packing> <property name="pack-type">start</property> </packing> </child> </object> ]]></programlisting> </example> Since 2.16, child properties can also be marked as translatable using the same "translatable", "comments" and "context" attributes that are used for regular properties. </para> </refsect2>