#grid #egui #layout #cells #nested #ui #row

egui_grid

为 egui 创建基于网格的布局

6 个版本 (重大更改)

0.5.1 2024 年 5 月 24 日
0.5.0 2024 年 5 月 24 日
0.4.0 2023 年 12 月 22 日
0.3.0 2023 年 10 月 5 日
0.0.1 2023 年 4 月 9 日

#386GUI

每月 42 次下载
2 个 crate 中使用 (通过 egui-dataframe)

MIT/Apache

29KB
361 代码行

egui_grid

Latest version Documentation

egui 创建动态网格布局。

网格灵活易用,类似于 egui_extra 的条创建行为。它们紧凑,允许使用更少的缩进创建更复杂的布局,并具有嵌套网格和对齐行内单元格的功能。

安装

将以下内容添加到您的 Cargo.toml

[dependencies]
egui_grid = "0.5.1"

示例

// Quick example, by no means does it fully demo
// how flexible building grids can be.
use egui_grid::GridBuilder;
use egui_extras::Size;

GridBuilder::new()
    // Allocate a new row
    .new_row(Size::exact(200.0))
    // Give this row a couple cells
    .cell(Size::exact(85.0))
    .cell(Size::remainder())
    // Allocate another row
    .new_row(Size::remainder())
    // Batch method, allocate multiple cells at once
    .cells(Size::remainder(), 3)
    .show(ui, |mut grid| {
        // Cells are represented as they were allocated
        grid.cell(|ui| {
            ui.label("Top row, left cell");
        });
        grid.cell(|ui| {
            ui.label("Top row, right cell");
        });
        grid.cell(|ui| {
            ui.label("Bottom row, left cell");
        });
        grid.empty();
        grid.cell(|ui| {
            ui.label("Bottom row, right cell");
        });
    });

网格嵌套示例

// You can nest grids, allowing for complex layouts without much indentation
use egui_grid::GridBuilder;
use egui_extras::Size;

// The grid which will be nested
let nested_grid = GridBuilder::new()
    // 2 rows, with 1 cell each
    .new_row(Size::remainder()).cell(Size::remainder())
    .new_row(Size::remainder()).cell(Size::remainder());


// The main grid, of which one cell will receive the nested grid
GridBuilder::new()
    // One row with 3 cells
    .new_row(Size::remainder())
    .cell(Size::remainder())
    .cell(Size::remainder()) .nest(nested_grid) // Nesting the grid in the middle cell
    .cell(Size::remainder())

    .show(ui, |mut grid| {
        // The nested grid replaces the cell it was nested in; 
        // And the cells within that nested grid replace it in the order, too.
        //
        // So despite there being 5 cells allocated total 
        // (2 from the nested grid and 3 from the main), only 4 exist.
        grid.cell(|ui| {
            ui.label("Left cell");
        });
        grid.cell(|ui| {
            ui.label("Nested grid, top cell");
        });
        grid.cell(|ui| {
            ui.label("Nested grid, bottom cell");
        });
        grid.cell(|ui| {
            ui.label("Right cell");
        });
    });

用法

有关详细信息和使用更多信息,请参阅 文档

问题

目前该功能已完整。错误修复、优化以及与 egui 版本保持同步是此 crate 在可预见的未来扩展的唯一方式。

虽然您可以自由地提出问题,但联系我 (@mythit) 在 egui Discord 服务器 可能更值得您的关注。

依赖项

~5–11MB
~114K SLoC