Mixed layouts in TopBottom bar.

[syedtaz]

Hello. Thanks a lot for developing egui! I'm creating a UI as shown in the image below, and I want both the time and food/gold labels and icons to appear on the same "line".

This is what the code for the TopBottomPanel looks like. I have the resource labels and icons generated using Layout::right_to_left and the time label generated using Layout::left_to_right.

egui::containers::TopBottomPanel::top("Bar").show(ctx, |ui| {
    ui.with_layout(egui::Layout::right_to_left(egui::Align::Min), |ui| {
        ui.add(egui::Image::new(
            egui::TextureId::from(&gold_icon),
            gold_icon.size_vec2(),
        ));

        ui.add(Label::new("Gold"));

        ui.add(egui::Image::new(
            egui::TextureId::from(&food_icon),
            food_icon.size_vec2(),
        ));

        ui.add(Label::new("Food"));
    });

    ui.with_layout(egui::Layout::left_to_right(egui::Align::Min), |ui| {
        ui.add(Label::new("Time"));
    });
});

[MichaelGrupp]

You can put the contents in a ui.horizontal() layout and put your layouts inside (reordered to first have left to right, then the right one). This solved the same issue in my case. For your code example, this would be:

egui::containers::TopBottomPanel::top("Bar").show(ctx, |ui| {
    ui.horizontal(|ui| {
        ui.with_layout(egui::Layout::left_to_right(egui::Align::Min), |ui| {
            ui.add(Label::new("Time"));
        });
    
        ui.with_layout(egui::Layout::right_to_left(egui::Align::Min), |ui| {
            ui.add(egui::Image::new(
                egui::TextureId::from(&gold_icon),
                gold_icon.size_vec2(),
            ));
            
            ui.add(Label::new("Gold"));

            ui.add(egui::Image::new(
                egui::TextureId::from(&food_icon),
                food_icon.size_vec2(),
            ));
            
            ui.add(Label::new("Food"));
        });
    });
});
``