This layout positions the container's children in a single horizontal or vertical row. RowLayout provides many options as the height, width, and margins can be specified for each child.
RowLayout supports both pixel and percentage based heights using a RowData instace. Any values from 0 to 1, inclusive, are treated as percentages. Values greater than 1 are treated as pixels. And any value of -1 signals the size should be determined from the component itself
Consider the following code:
The RowData is passed a value of 1 for both width and height. As described above, values of 0 to 1 are treated as percentages. So we would expect the content panel to fill its container.
Here is the result:
Consider the following code:
In this example, we use a RowLayout with a horizontal orientation which causes the children to be placed in a single row. The first panel has values of .3 and 1 for width and height. .3 translates to 30% of the available width, and a value of 1 for height translates into 100% of the available height. The second panel uses 70% of the available width and its height is set to 50 pixels.
Here is the result:
In the final example, a value of -1 will be used. Remember that sizes of -1 signal the layout to use the component's computed size. In other words, let the component decide the size, not the layout.
The height of panel 1 is determined by its content and margins specified using the RowData instances. Here is the result:
RowLayout offers a great deal of flexibility via the RowData instance. You have complete control of the width, height, and margins of each child component.