Skip to main content

VStack

rlvgl_ui::layout

Struct VStack 

Source 
pub struct VStack { /* private fields */ }
Expand description

Container that positions children vertically.

Accepts any Widget from rlvgl_widgets and arranges them top-to-bottom.

Implementations§

Source§

impl VStack

Source

pub fn new(width: i32) -> Self

Create an empty vertical stack with the given width.

Examples found in repository?
examples/demo.rs (line 174)
21fn main() {
22    let theme = Theme::material_light();
23    let style = StyleBuilder::new()
24        .bg(theme.tokens.colors.primary)
25        .radius(theme.tokens.radii.md)
26        .build();
27
28    let new_components = (
29        Progress::new(theme.control_rect(0, 0, 90, ComponentSize::Sm), 0, 100)
30            .with_value(64)
31            .themed(
32                &theme,
33                ColorScheme::Primary,
34                Variant::Subtle,
35                ComponentSize::Md,
36            )
37            .opacity(220),
38        Select::new(theme.control_rect(0, 10, 90, ComponentSize::Sm).height(64))
39            .with_options(&["One", "Two", "Three"])
40            .with_selected_index(1)
41            .themed(
42                &theme,
43                ColorScheme::Info,
44                Variant::Outline,
45                ComponentSize::Sm,
46            )
47            .on_change(|idx, text| println!("select: {idx} {text}")),
48        Tabs::new(rect(0, 80, 120, 80), TabBarPos::Top)
49            .tab("Main")
50            .tab("Settings")
51            .themed(
52                &theme,
53                ColorScheme::Primary,
54                Variant::Solid,
55                ComponentSize::Md,
56            ),
57        ButtonMatrix::new(
58            theme
59                .control_rect(0, 170, 120, ComponentSize::Md)
60                .height(48),
61        )
62        .with_map(&["A", "B", "\n", "C", "D"])
63        .themed(
64            &theme,
65            ColorScheme::Neutral,
66            Variant::Outline,
67            ComponentSize::Md,
68        )
69        .on_activate(|id, text| println!("button matrix: {:?} {text}", id)),
70        Bar::new(theme.control_rect(0, 224, 90, ComponentSize::Xs), 0, 100)
71            .with_value(32)
72            .with_mode(BarMode::Normal)
73            .themed(
74                &theme,
75                ColorScheme::Success,
76                Variant::Subtle,
77                ComponentSize::Sm,
78            ),
79        Led::new(
80            theme
81                .origin_control_rect(12, ComponentSize::Xs)
82                .at(0, 240)
83                .size(12, 12),
84        )
85        .themed(
86            &theme,
87            ColorScheme::Success,
88            Variant::Solid,
89            ComponentSize::Xs,
90        )
91        .brightness(180),
92        Spinner::new(theme.origin_control_rect(24, ComponentSize::Md).at(20, 236))
93            .animation(30, 100)
94            .themed(
95                &theme,
96                ColorScheme::Primary,
97                Variant::Ghost,
98                ComponentSize::Md,
99            ),
100        List::new(
101            theme
102                .control_rect(0, 270, 100, ComponentSize::Sm)
103                .height(48),
104        )
105        .with_items(&["Alpha", "Beta", "Gamma"])
106        .themed(
107            &theme,
108            ColorScheme::Neutral,
109            Variant::Subtle,
110            ComponentSize::Sm,
111        ),
112        Divider::new(rect(0, 328, 100, 8), DividerOrientation::Horizontal).themed(
113            &theme,
114            ColorScheme::Neutral,
115            Variant::Outline,
116            ComponentSize::Sm,
117        ),
118        Spacer::height(theme.component_size(ComponentSize::Md).gap),
119        Table::new(rect(0, 342, 120, 48)).themed_parts(
120            &theme,
121            ColorScheme::Info,
122            Variant::Subtle,
123            ComponentSize::Sm,
124        ),
125        Calendar::new(rect(0, 396, 140, 96)).themed_parts(
126            &theme,
127            ColorScheme::Primary,
128            Variant::Outline,
129            ComponentSize::Sm,
130        ),
131    );
132
133    let layout = {
134        #[cfg(feature = "view")]
135        {
136            view! { VStack::new(90)
137            .child(20, |rect| Heading::new("Demo", rect))
138            .child(20, |rect| Text::new("Hello", rect))
139            .child(30, |rect| {
140                Button::new("Tap", rect)
141                    .icon("save")
142                    .on_click(|_| println!("clicked"))
143            })
144            .child(30, |rect| {
145                IconButton::new("edit", rect)
146                    .on_click(|_| println!("edit"))
147            })
148            .child(20, |rect| {
149                Checkbox::new("Accept", rect).on_change(|v| println!("checkbox: {v}"))
150            })
151            .child(20, |rect| {
152                Switch::new(rect).on_change(|v| println!("switch: {v}"))
153            })
154            .child(20, |rect| {
155                Radio::new("Option", rect).on_change(|v| println!("radio: {v}"))
156            })
157            .child(20, |rect| { Badge::new("NEW", rect) })
158            .child(20, |rect| {
159                Tag::new("rust", rect).on_remove(|| println!("tag removed"))
160            })
161            .child(30, |rect| { Alert::new("Saved", rect) })
162            .child(20, |rect| {
163                Input::new("Name", rect).on_change(|v| println!("input: {v}"))
164            })
165            .child(40, |rect| {
166                Textarea::new("Multiline", rect).on_change(|v| println!("textarea: {v}"))
167            })
168            .child(30, |rect| Modal::new("Modal", rect))
169            .child(30, |rect| Drawer::new("Menu", rect))
170            .child(30, |rect| Toast::new("Saved", rect)) }
171        }
172        #[cfg(not(feature = "view"))]
173        {
174            VStack::new(90)
175                .child(20, |rect| Heading::new("Demo", rect))
176                .child(20, |rect| Text::new("Hello", rect))
177                .child(30, |rect| {
178                    Button::new("Tap", rect)
179                        .icon("save")
180                        .on_click(|_| println!("clicked"))
181                })
182                .child(30, |rect| {
183                    IconButton::new("edit", rect).on_click(|_| println!("edit"))
184                })
185                .child(20, |rect| {
186                    Checkbox::new("Accept", rect).on_change(|v| println!("checkbox: {v}"))
187                })
188                .child(20, |rect| {
189                    Switch::new(rect).on_change(|v| println!("switch: {v}"))
190                })
191                .child(20, |rect| {
192                    Radio::new("Option", rect).on_change(|v| println!("radio: {v}"))
193                })
194                .child(20, |rect| Badge::new("NEW", rect))
195                .child(20, |rect| {
196                    Tag::new("rust", rect).on_remove(|| println!("tag removed"))
197                })
198                .child(30, |rect| Alert::new("Saved", rect))
199                .child(20, |rect| {
200                    Input::new("Name", rect).on_change(|v| println!("input: {v}"))
201                })
202                .child(40, |rect| {
203                    Textarea::new("Multiline", rect).on_change(|v| println!("textarea: {v}"))
204                })
205                .child(30, |rect| Modal::new("Modal", rect))
206                .child(30, |rect| Drawer::new("Menu", rect))
207                .child(30, |rect| Toast::new("Saved", rect))
208        }
209    };
210
211    let _ = (style, new_components, layout);
212}
Source

pub fn spacing(self, spacing: i32) -> Self

Set the spacing between stacked children.

Source

pub fn gap(self, gap: i32) -> Self

Set the gap between stacked children.

Source

pub fn child<W, F>(self, height: i32, builder: F) -> Self
where W: Widget + 'static, F: FnOnce(Rect) -> W,

Add a child of the given height, created by the supplied builder.

Examples found in repository?
examples/demo.rs (line 175)
21fn main() {
22    let theme = Theme::material_light();
23    let style = StyleBuilder::new()
24        .bg(theme.tokens.colors.primary)
25        .radius(theme.tokens.radii.md)
26        .build();
27
28    let new_components = (
29        Progress::new(theme.control_rect(0, 0, 90, ComponentSize::Sm), 0, 100)
30            .with_value(64)
31            .themed(
32                &theme,
33                ColorScheme::Primary,
34                Variant::Subtle,
35                ComponentSize::Md,
36            )
37            .opacity(220),
38        Select::new(theme.control_rect(0, 10, 90, ComponentSize::Sm).height(64))
39            .with_options(&["One", "Two", "Three"])
40            .with_selected_index(1)
41            .themed(
42                &theme,
43                ColorScheme::Info,
44                Variant::Outline,
45                ComponentSize::Sm,
46            )
47            .on_change(|idx, text| println!("select: {idx} {text}")),
48        Tabs::new(rect(0, 80, 120, 80), TabBarPos::Top)
49            .tab("Main")
50            .tab("Settings")
51            .themed(
52                &theme,
53                ColorScheme::Primary,
54                Variant::Solid,
55                ComponentSize::Md,
56            ),
57        ButtonMatrix::new(
58            theme
59                .control_rect(0, 170, 120, ComponentSize::Md)
60                .height(48),
61        )
62        .with_map(&["A", "B", "\n", "C", "D"])
63        .themed(
64            &theme,
65            ColorScheme::Neutral,
66            Variant::Outline,
67            ComponentSize::Md,
68        )
69        .on_activate(|id, text| println!("button matrix: {:?} {text}", id)),
70        Bar::new(theme.control_rect(0, 224, 90, ComponentSize::Xs), 0, 100)
71            .with_value(32)
72            .with_mode(BarMode::Normal)
73            .themed(
74                &theme,
75                ColorScheme::Success,
76                Variant::Subtle,
77                ComponentSize::Sm,
78            ),
79        Led::new(
80            theme
81                .origin_control_rect(12, ComponentSize::Xs)
82                .at(0, 240)
83                .size(12, 12),
84        )
85        .themed(
86            &theme,
87            ColorScheme::Success,
88            Variant::Solid,
89            ComponentSize::Xs,
90        )
91        .brightness(180),
92        Spinner::new(theme.origin_control_rect(24, ComponentSize::Md).at(20, 236))
93            .animation(30, 100)
94            .themed(
95                &theme,
96                ColorScheme::Primary,
97                Variant::Ghost,
98                ComponentSize::Md,
99            ),
100        List::new(
101            theme
102                .control_rect(0, 270, 100, ComponentSize::Sm)
103                .height(48),
104        )
105        .with_items(&["Alpha", "Beta", "Gamma"])
106        .themed(
107            &theme,
108            ColorScheme::Neutral,
109            Variant::Subtle,
110            ComponentSize::Sm,
111        ),
112        Divider::new(rect(0, 328, 100, 8), DividerOrientation::Horizontal).themed(
113            &theme,
114            ColorScheme::Neutral,
115            Variant::Outline,
116            ComponentSize::Sm,
117        ),
118        Spacer::height(theme.component_size(ComponentSize::Md).gap),
119        Table::new(rect(0, 342, 120, 48)).themed_parts(
120            &theme,
121            ColorScheme::Info,
122            Variant::Subtle,
123            ComponentSize::Sm,
124        ),
125        Calendar::new(rect(0, 396, 140, 96)).themed_parts(
126            &theme,
127            ColorScheme::Primary,
128            Variant::Outline,
129            ComponentSize::Sm,
130        ),
131    );
132
133    let layout = {
134        #[cfg(feature = "view")]
135        {
136            view! { VStack::new(90)
137            .child(20, |rect| Heading::new("Demo", rect))
138            .child(20, |rect| Text::new("Hello", rect))
139            .child(30, |rect| {
140                Button::new("Tap", rect)
141                    .icon("save")
142                    .on_click(|_| println!("clicked"))
143            })
144            .child(30, |rect| {
145                IconButton::new("edit", rect)
146                    .on_click(|_| println!("edit"))
147            })
148            .child(20, |rect| {
149                Checkbox::new("Accept", rect).on_change(|v| println!("checkbox: {v}"))
150            })
151            .child(20, |rect| {
152                Switch::new(rect).on_change(|v| println!("switch: {v}"))
153            })
154            .child(20, |rect| {
155                Radio::new("Option", rect).on_change(|v| println!("radio: {v}"))
156            })
157            .child(20, |rect| { Badge::new("NEW", rect) })
158            .child(20, |rect| {
159                Tag::new("rust", rect).on_remove(|| println!("tag removed"))
160            })
161            .child(30, |rect| { Alert::new("Saved", rect) })
162            .child(20, |rect| {
163                Input::new("Name", rect).on_change(|v| println!("input: {v}"))
164            })
165            .child(40, |rect| {
166                Textarea::new("Multiline", rect).on_change(|v| println!("textarea: {v}"))
167            })
168            .child(30, |rect| Modal::new("Modal", rect))
169            .child(30, |rect| Drawer::new("Menu", rect))
170            .child(30, |rect| Toast::new("Saved", rect)) }
171        }
172        #[cfg(not(feature = "view"))]
173        {
174            VStack::new(90)
175                .child(20, |rect| Heading::new("Demo", rect))
176                .child(20, |rect| Text::new("Hello", rect))
177                .child(30, |rect| {
178                    Button::new("Tap", rect)
179                        .icon("save")
180                        .on_click(|_| println!("clicked"))
181                })
182                .child(30, |rect| {
183                    IconButton::new("edit", rect).on_click(|_| println!("edit"))
184                })
185                .child(20, |rect| {
186                    Checkbox::new("Accept", rect).on_change(|v| println!("checkbox: {v}"))
187                })
188                .child(20, |rect| {
189                    Switch::new(rect).on_change(|v| println!("switch: {v}"))
190                })
191                .child(20, |rect| {
192                    Radio::new("Option", rect).on_change(|v| println!("radio: {v}"))
193                })
194                .child(20, |rect| Badge::new("NEW", rect))
195                .child(20, |rect| {
196                    Tag::new("rust", rect).on_remove(|| println!("tag removed"))
197                })
198                .child(30, |rect| Alert::new("Saved", rect))
199                .child(20, |rect| {
200                    Input::new("Name", rect).on_change(|v| println!("input: {v}"))
201                })
202                .child(40, |rect| {
203                    Textarea::new("Multiline", rect).on_change(|v| println!("textarea: {v}"))
204                })
205                .child(30, |rect| Modal::new("Modal", rect))
206                .child(30, |rect| Drawer::new("Menu", rect))
207                .child(30, |rect| Toast::new("Saved", rect))
208        }
209    };
210
211    let _ = (style, new_components, layout);
212}

Trait Implementations§

Source§

impl Widget for VStack

Source§

fn bounds(&self) -> Rect

Return the area this widget occupies relative to its parent.
Source§

fn draw(&self, renderer: &mut dyn Renderer)

Render the widget using the provided Renderer.
Source§

fn handle_event(&mut self, event: &Event) -> bool

Handle an event and return true if it was consumed. Read more
Source§

fn clear_region(&mut self) -> Option<Rect>

Return a region (in draw/landscape coordinates) that should be restored from the pristine background copy, or None. Read more
Source§

fn set_bounds(&mut self, _bounds: Rect)

Called by the LPAR-10 layout pass to notify this widget of its layout-computed bounds. Read more
Source§

fn widget_font_mut(&mut self) -> Option<&mut WidgetFont>

Expose this widget’s font slot for cascade-driven font resolution (FONT-05 §5.B). Read more

Auto Trait Implementations§

§

impl !RefUnwindSafe for VStack

§

impl !Send for VStack

§

impl !Sync for VStack

§

impl !UnwindSafe for VStack

§

impl Freeze for VStack

§

impl Unpin for VStack

§

impl UnsafeUnpin for VStack

Blanket Implementations§

Source§

impl<T> Any for T
where T: 'static + ?Sized,

Source§

fn type_id(&self) -> TypeId

Gets the TypeId of self. Read more
Source§

impl<T> Borrow<T> for T
where T: ?Sized,

Source§

fn borrow(&self) -> &T

Immutably borrows from an owned value. Read more
Source§

impl<T> BorrowMut<T> for T
where T: ?Sized,

Source§

fn borrow_mut(&mut self) -> &mut T

Mutably borrows from an owned value. Read more
Source§

impl<T> BoundsProps for T
where T: Widget,

Source§

fn bounds(self, bounds: Rect) -> Self

Apply a new bounding rectangle and return the widget.
Source§

impl<T> From<T> for T

Source§

fn from(t: T) -> T

Returns the argument unchanged.

Source§

impl<T, U> Into<U> for T
where U: From<T>,

Source§

fn into(self) -> U

Calls U::from(self).

That is, this conversion is whatever the implementation of From<T> for U chooses to do.

Source§

impl<T, U> TryFrom<U> for T
where U: Into<T>,

Source§

type Error = Infallible

The type returned in the event of a conversion error.
Source§

fn try_from(value: U) -> Result<T, <T as TryFrom<U>>::Error>

Performs the conversion.
Source§

impl<T, U> TryInto<U> for T
where U: TryFrom<T>,

Source§

type Error = <U as TryFrom<T>>::Error

The type returned in the event of a conversion error.
Source§

fn try_into(self) -> Result<U, <U as TryFrom<T>>::Error>

Performs the conversion.