📄 sec-containers.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title> Containers And Widget Layout </title> <meta name="GENERATOR" content= "Modular DocBook HTML Stylesheet Version 1.45"> <link rel="HOME" title="GTK+ / Gnome Application Development" href="ggad.html"> <link rel="UP" title="GTK+ Basics" href="cha-gtk.html"> <link rel="PREVIOUS" title="GTK+ Basics" href="cha-gtk.html"> <link rel="NEXT" title="Widget Concepts" href="z57.html"> </head> <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink= "#840084" alink="#0000FF"> <div class="NAVHEADER"> <table width="100%" border="0" bgcolor="#ffffff" cellpadding= "1" cellspacing="0"> <tr> <th colspan="4" align="center"> <font color="#000000" size="2">GTK+ / Gnome Application Development</font> </th> </tr> <tr> <td width="25%" bgcolor="#ffffff" align="left"> <a href="cha-gtk.html"><font color="#0000ff" size="2"> <b><<< Previous</b></font></a> </td> <td width="25%" colspan="2" bgcolor="#ffffff" align= "center"> <font color="#0000ff" size="2"><b><a href="ggad.html"> <font color="#0000ff" size="2"><b> Home</b></font></a></b></font> </td> <td width="25%" bgcolor="#ffffff" align="right"> <a href="z57.html"><font color="#0000ff" size="2"><b> Next >>></b></font></a> </td> </tr> </table> </div> <div class="SECT1"> <h1 class="SECT1"> <a name="SEC-CONTAINERS">Containers And Widget Layout</a> </h1> <p> There are two kinds of container widgets in GTK+. All of them are subclasses of the abstract <tt class="CLASSNAME"> GtkContainer</tt>. The first type of container widget always descends from <tt class="CLASSNAME">GtkBin</tt>, another abstract base class. Descendents of <tt class= "CLASSNAME">GtkBin</tt> can contain only one child widget; these containers add some kind of functionality to the child. For example, <tt class="CLASSNAME">GtkButton</tt> is a <tt class="CLASSNAME">GtkBin</tt> which makes the child into a clickable button. <tt class="CLASSNAME"> GtkFrame</tt> is a <tt class="CLASSNAME">GtkBin</tt> which draws a relieved border around the child. <tt class= "CLASSNAME">GtkWindow</tt> allows the child to appear in a toplevel window. </p> <p> The second type of container widget often has <tt class= "CLASSNAME">GtkContainer</tt> as its immediate parent. These containers can have more than one child, and their purpose is to manage layout. "Manage layout" means that these containers assign <i class="EMPHASIS">sizes</i> and <i class="EMPHASIS">positions</i> to the widgets they contain. For example, <tt class="CLASSNAME">GtkVBox</tt> arranges its children in a vertical stack. <tt class= "CLASSNAME">GtkFixed</tt> allows you to position children at arbitrary coordinates. <tt class="CLASSNAME"> GtkPacker</tt> gives you Tk-style layout management. </p> <p> This chapter is about the second kind of container. To produce the layout you want without hard-coding any sizes, you'll need to understand how to use these. The goal is to avoid making assumptions about window size, screen size, widget appearance, fonts, and so on. Your application should automatically adapt if these factors change. </p> <div class="SECT2"> <h2 class="SECT2"> <a name="SEC-SIZENEGOTIATION">Size Allocation</a> </h2> <p> To understand layout containers, you first have to understand how GTK+ widgets negotiate their size. It's quite simple really; there are only two concepts, <i class="FIRSTTERM">requisition</i> and <i class= "FIRSTTERM">allocation</i>. These correspond to the two phases of layout. </p> <div class="SECT3"> <h3 class="SECT3"> <a name="Z47">Requisition</a> </h3> <p> A widget's <i class="FIRSTTERM">requisition</i> consists of a width and a height---the size the widget would like to be. This is represented by a <span class= "STRUCTNAME">GtkRequisition</span> struct: </p> <table border="0" bgcolor="#E0E0E0" width="100%"> <tr> <td><pre class="PROGRAMLISTING"> typedef struct _GtkRequisition GtkRequisition;struct _GtkRequisition{ gint16 width; gint16 height;}; </pre> </td> </tr> </table> <p> Different widgets choose what size to request in different ways. <tt class="CLASSNAME">GtkLabel</tt>, for example, requests enough size to display all the text in the label. Most container widgets base their size request on the size requests of their children. For example, if you place several buttons in a box, the box will ask to be large enough to hold all the buttons. </p> <p> The first phase of layout starts with a toplevel widget such as <tt class="CLASSNAME">GtkWindow</tt>. Since it's a container, <tt class="CLASSNAME">GtkWindow</tt> asks its child widget for a size request; that child might ask its own children; and so on recursively. When all child widgets have been queried, <tt class= "CLASSNAME">GtkWindow</tt> will finally get a <span class="STRUCTNAME">GtkRequisition</span> back from its child. Depending on how it was configured, <tt class= "CLASSNAME">GtkWindow</tt> may or may not be able to expand to accomodate the size request. </p> </div> <div class="SECT3"> <h3 class="SECT3"> <a name="Z48">Allocation</a> </h3> <p> Phase two of layout begins at this point. <tt class= "CLASSNAME">GtkWindow</tt> makes a decision about how much space is actually available for its child, and communicates its decision to the child. This is known as the child's <i class="FIRSTTERM">allocation</i>, represented by the following struct: </p> <table border="0" bgcolor="#E0E0E0" width="100%"> <tr> <td><pre class="PROGRAMLISTING"> typedef struct _GtkAllocation GtkAllocation;struct _GtkAllocation{ gint16 x; gint16 y; guint16 width; guint16 height;}; </pre> </td> </tr> </table> <p> The <span class="STRUCTNAME">width</span> and <span class="STRUCTNAME">height</span> elements are identical to <span class="STRUCTNAME">GtkRequisition</span>; they represent the size of the widget. A <span class= "STRUCTNAME">GtkAllocation</span> also includes the coordinates of the child with respect to its parent. <span class="STRUCTNAME">GtkAllocation</span>s are assigned to children by their parent container. </p> <p> Widgets are required to honor the <span class= "STRUCTNAME">GtkAllocation</span> given to them. <span class="STRUCTNAME">GtkRequisition</span> is only a request; widgets must be able to cope with any size. </p> <p> Given the layout process, it's easy to see what role containers play. Their job is to assemble each child's requisition into a single requisition to be passed up the widget tree; then to divide the allocation they receive between their children. Exactly how this happens depends on the particular container. </p> </div> </div> <div class="SECT2"> <h2 class="SECT2"> <a name="SEC-GTKBOX"><tt class="CLASSNAME"> GtkBox</tt></a> </h2> <p> A <tt class="CLASSNAME">GtkBox</tt> manages a row (<tt class="CLASSNAME">GtkHBox</tt>) or column (<tt class= "CLASSNAME">GtkVBox</tt>) of widgets. For <tt class= "CLASSNAME">GtkHBox</tt>, all the widgets are assigned the same height; the box's job is to distribute the available width between them. <tt class="CLASSNAME"> GtkHBox</tt> optionally uses some of the available width to leave gaps (called "spacing") between widgets. <tt class="CLASSNAME">GtkVBox</tt> is identical, but in the opposite direction (i.e., it distributes available height rather than width). <tt class="CLASSNAME">GtkBox</tt> is an abstract base class; <tt class="CLASSNAME"> GtkVBox</tt> and <tt class="CLASSNAME">GtkHBox</tt> can be used almost entirely via its interface. Boxes are the most useful container widget. </p> <p> To create a <tt class="CLASSNAME">GtkBox</tt>, you use one of the constructors shown in <a href= "sec-containers.html#FL-HBOXCONSTRUCT">Figure 2</a> and <a href="sec-containers.html#FL-VBOXCONSTRUCT">Figure 3</a>. The box constructor functions take two parameters. If <span class="STRUCTNAME">TRUE</span>, <span class= "STRUCTNAME">homogeneous</span> means that all children of the box will be allocated the same amount of space. <span class="STRUCTNAME">spacing</span> specifies the amount of space between each child. There are functions to change spacing and toggle homogeneity after the box is created. </p> <div class="FIGURE"> <a name="FL-HBOXCONSTRUCT"></a> <div class="FUNCSYNOPSIS"> <a name="FL-HBOXCONSTRUCT.SYNOPSIS"></a> <table border="0" bgcolor="#E0E0E0" width="100%"> <tr> <td><pre class="FUNCSYNOPSISINFO">#include <gtk/gtkhbox.h></pre> </td> </tr> </table> <p> <code><code class="FUNCDEF">GtkWidget* <tt class= "FUNCTION">gtk_hbox_new</tt></code>(gboolean <tt class="PARAMETER"><i>homogeneous</i></tt>, gint <tt class="PARAMETER"><i>spacing</i></tt>);</code> </p> </div> <p> <b>Figure 2. <tt class="CLASSNAME">GtkHBox</tt> Constructor</b> </p> </div> <div class="FIGURE"> <a name="FL-VBOXCONSTRUCT"></a> <div class="FUNCSYNOPSIS"> <a name="FL-VBOXCONSTRUCT.SYNOPSIS"></a> <table border="0" bgcolor="#E0E0E0" width="100%"> <tr> <td><pre class="FUNCSYNOPSISINFO">#include <gtk/gtkvbox.h></pre> </td> </tr> </table> <p> <code><code class="FUNCDEF">GtkWidget* <tt class= "FUNCTION">gtk_vbox_new</tt></code>(gboolean <tt class="PARAMETER"><i>homogeneous</i></tt>, gint <tt class="PARAMETER"><i>spacing</i></tt>);</code> </p> </div> <p> <b>Figure 3. <tt class="CLASSNAME">GtkVBox</tt> Constructor</b> </p> </div> <p> There are two basic functions to add a child to a <tt class="CLASSNAME">GtkBox</tt>; they are shown in <a href= "sec-containers.html#FL-BOXPACK">Figure 4</a>. </p> <div class="FIGURE"> <a name="FL-BOXPACK"></a> <div class="FUNCSYNOPSIS"> <a name="FL-BOXPACK.SYNOPSIS"></a> <table border="0" bgcolor="#E0E0E0" width="100%"> <tr> <td><pre class="FUNCSYNOPSISINFO">#include <gtk/gtkbox.h></pre> </td> </tr> </table> <p> <code><code class="FUNCDEF">void <tt class= "FUNCTION">gtk_box_pack_start</tt></code>(GtkBox* <tt class="PARAMETER"><i>box</i></tt>, GtkWidget* <tt class="PARAMETER"><i>child</i></tt>, gboolean <tt class="PARAMETER"><i>expand</i></tt>, gboolean <tt class="PARAMETER"><i>fill</i></tt>, gint <tt class= "PARAMETER"><i>padding</i></tt>);</code> </p> <p> <code><code class="FUNCDEF">void <tt class= "FUNCTION">gtk_box_pack_end</tt></code>(GtkBox* <tt class="PARAMETER"><i>box</i></tt>, GtkWidget* <tt class="PARAMETER"><i>child</i></tt>, gboolean <tt class="PARAMETER"><i>expand</i></tt>, gboolean <tt class="PARAMETER"><i>fill</i></tt>, gint <tt class= "PARAMETER"><i>padding</i></tt>);</code>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -