Skip to main content

zstack

Function zstack 

Source
pub fn zstack(children: &[ViewHandle]) -> ViewHandle
Expand description

ZStack from children, centred.

Examples found in repository?
examples/ios_app.rs (lines 101-123)
100fn ui() -> views::ViewHandle {
101    views::zstack(&[
102        views::background_linear_gradient(
103            &views::color(0.0, 0.0, 0.0, 0.0),
104            &[Color::new(0.06, 0.07, 0.16, 1.0), Color::new(0.24, 0.07, 0.33, 1.0)],
105            (0.0, 0.0),
106            (1.0, 1.0),
107        ),
108        views::scroll(&views::padding(
109            &views::vstack_spacing(
110                &[
111                    header(),
112                    section("Typography", typography()),
113                    section("Shapes", shapes()),
114                    section("Controls", controls()),
115                    section("Symbols", symbols()),
116                    section("Effects", effects()),
117                    section("Layout", layout()),
118                ],
119                18.0,
120            ),
121            16.0,
122        )),
123    ])
124}
125
126/// White text at a given size and weight — the showcase's workhorse.
127fn label_text(s: &str, size: f64, weight: Option<views::Weight>, alpha: f64) -> views::ViewHandle {
128    views::foreground_style_color(
129        &views::font_system(&views::text(s), size, weight, None),
130        1.0,
131        1.0,
132        1.0,
133        alpha,
134    )
135}
136
137fn header() -> views::ViewHandle {
138    views::vstack_spacing(
139        &[
140            label_text("SwiftUI from Rust", 30.0, Some(views::Weight::Bold), 1.0),
141            label_text(entry(), 13.0, None, 0.75),
142            label_text(
143                &format!("taps: {}", TAPS.load(std::sync::atomic::Ordering::Relaxed)),
144                13.0,
145                Some(views::Weight::Semibold),
146                0.9,
147            ),
148        ],
149        4.0,
150    )
151}
152
153/// A titled group: a caption, then the content, over a rounded panel.
154fn section(title: &str, content: views::ViewHandle) -> views::ViewHandle {
155    views::vstack_spacing(
156        &[
157            label_text(title, 12.0, Some(views::Weight::Semibold), 0.55),
158            views::padding(
159                &views::corner_radius(
160                    &views::background(&views::padding(&content, 12.0), 1.0, 1.0, 1.0, 0.07),
161                    14.0,
162                ),
163                0.0,
164            ),
165        ],
166        6.0,
167    )
168}
169
170fn typography() -> views::ViewHandle {
171    views::vstack_spacing(
172        &[
173            views::hstack_spacing(
174                &[
175                    views::font_text_style(&views::text("Title"), views::TextStyle::Title3),
176                    views::italic(&views::text("Italic")),
177                    views::monospaced(&views::text("mono")),
178                ],
179                14.0,
180            ),
181            views::kerning(&label_text("K E R N E D", 15.0, None, 0.9), 2.0),
182            views::foreground_style_linear_gradient(
183                &views::font_system(&views::text("Gradient fill"), 22.0, Some(views::Weight::Bold), None),
184                &[
185                    views::color_value_of(Color::new(1.0, 0.55, 0.25, 1.0)),
186                    views::color_value_of(Color::new(1.0, 0.25, 0.6, 1.0)),
187                ],
188                (0.0, 0.0),
189                (1.0, 0.0),
190            ),
191        ],
192        10.0,
193    )
194}
195
196fn shapes() -> views::ViewHandle {
197    let swatch = |shape: views::Shape, c: Color| {
198        views::frame(&shape.fill(views::color_value_of(c)), 58.0, 44.0)
199    };
200    views::hstack_spacing(
201        &[
202            swatch(views::Shape::circle(), Color::new(0.95, 0.35, 0.30, 1.0)),
203            swatch(views::Shape::capsule(), Color::new(0.98, 0.70, 0.20, 1.0)),
204            swatch(views::Shape::rounded_rectangle(10.0, true), Color::new(0.30, 0.65, 1.0, 1.0)),
205            swatch(views::Shape::ellipse(), Color::new(0.35, 0.85, 0.55, 1.0)),
206        ],
207        10.0,
208    )
209}
210
211fn controls() -> views::ViewHandle {
212    views::vstack_spacing(
213        &[
214            // Two toggles, both starting `false`: one bound to Rust-owned
215            // state, one a constant. If they ever disagree on screen, the
216            // binding's getter is at fault rather than the control.
217            views::toggle_bound("Bound to Rust state", switch_state()),
218            views::toggle("Constant false", false),
219            views::hstack_spacing(
220                &[
221                    label_text(&format!("{:.2}", slider_state().get()), 14.0, None, 0.9),
222                    views::slider_bound(slider_state(), 0.0, 1.0),
223                ],
224                10.0,
225            ),
226            views::stepper_bound(
227                &format!("Stepper: {:.0}", stepper_state().get()),
228                stepper_state(),
229                0.0,
230                10.0,
231                1.0,
232            ),
233            // Reads the stepper's Rust value. A `ProgressView` takes a plain
234            // number rather than a binding, so it can only ever show what it
235            // was built with — which is fine now that every write rebuilds the
236            // body from current state.
237            views::progress(stepper_state().get(), 10.0),
238            views::hstack_spacing(
239                &[
240                    views::button_style(
241                        &views::button("Bordered", on_tap),
242                        views::ButtonStyle::Bordered,
243                    ),
244                    views::button_style(
245                        &views::button("Glass", on_tap),
246                        views::ButtonStyle::Glass,
247                    ),
248                ],
249                12.0,
250            ),
251            views::textfield("A text field", ""),
252        ],
253        12.0,
254    )
255}
256
257fn symbols() -> views::ViewHandle {
258    let icon = |name: &str, c: Color| {
259        views::foreground_style_color(
260            &views::font_system(&views::system_image(name), 24.0, None, None),
261            c.r, c.g, c.b, c.a,
262        )
263    };
264    views::hstack_spacing(
265        &[
266            icon("star.fill", Color::new(1.0, 0.8, 0.2, 1.0)),
267            icon("heart.fill", Color::new(1.0, 0.35, 0.45, 1.0)),
268            icon("bolt.fill", Color::new(0.55, 0.8, 1.0, 1.0)),
269            icon("cloud.sun.fill", Color::new(0.8, 0.85, 1.0, 1.0)),
270            icon("checkmark.seal.fill", Color::new(0.4, 0.9, 0.6, 1.0)),
271        ],
272        16.0,
273    )
274}
275
276fn effects() -> views::ViewHandle {
277    let tile = |c: Color| views::frame(&views::color(c.r, c.g, c.b, c.a), 48.0, 40.0);
278    views::hstack_spacing(
279        &[
280            views::blur(&tile(Color::new(0.95, 0.4, 0.3, 1.0)), 4.0),
281            views::shadow(
282                &tile(Color::new(0.3, 0.7, 1.0, 1.0)),
283                Color::new(0.0, 0.0, 0.0, 0.8),
284                8.0,
285                0.0,
286                4.0,
287            ),
288            views::opacity(&tile(Color::new(0.5, 0.9, 0.5, 1.0)), 0.35),
289            views::corner_radius(&tile(Color::new(0.9, 0.7, 0.2, 1.0)), 12.0),
290            views::border(&tile(Color::new(0.0, 0.0, 0.0, 0.0)), 1.0, 1.0, 1.0, 2.0),
291        ],
292        10.0,
293    )
294}
295
296fn layout() -> views::ViewHandle {
297    let chip = |s: &str, c: Color| {
298        views::corner_radius(
299            &views::background(&views::padding(&label_text(s, 13.0, None, 1.0), 8.0), c.r, c.g, c.b, c.a),
300            8.0,
301        )
302    };
303    views::vstack_spacing(
304        &[
305            views::hstack_spacing(
306                &[
307                    chip("HStack", Color::new(0.35, 0.35, 0.8, 0.8)),
308                    views::spacer(),
309                    chip("Spacer", Color::new(0.8, 0.35, 0.5, 0.8)),
310                ],
311                8.0,
312            ),
313            views::divider(),
314            views::zstack(&[
315                views::frame(
316                    &views::Shape::rounded_rectangle(8.0, true)
317                        .fill(views::color_value_of(Color::new(0.2, 0.5, 0.9, 0.55))),
318                    120.0,
319                    34.0,
320                ),
321                label_text("ZStack", 13.0, Some(views::Weight::Semibold), 1.0),
322            ]),
323        ],
324        10.0,
325    )
326}