Rust图形界面编程：egui平直布局

平直布局

在前面的示例中，已经用到了ui.horizontal用来布局，其特点是水平摆放控件。相应地，ui.vertical则是垂直摆放控件。根据控件的摆放顺序不同，这两个布局组件衍生出一系列布局函数

• horizontal_top, 此即horizontal默认的布局方式
• horizontal_centered
• horizontal_wrapped
• vertical_centered, 此为vertical的默认布局方式
• vertical_centered_justified

下面演示一下这几种布局的区别

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
use eframe::egui;struct MyApp {
}impl Default for MyApp {fn default() -> Self {Self { }}
}impl eframe::App for MyApp {fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {egui::CentralPanel::default().show(ctx, |ui| {ui.horizontal_wrapped(|ui| {for i in 1..8{if ui.button(format!("horizontal_wrapped{}", i)).clicked(){};}});ui.horizontal_top(|ui| {for i in 1..8{if ui.button(format!("horizontal_top{}", i)).clicked(){};}});ui.vertical_centered(|ui| {if ui.button("vertical_centered1").clicked(){};if ui.button("vertical_centered2").clicked(){};});ui.vertical_centered_justified(|ui| {if ui.button("vertical_centered_justified1").clicked(){};if ui.button("vertical_centered_justified2").clicked(){};});ui.horizontal_centered(|ui| {for i in 1..8{if ui.button(format!("horizontal_centered{}", i)).clicked(){};}});});}
}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()),)
}

效果如下

即以_warpped为后缀的水平布局，其控件会自动换行；以_justified为后缀的垂直布局，其控件会自适应水平方向的宽度；以centered为后缀的水平布局，会自动占据剩余空间的中间位置。

with_layout

这些水平或者垂直的布局显然不足以涵盖所有情况，所以egui提供了更加灵活的布局方法with_layout，其输入参数除了填充组件外，还有一个Layout类型的结构体，可调用下列函数来生成

• left_to_right
• right_to_left
• top_down
• top_down_justified
• bottom_up
• with_main_aligned
• with_main_align
• with_cross_align

这些函数的参数是枚举类型的Align，共有三个选择，分别是Min, Center以及Max。接下来，将show函数更改为如下形式，

egui::CentralPanel::default().show(ctx, |ui| {ui.with_layout(egui::Layout::left_to_right(egui::Align::Min),|ui| {for i in 1..5{if ui.button(format!("left_to_right{}", i)).clicked(){};}});ui.with_layout(egui::Layout::top_down(egui::Align::Max),|ui| {for i in 1..5{if ui.button(format!("top_down{}", i)).clicked(){};}});
});

得到结果如下

由此可知，Align表示当前布局在父组件中的位置，Min表示位置尽可能小，Max表示位置尽可能大。