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()),)
}