Struct FlexboxLayout

Source

pub struct FlexboxLayout { /* private fields */ }

Expand description

A flexbox layout that organizes the children control in a parent control. Flexbox uses the stretch library internally ( https://github.com/vislyhq/stretch ).

FlexboxLayout requires the flexbox feature.

Implementations§

Source §

impl FlexboxLayout

Source

pub fn builder() -> FlexboxLayoutBuilder

Examples found in repository ?

examples/flexbox_sub_layout.rs (line 102)

42        fn build_ui(mut data: FlexBoxApp) -> Result<FlexBoxAppUi, nwg::NwgError> {
43            use nwg::Event as E;
44
45            // Controls
46            nwg::Window::builder()
47                .size((500, 500))
48                .position((300, 300))
49                .title("Flexbox example")
50                .build(&mut data.window)?;
51
52            nwg::Button::builder()
53                .text("Btn 1")
54                .parent(&data.window)
55                .focus(true)
56                .build(&mut data.button1)?;
57
58            nwg::Button::builder()
59                .text("Btn 2")
60                .parent(&data.window)
61                .focus(true)
62                .build(&mut data.button2)?;
63
64            nwg::Button::builder()
65                .text("Btn 3")
66                .parent(&data.window)
67                .focus(true)
68                .build(&mut data.button3)?;
69
70            // Wrap-up
71            let ui = FlexBoxAppUi {
72                inner: Rc::new(data),
73                default_handler: Default::default(),
74            };
75
76            // Events
77            let evt_ui = Rc::downgrade(&ui.inner);
78            let handle_events = move |evt, _evt_data, handle| {
79                if let Some(evt_ui) = evt_ui.upgrade() {
80                    match evt {
81                        E::OnWindowClose => {
82                            if &handle == &evt_ui.window {
83                                FlexBoxApp::exit(&evt_ui);
84                            }
85                        }
86                        _ => {}
87                    }
88                }
89            };
90
91            *ui.default_handler.borrow_mut() = Some(nwg::full_bind_event_handler(
92                &ui.window.handle,
93                handle_events,
94            ));
95
96            // Layout
97            use nwg::stretch::{
98                geometry::Size,
99                style::{Dimension as D, FlexDirection},
100            };
101
102            nwg::FlexboxLayout::builder()
103                .parent(&ui.window)
104                .flex_direction(FlexDirection::Column)
105                .child(&ui.button2)
106                .child_size(Size {
107                    width: D::Auto,
108                    height: D::Points(200.0),
109                })
110                .child(&ui.button3)
111                .child_flex_grow(2.0)
112                .child_size(Size {
113                    width: D::Auto,
114                    height: D::Auto,
115                })
116                .build_partial(&ui.layout2)?;
117
118            nwg::FlexboxLayout::builder()
119                .parent(&ui.window)
120                .flex_direction(FlexDirection::Row)
121                .child(&ui.button1)
122                .child_flex_grow(2.0)
123                .child_size(Size {
124                    width: D::Auto,
125                    height: D::Auto,
126                })
127                .child_layout(&ui.layout2)
128                .child_size(Size {
129                    width: D::Points(300.0),
130                    height: D::Auto,
131                })
132                .build(&ui.layout)?;
133
134            return Ok(ui);
135        }

More examples

Hide additional examples

examples/flexbox.rs (line 114)

41        fn build_ui(mut data: FlexBoxApp) -> Result<FlexBoxAppUi, nwg::NwgError> {
42            use nwg::Event as E;
43
44            // Controls
45            nwg::Window::builder()
46                .size((500, 300))
47                .position((300, 300))
48                .title("Flexbox example")
49                .build(&mut data.window)?;
50
51            nwg::Button::builder()
52                .text("Btn 1")
53                .parent(&data.window)
54                .focus(true)
55                .build(&mut data.button1)?;
56
57            nwg::Button::builder()
58                .text("Btn 2")
59                .parent(&data.window)
60                .build(&mut data.button2)?;
61
62            nwg::Button::builder()
63                .text("Btn 3")
64                .parent(&data.window)
65                .build(&mut data.button3)?;
66
67            // Wrap-up
68            let ui = FlexBoxAppUi {
69                inner: Rc::new(data),
70                default_handler: Default::default(),
71            };
72
73            // Events
74            let evt_ui = Rc::downgrade(&ui.inner);
75            let handle_events = move |evt, _evt_data, handle| {
76                if let Some(evt_ui) = evt_ui.upgrade() {
77                    match evt {
78                        E::OnWindowClose => {
79                            if &handle == &evt_ui.window {
80                                FlexBoxApp::exit(&evt_ui);
81                            }
82                        }
83                        _ => {}
84                    }
85                }
86            };
87
88            *ui.default_handler.borrow_mut() = Some(nwg::full_bind_event_handler(
89                &ui.window.handle,
90                handle_events,
91            ));
92
93            // Layout
94            use nwg::stretch::{
95                geometry::{Rect, Size},
96                style::{AlignSelf, Dimension as D, FlexDirection},
97            };
98            const FIFTY_PC: D = D::Percent(0.5);
99            const PT_10: D = D::Points(10.0);
100            const PT_5: D = D::Points(5.0);
101            const PADDING: Rect<D> = Rect {
102                start: PT_10,
103                end: PT_10,
104                top: PT_10,
105                bottom: PT_10,
106            };
107            const MARGIN: Rect<D> = Rect {
108                start: PT_5,
109                end: PT_5,
110                top: PT_5,
111                bottom: PT_5,
112            };
113
114            nwg::FlexboxLayout::builder()
115                .parent(&ui.window)
116                .flex_direction(FlexDirection::Row)
117                .padding(PADDING)
118                .child(&ui.button1)
119                .child_margin(MARGIN)
120                .child_max_size(Size {
121                    width: D::Points(200.0),
122                    height: D::Undefined,
123                })
124                .child_size(Size {
125                    width: FIFTY_PC,
126                    height: D::Auto,
127                })
128                .child(&ui.button2)
129                .child_margin(MARGIN)
130                .child_align_self(AlignSelf::FlexEnd)
131                .child_size(Size {
132                    width: D::Percent(0.25),
133                    height: FIFTY_PC,
134                })
135                .child(&ui.button3)
136                .child_margin(MARGIN)
137                .child_flex_grow(2.0)
138                .child_size(Size {
139                    width: D::Auto,
140                    height: D::Auto,
141                })
142                .build(&ui.layout)?;
143
144            return Ok(ui);
145        }

examples/partials.rs (line 226)

141        fn build_ui(mut data: PartialDemo) -> Result<Rc<PartialDemoUi>, nwg::NwgError> {
142            use nwg::Event as E;
143
144            // Controls
145            nwg::Window::builder()
146                .size((500, 400))
147                .position((300, 300))
148                .title("Many UI")
149                .build(&mut data.window)?;
150
151            nwg::ListBox::builder()
152                .collection(vec!["People", "Animals", "Food"])
153                .focus(true)
154                .parent(&data.window)
155                .build(&mut data.menu)?;
156
157            nwg::Frame::builder()
158                .parent(&data.window)
159                .build(&mut data.frame1)?;
160
161            nwg::Frame::builder()
162                .flags(nwg::FrameFlags::BORDER)
163                .parent(&data.window)
164                .build(&mut data.frame2)?;
165
166            nwg::Frame::builder()
167                .flags(nwg::FrameFlags::BORDER)
168                .parent(&data.window)
169                .build(&mut data.frame3)?;
170
171            // Partials
172            PeopleUi::build_partial(&mut data.people_ui, Some(&data.frame1))?;
173            AnimalUi::build_partial(&mut data.animal_ui, Some(&data.frame2))?;
174            FoodUi::build_partial(&mut data.food_ui, Some(&data.frame3))?;
175
176            // Wrap-up
177            let ui = Rc::new(PartialDemoUi {
178                inner: data,
179                default_handler: Default::default(),
180            });
181
182            // Events
183            let mut window_handles = vec![&ui.window.handle];
184            window_handles.append(&mut ui.people_ui.handles());
185            window_handles.append(&mut ui.animal_ui.handles());
186            window_handles.append(&mut ui.food_ui.handles());
187
188            for handle in window_handles.iter() {
189                let evt_ui = ui.clone();
190                let handle_events = move |evt, evt_data, handle| {
191                    evt_ui.people_ui.process_event(evt, &evt_data, handle);
192                    evt_ui.animal_ui.process_event(evt, &evt_data, handle);
193                    evt_ui.food_ui.process_event(evt, &evt_data, handle);
194
195                    match evt {
196                        E::OnListBoxSelect => {
197                            if &handle == &evt_ui.menu {
198                                PartialDemo::change_interface(&evt_ui.inner);
199                            }
200                        }
201                        E::OnWindowClose => {
202                            if &handle == &evt_ui.window {
203                                PartialDemo::exit(&evt_ui.inner);
204                            }
205                        }
206                        E::OnButtonClick => {
207                            if &handle == &evt_ui.people_ui.save_btn
208                                || &handle == &evt_ui.animal_ui.save_btn
209                                || &handle == &evt_ui.food_ui.save_btn
210                            {
211                                PartialDemo::save(&evt_ui.inner);
212                            }
213                        }
214                        _ => {}
215                    }
216                };
217
218                ui.default_handler
219                    .borrow_mut()
220                    .push(nwg::full_bind_event_handler(handle, handle_events));
221            }
222
223            // Layout
224            use nwg::stretch::{geometry::Size, style::Dimension as D};
225
226            nwg::FlexboxLayout::builder()
227                .parent(&ui.window)
228                .child(&ui.menu)
229                .child_size(Size {
230                    width: D::Percent(0.3),
231                    height: D::Auto,
232                })
233                .child(&ui.frame1)
234                .child_size(Size {
235                    width: D::Percent(1.0),
236                    height: D::Auto,
237                })
238                .build(&ui.layout)?;
239
240            return Ok(ui);
241        }

Source

pub fn style(&self) -> Style

Returns the style of the parent control

Panic:

The layout must have been successfully built otherwise this function will panic.

Source

pub fn set_style(&self, style: Style)

Sets the style of the layout parent control

Panic:

The layout must have been successfully built otherwise this function will panic.

Source

pub fn add_child<W: Into<ControlHandle>>( &self, c: W, style: Style, ) -> Result<(), Error>

Add a new children in the layout with the stretch style.

Panic:

If the control is not a window-like control
If the layout was not initialized

Examples found in repository ?

examples/partials.rs (line 54)

26    fn change_interface(&self) {
27        self.frame1.set_visible(false);
28        self.frame2.set_visible(false);
29        self.frame3.set_visible(false);
30
31        let layout = &self.layout;
32        if layout.has_child(&self.frame1) {
33            layout.remove_child(&self.frame1);
34        }
35        if layout.has_child(&self.frame2) {
36            layout.remove_child(&self.frame2);
37        }
38        if layout.has_child(&self.frame3) {
39            layout.remove_child(&self.frame3);
40        }
41
42        use nwg::stretch::{
43            geometry::Size,
44            style::{Dimension as D, Style},
45        };
46        let mut style = Style::default();
47        style.size = Size {
48            width: D::Percent(1.0),
49            height: D::Auto,
50        };
51
52        match self.menu.selection() {
53            None | Some(0) => {
54                layout.add_child(&self.frame1, style).unwrap();
55                self.frame1.set_visible(true);
56            }
57            Some(1) => {
58                layout.add_child(&self.frame2, style).unwrap();
59                self.frame2.set_visible(true);
60            }
61            Some(2) => {
62                layout.add_child(&self.frame3, style).unwrap();
63                self.frame3.set_visible(true);
64            }
65            Some(_) => unreachable!(),
66        }
67    }

Source

pub fn remove_child<W: Into<ControlHandle>>(&self, c: W)

Remove a children from the layout

Panic:

If the control is not a window-like control
If the control is not in the layout (see has_child)
If the layout was not initialized

Examples found in repository ?

examples/partials.rs (line 33)

26    fn change_interface(&self) {
27        self.frame1.set_visible(false);
28        self.frame2.set_visible(false);
29        self.frame3.set_visible(false);
30
31        let layout = &self.layout;
32        if layout.has_child(&self.frame1) {
33            layout.remove_child(&self.frame1);
34        }
35        if layout.has_child(&self.frame2) {
36            layout.remove_child(&self.frame2);
37        }
38        if layout.has_child(&self.frame3) {
39            layout.remove_child(&self.frame3);
40        }
41
42        use nwg::stretch::{
43            geometry::Size,
44            style::{Dimension as D, Style},
45        };
46        let mut style = Style::default();
47        style.size = Size {
48            width: D::Percent(1.0),
49            height: D::Auto,
50        };
51
52        match self.menu.selection() {
53            None | Some(0) => {
54                layout.add_child(&self.frame1, style).unwrap();
55                self.frame1.set_visible(true);
56            }
57            Some(1) => {
58                layout.add_child(&self.frame2, style).unwrap();
59                self.frame2.set_visible(true);
60            }
61            Some(2) => {
62                layout.add_child(&self.frame3, style).unwrap();
63                self.frame3.set_visible(true);
64            }
65            Some(_) => unreachable!(),
66        }
67    }

Source

pub fn has_child<W: Into<ControlHandle>>(&self, c: W) -> bool

Check if the selected control is a children in the layout. Does not check in the sublayouts

Panic:

If the control is not a window-like control.
If the layout was not initialized

Examples found in repository ?

examples/partials.rs (line 32)

26    fn change_interface(&self) {
27        self.frame1.set_visible(false);
28        self.frame2.set_visible(false);
29        self.frame3.set_visible(false);
30
31        let layout = &self.layout;
32        if layout.has_child(&self.frame1) {
33            layout.remove_child(&self.frame1);
34        }
35        if layout.has_child(&self.frame2) {
36            layout.remove_child(&self.frame2);
37        }
38        if layout.has_child(&self.frame3) {
39            layout.remove_child(&self.frame3);
40        }
41
42        use nwg::stretch::{
43            geometry::Size,
44            style::{Dimension as D, Style},
45        };
46        let mut style = Style::default();
47        style.size = Size {
48            width: D::Percent(1.0),
49            height: D::Auto,
50        };
51
52        match self.menu.selection() {
53            None | Some(0) => {
54                layout.add_child(&self.frame1, style).unwrap();
55                self.frame1.set_visible(true);
56            }
57            Some(1) => {
58                layout.add_child(&self.frame2, style).unwrap();
59                self.frame2.set_visible(true);
60            }
61            Some(2) => {
62                layout.add_child(&self.frame3, style).unwrap();
63                self.frame3.set_visible(true);
64            }
65            Some(_) => unreachable!(),
66        }
67    }

Source

pub fn children(&self) -> FlexboxLayoutChildren<'_>

Borrow the inner value of the flexbox layout. While the returned value lives, calling other method of the the flexbox layout that modify the inner state will cause a panic. Simple looktup (ex: has_child) will still work.

Panic:

The layout must have been successfully built otherwise this function will panic.

Source

pub fn children_mut(&self) -> FlexboxLayoutChildrenMut<'_>

Borrow the inner value of the flexbox layout as mutable. While the returned value lives, calling other method of the the flexbox layout will cause a panic.

If the children of the layout were modified, call fit to update the layout after FlexboxLayoutChildrenMut is dropped.

Panic: