Rust egui Nested Layouts — Build a Two-Column Dashboard (Ep 7)

Rust egui Nested Layouts — Build a Two-Column Dashboard

In this tutorial, we learn how to create a two-column dashboard using Rust's egui library by nesting vertical and horizontal layouts. The example features a navigation sidebar on the left and a details panel on the right, demonstrating how to organize widgets efficiently in a GUI.

Code

use eframe::egui::{self, CentralPanel, Context, Label, Separator, Ui, Window};

struct DashboardApp {
  selected_page: usize,
  visit_counts: [u32; 3],
}

impl Default for DashboardApp {
  fn default() -> Self {
    Self {
      selected_page: 0,
      visit_counts: [0; 3],
    }
  }
}

impl eframe::App for DashboardApp {
  fn update(&mut self, ctx: &Context, _frame: &mut eframe::Frame) {
    CentralPanel::default().show(ctx, |ui| {
      // Outer horizontal layout: sidebar + separator + main panel
      ui.horizontal(|ui| {
        // Sidebar: vertical layout with navigation buttons
        ui.vertical(|ui| {
          ui.heading("Navigation");
          for (i, page) in ["Home", "Profile", "Settings"].iter().enumerate() {
            if ui.selectable_label(self.selected_page == i, *page).clicked() {
              self.selected_page = i;
              self.visit_counts[i] += 1; // increment visit count on selection
            }
          }
        });

        ui.separator(); // vertical separator between columns

        // Main panel: vertical layout with page title and details
        ui.vertical(|ui| {
          ui.heading(format!("Page: {}", ["Home", "Profile", "Settings"][self.selected_page]));

          ui.separator();

          // Display label-value pairs horizontally
          ui.horizontal(|ui| {
            ui.label("Visits:");
            ui.label(self.visit_counts[self.selected_page].to_string());
          });

          ui.horizontal(|ui| {
            ui.label("Status:");
            ui.label("Active");
          });
        });
      });
    });
  }
}

fn main() {
  let options = eframe::NativeOptions::default();
  eframe::run_native(
    "Two-Column Dashboard",
    options,
    Box::new(|_cc| Box::new(DashboardApp::default())),
  );
}

Key Points

• Use ui.vertical() to stack widgets top to bottom in a column.
• Nest ui.horizontal() inside vertical layouts to create multi-column interfaces.
• Build a sidebar with navigation buttons using vertical layout and track selection state.
• Use ui.separator() to visually divide sections or columns in the UI.
• Create label-value pairs by grouping labels horizontally within vertical layouts for clarity.