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

文章目录

平直布局

在前面的示例中,已经用到了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表示位置尽可能大。

相关推荐
小喷友12 小时前
阶段三:进阶(Rust 高级特性)
前端·rust
Python私教13 小时前
源滚滚Rust全栈班v1.02 无符号整数详解
开发语言·后端·rust
专注VB编程开发20年1 天前
CSS 的命名方式像是 PowerShell 的动词-名词结构,缺乏面向对象的层级关系
开发语言·后端·rust
伍哥的传说1 天前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
专注VB编程开发20年1 天前
rust语言-对象多级访问
服务器·前端·rust
编码浪子1 天前
趣味学RUST基础篇(构建一个命令行程序2重构)
开发语言·重构·rust
susnm1 天前
组件生命周期
rust·全栈
bruce541102 天前
Axum 最佳实践:如何构建优雅的 Rust 错误处理系统?(三)
rust
Source.Liu2 天前
【Python基础】 15 Rust 与 Python 基本类型对比笔记
笔记·python·rust
咸甜适中2 天前
rust语言 (1.88) egui (0.32.1) 学习笔记(逐行注释)(二十六)windows平台运行时隐藏控制台
笔记·学习·rust·egui