layout/
layout.rs

1// Copyright 2019 The Druid Authors.
2//
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6//
7//     http://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14
15//! This example shows how to construct a basic layout,
16//! using columns, rows, and loops, for repeated Widgets.
17
18// On Windows platform, don't show a console when opening the app.
19#![windows_subsystem = "windows"]
20
21use druid::widget::{AspectRatioBox, Button, Flex, Label, LineBreaking};
22use druid::{AppLauncher, Color, Widget, WidgetExt, WindowDesc};
23
24fn build_app() -> impl Widget<u32> {
25    // Usually we put all the widgets in one big tree using builder-style
26    // methods. Sometimes we split them up in declarations to increase
27    // readability. In this case we also have some recurring elements,
28    // we add those in a loop later on.
29    let mut col = Flex::column().with_child(
30        // The `Flex`'s first child is another Flex! In this case it is
31        // a row.
32        Flex::row()
33            // The row has its own children.
34            .with_child(
35                Label::new("One")
36                    .fix_width(60.0)
37                    .background(Color::rgb8(0x77, 0x77, 0))
38                    .border(Color::WHITE, 3.0)
39                    .center(),
40            )
41            // Spacing element that will fill all available space in
42            // between label and a button. Notice that weight is non-zero.
43            // We could have achieved a similar result with expanding the
44            // width and setting the main-axis-allignment to SpaceBetween.
45            .with_flex_spacer(1.0)
46            .with_child(Button::new("Two").padding(20.))
47            // After we added all the children, we can set some more
48            // values using builder-style methods. Since these methods
49            // dont return the original `Flex` but a SizedBox and Container
50            // respectively, we have to put these at the end.
51            .fix_height(100.0)
52            //turquoise
53            .background(Color::rgb8(0, 0x77, 0x88)),
54    );
55
56    for i in 0..5 {
57        // Give a larger weight to one of the buttons for it to
58        // occupy more space.
59        let weight = if i == 2 { 3.0 } else { 1.0 };
60        // call `expand_height` to force the buttons to use all their provided flex
61        col.add_flex_child(Button::new(format!("Button #{i}")).expand_height(), weight);
62    }
63
64    // aspect ratio box
65    let aspect_ratio_label = Label::new("This is an aspect-ratio box. Notice how the text will overflow if the box becomes too small.")
66        .with_text_color(Color::BLACK)
67        .with_line_break_mode(LineBreaking::WordWrap)
68        .center();
69    let aspect_ratio_box = AspectRatioBox::new(aspect_ratio_label, 4.0)
70        .border(Color::BLACK, 1.0)
71        .background(Color::WHITE);
72    col.add_flex_child(aspect_ratio_box.center(), 1.0);
73
74    // This method asks Druid to draw colored rectangles around our widgets,
75    // so we can visually inspect their layout rectangles.
76    col.debug_paint_layout()
77}
78
79pub fn main() {
80    let window = WindowDesc::new(build_app()).title("Very flexible");
81
82    AppLauncher::with_window(window)
83        .log_to_console()
84        .launch(0)
85        .expect("launch failed");
86}
layout/layout.rs

layout/
layout.rs
