百度给公司做网站效果咋样,杭州知名的企业网站建设策划,网站产品图怎么做,廊坊seo排名公司文章目录 平直布局with_layout 平直布局
在前面的示例中#xff0c;已经用到了ui.horizontal用来布局#xff0c;其特点是水平摆放控件。相应地#xff0c;ui.vertical则是垂直摆放控件。根据控件的摆放顺序不同#xff0c;这两个布局组件衍生出一系列布局函数
horizonta… 文章目录 平直布局with_layout 平直布局
在前面的示例中已经用到了ui.horizontal用来布局其特点是水平摆放控件。相应地ui.vertical则是垂直摆放控件。根据控件的摆放顺序不同这两个布局组件衍生出一系列布局函数
horizontal_top, 此即horizontal默认的布局方式horizontal_centeredhorizontal_wrappedvertical_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_rightright_to_lefttop_downtop_down_justifiedbottom_upwith_main_alignedwith_main_alignwith_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表示位置尽可能大。
