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 99)

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

More examples

Hide additional examples

examples/flexbox.rs (line 101)

44        fn build_ui(mut data: FlexBoxApp) -> Result<FlexBoxAppUi, nwg::NwgError> {
45            use nwg::Event as E;
46            
47            // Controls
48            nwg::Window::builder()
49                .size((500, 300))
50                .position((300, 300))
51                .title("Flexbox example")
52                .build(&mut data.window)?;
53
54            nwg::Button::builder()
55                .text("Btn 1")
56                .parent(&data.window)
57                .focus(true)
58                .build(&mut data.button1)?;
59
60            nwg::Button::builder()
61                .text("Btn 2")
62                .parent(&data.window)
63                .build(&mut data.button2)?;
64
65            nwg::Button::builder()
66                .text("Btn 3")
67                .parent(&data.window)
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           *ui.default_handler.borrow_mut() = Some(nwg::full_bind_event_handler(&ui.window.handle, handle_events));
91
92
93            // Layout
94            use nwg::stretch::{geometry::{Size, Rect}, style::{Dimension as D, FlexDirection, AlignSelf}};
95            const FIFTY_PC: D = D::Percent(0.5);
96            const PT_10: D = D::Points(10.0);
97            const PT_5: D = D::Points(5.0);
98            const PADDING: Rect<D> = Rect{ start: PT_10, end: PT_10, top: PT_10, bottom: PT_10 };
99            const MARGIN: Rect<D> = Rect{ start: PT_5, end: PT_5, top: PT_5, bottom: PT_5 };
100
101            nwg::FlexboxLayout::builder()
102                .parent(&ui.window)
103                .flex_direction(FlexDirection::Row)
104                .padding(PADDING)
105                .child(&ui.button1)
106                    .child_margin(MARGIN)
107                    .child_max_size(Size { width: D::Points(200.0), height: D::Undefined })
108                    .child_size(Size { width: FIFTY_PC, height: D::Auto })
109                .child(&ui.button2)
110                    .child_margin(MARGIN)
111                    .child_align_self(AlignSelf::FlexEnd)
112                    .child_size(Size { width: D::Percent(0.25), height: FIFTY_PC })
113                .child(&ui.button3)
114                    .child_margin(MARGIN)
115                    .child_flex_grow(2.0)
116                    .child_size(Size { width: D::Auto, height: D::Auto })
117                .build(&ui.layout)?;
118
119            return Ok(ui);
120        }

examples/partials.rs (line 211)

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

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 44)

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

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 34)

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

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 34)

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

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: