Rust图形界面：eGUI的Panel布局

Panel布局

eGUI提供面板堆叠的布局方案，即Panel布局。其布局逻辑是，根据当前面板指定的方向，尽可能地填充空间。

• CentralPanel 占据屏幕剩余部分的空间
• SidePanel 占据屏幕两侧的空间，在具体调用时，可指定left或者right
• TopBottomPanel 占据屏幕顶部或底部的空间，具体调用时，可指定top或者bottom

示例如下

其压入顺序以及调用的布局函数如下表

顺序	标题	函数
1	Top Panel	TopBottomPanel::top
2	Left Panel	SidePanel::left
3	Right Panel	SidePanel::right
4	Bottom Panel	TopBottomPanel::bottom
5	Central Panel	CentralPanel

尺寸调节

由上图可见，Panel之间的界限是允许用鼠标拖动的，这是因为在创建Panel之后，将其设为尺寸可调节。SidePanel和TopBottomPanel均支持resizable方法，但二者的调节方向不同，前者是水平可调，后者是竖直可调。相应地，前者可以设置水平方向的调节尺寸，例如min_width, max_width以及width_range等，而后者则可设置min_height, max_height以及height_range等。

源码

用于布局的核心代码如下

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            egui::TopBottomPanel::top("top_panel")
                .resizable(true)
                .min_height(32.0)
                .show_inside(ui, |ui| {ui.heading("Top Panel");});

            egui::SidePanel::left("left_panel")
                .resizable(true)
                .default_width(150.0)
                .width_range(80.0..=200.0)
                .show_inside(ui, |ui| {
                    ui.vertical_centered(|ui| {ui.heading("Left Panel");});
                });

            egui::SidePanel::right("right_panel")
                .resizable(true)
                .show_inside(ui, |ui| {
                    ui.vertical_centered(|ui| {ui.heading("Right Panel");});
                });

            egui::TopBottomPanel::bottom("bottom_panel")
                .show_inside(ui, |ui| {
                    ui.vertical_centered(|ui| {ui.heading("Bottom Panel");});
                });

            egui::CentralPanel::default()
                .show_inside(ui, |ui| {
                ui.vertical_centered(|ui| {ui.heading("Central Panel");});
            });

        });
    }
}

下面是程序运行的其他代码。

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
use std::fmt::format;

use eframe::egui;

struct MyApp {
}

impl Default for MyApp {
    fn default() -> Self {
        Self { }
    }
}
fn main() -> Result<(), eframe::Error> {
    let options = eframe::NativeOptions {
        initial_window_size: Some(egui::vec2(640.0, 320.0)),
        ..Default::default()
    };
    eframe::run_native(
        "layout",
        options,
        Box::new(|_cc| Box::<MyApp>::default()),
    )
}