Layouting

We can all agree, our app is not looking good. If you don’t care about looks, I think we’re done here. Else, let’s ge’it.

If you remember, from our design, we need to restrict the width and height of our app. Let’s update our NativeOptions in main:

fn main() -> Result<(), eframe::Error> {
    let viewport = egui::ViewportBuilder::default().with_inner_size(egui::Vec2::new(300.0, 400.0));

    let options = eframe::NativeOptions{
      viewport,
      // This is a common pattern in Rust. See below
      ..Default::default()
    };

    eframe::run_native("Queeez", options, Box::new(|ctx| Box::new(App::new())))
}

This will make the app launch with a 300 x 400 window. But you’ll be able to resize the window. We don’t want that. Your exercise is to look throught the ViewportBuilder docs and find a way to disable resizing.

Next step is to put some space between the previous and next buttons so that each button is on opposite sides of the window horizontally.

egui does not have a built-in way to do something like justify-between. So we’ll have to finesse it.

The way to do that is to:

1. create two columns
2. justify the first column naturally (left to right)
3. justify the second column in reverse (right to left)
4. render each button in its own column

Replace the part of the code that renders the next and previous buttons with the following:

ui.columns(2, |columns| {
  columns[0].allocate_ui_with_layout(
    egui::Vec2 { x: 120.0, y: 40.0 },
    egui::Layout::left_to_right(egui::Align::Center),
    |ui| {
      if ui.button("previous").clicked() {
          self.quiz.previous();
      }
    },
  );

  columns[1].allocate_ui_with_layout(
    egui::Vec2 { x: 120.0, y: 40.0 },
    egui::Layout::right_to_left(egui::Align::Center),
    |ui| {
      if ui.button("next").clicked() {
          self.quiz.next();
      }
    },
  );
})

Good now.

On to some styling.