Left widget not centered when using nested layouts in egui

[nczyw]

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) { 
        //只有改变超过了0.01才会更新UI的缩放
        if(ctx.pixels_per_point() - self.ui_scale).abs() > 0.01 {
            ctx.set_pixels_per_point(self.ui_scale);
        }

        ctx.style_mut(|style| {
            style.interaction.selectable_labels = false;
            style.interaction.multi_widget_text_select = false;
            style.wrap_mode = Some(egui::TextWrapMode::Extend);
        });

        egui::CentralPanel::default().show(ctx, |ui| {
            egui::ScrollArea::both()
                .auto_shrink([false; 2])
                .scroll_source(ScrollSource::SCROLL_BAR)
                .show(ui, |ui| {
                    ui.horizontal(|ui| {
                        ui.label("left");
                        ui.vertical(|ui| {
                            ui.label("middle1");
                            ui.label("middle2");
                            ui.label("middle3");
                        });
                        ui.label("right");
                    });

                });
        });
    }
}

But the right widget is centered — am I using it incorrectly?

[justincredible]

The left widget is centered in the UI area allocated at the time it is added. The vertical UI cannot fit in this allocation when the second (and then the third) middle widget is added, so more area is allocated. Then when the right widget is added it is centered in the latest allocation.

If you were expecting this:

You'll need to do a sizing pass to get the maximum height of the allocated area and then allocate that before adding the left widget like so:

ui.horizontal(|ui| {
    ui.allocate_ui([0., 54.].into(), |ui| { // here I just use 3x ui.min_rect().height() after left label is added
        ui.label("left");
        ui.vertical(|ui| {
            ui.label("middle1");
            ui.label("middle2");
            ui.label("middle3");
        });
        ui.label("right");
    });
});

Ui::horizontal() can produce unexpected results. I suggest preferring Ui::horizontal_top(). When mixing with nested verticals I do not recommend Ui::horizontal_centered() (unless you want to do a sizing pass), but otherwise it also has predictable results.

[nczyw]

Thank you for explaining the layout principles of egui. I used to work with Qt layouts, which allow deep nesting and the use of spacers. With egui, I’ve noticed that many layouts require measuring first before arranging the elements.