7.3 A tour of layouts

7.3.1 Row layouts and column layouts

Create a column layout containing three buttons as follows:

contain(make(<column-layout>, children: vector(make(<push-button>, label: "One"), make(<push-button>, label: "Two"), make(<push-button>, label: "Three"))));

Figure 7.24 Three button arranged in a column layout

Similarly, <row-layout> can be used to lay out any number of children in a single row.

A number of different init-keywords can be used to specify the initial appearance of any layouts you create. Using these init-keywords, you can ensure that all children are the same size in one or both dimensions, and that a certain amount of space is placed between each child. You can also place a border of any width around the children of a layout.

To equalize the heights or widths of any child in a layout, use equalize-heights?: #t or equalize-widths?: #t respectively. To ensure that each child is shown in its entirety, the children are sized according to the largest child in the layout, for whatever dimension is being equalized.

The equalize-heights?: and equalize-widths?: init-keywords are particularly useful when defining a row of buttons, when you want to ensure that the buttons are sized automatically. In addition, remember that each button can be specified as max-width: $fill to ensure that the button is sized to be as large as possible, rather than the size of its label.

To add space between each child in a layout, use spacing:, which takes an integer value that represents the number of pixels of space that is placed around each child in the layout. Use border: in much the same way; specifying an integer value creates a border around the entire layout which is that number of pixels wide. Notice that while spacing: places space around each individual child in the layout, border: creates a border around the entire layout. You can use border-type: to specify whether you want borders to appear sunken, raised, or flat.

Each of the init-keywords described above apply to both row layouts and column layouts. The following init-keywords each only apply to one of these classes.

Use x-alignment: to align the children of a column layout along the x axis. This can be either #"left", #"right", or #"center", and the children of the column layout are aligned appropriately. By default, the children of a column layout are aligned along the left hand side.

Use y-alignment: to align the children of a row layout along the y axis. This can be either #"top", #"bottom", or #"center", and the children of the column layout are aligned appropriately. By default, the children of a row layout are aligned along the top.