Native Windows GUI: Layouts
A layout resizes and moves the children controls of a Window control
Native windows GUI includes 2 type of layouts: BoxLayout and GridLayout.
- A FlexboxLayout lays out widgets in vertical line or horizontal line
- A GridLayout lays out widgets in a grid
To learn how to use layouts with
native-windows-derive
see
the derive section
Basic usage
Just like most NWG objects, layouts are created using a builder api. A layout uses 1 parent control and 0 or more children control. For children or for the parent,
the layout only accepts window-like controls (
valid: buttons, edit, etc.
not valid: menu, timer, notice, etc).
Layouts implement default. A default layout must first be initialized with a builder. Trying to call methods on default builders will cause a panic.
Layouts resize their children automatically when the parent control is resized. This also triggers a
OnResize
event.
GridLayout and
flexbox have a similar builder API. With some exceptions when defining children.
Layouts uses interior mutability, as such it's always possible to edit their properties or their children
Gridlayout
The GridLayout splits the parent control into an equally spaced grid. Children are placed in that grid using a [row, column] index.
Optionally, children controls can span across more than one row/column.
Children in a gridlayout can be added using the
child
method or the
child_item
method. The first one is a simpler interface when the
children control do not span across multiple cells.
child_item
is used to specify the row span and the column span of the children.
A gridlayout can be manually resized with the
resize
method. Also, if one of the layout properties was updates, the
fit
method can be used
to show the change and refit the children in the parent.
Lastly, check out the grid layout docs for the layout properties.
A grid layout example:
let grid = nwg::GridLayout::default();
let window: &nwg::Window = /*...*/;
let item1: &nwg::Button = /*...*/;
let item2: &nwg::Label = /*...*/;
nwg::GridLayout::builder()
.parent(&window)
.max_row(Some(6))
.spacing(5)
.margin([0,0,0,0])
.child(0, 0, &item1)
.child_item(nwg::GridLayoutItem::new(&item2, 1, 0, 2, 1))
.build(&grid);
FlexboxLayout
Flexbox layout uses
stretch to align children controls in a row or in column.
Internally, nwg controls (both the parent and the children) are associated with a stretch node/style. See the flexbox layout docs for the style methods.
At building time, a new children can be added to the layout using the
child
method. Following this method, any
child_*
method call will
customize the style of this child. Another call to
child
will finalize the current child style
A flexbox layout example:
use nwg::stretch::{geometry::{Size, Rect}, style::{Dimension as D, FlexDirection}};
let window: &nwg::Window = /*...*/;
let item1: &nwg::Button = /*...*/;
let item2: &nwg::Label = /*...*/;
const FIFTY_PC: D = D::Percent(0.5);
const PT_10: D = D::Points(10.0);
const PT_5: D = D::Points(5.0);
const PADDING: Rect<D> = Rect{ start: PT_10, end: PT_10, top: PT_10, bottom: PT_10 };
const MARGIN: Rect<D> = Rect{ start: PT_5, end: PT_5, top: PT_5, bottom: PT_5 };
nwg::FlexboxLayout::builder()
.parent(&window)
.flex_direction(FlexDirection::Row)
.padding(PADDING)
.child(&item1)
.child_margin(MARGIN)
.child_max_size(Size { width: D::Points(200.0), height: D::Undefined })
.child_size(Size { width: FIFTY_PC, height: D::Auto })
.child(&item2)
.child_margin(MARGIN)
.child_size(Size { width: D::Percent(0.25), height: FIFTY_PC });
Examples