文章目录
平直布局
在前面的示例中,已经用到了ui.horizontal
用来布局,其特点是水平摆放控件。相应地,ui.vertical
则是垂直摆放控件。根据控件的摆放顺序不同,这两个布局组件衍生出一系列布局函数
- horizontal_top, 此即horizontal默认的布局方式
- horizontal_centered
- horizontal_wrapped
- vertical_centered, 此为vertical的默认布局方式
- vertical_centered_justified
下面演示一下这几种布局的区别
rust
#![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
函数更改为如下形式,
rust
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表示位置尽可能大。