如何在egui自定义窗口中设置边距与缩进？UI排版问题求助

核心问题分析 #

你当前手动通过给标签加空格（比如" Theme:"）来实现缩进，这不仅不灵活，还导致部分元素超出窗口边缘——原因是你定义了content_rect（缩进后的内容区域）但没有实际使用它，所有UI元素仍直接绘制在未缩进的全局窗口区域内。

解决方案1：利用计算好的content_rect创建子UI #

这是最贴合你现有代码的方案，只需把所有内容元素放入缩进后的子UI容器中：

1. 首先把let _content_rect改为let content_rect（取消下划线，让变量可用）；
2. 基于content_rect创建带缩进的子UI，所有后续内容都通过这个子UI添加：

// Add the contents:
let content_rect = {
    let mut rect = rect;
    rect.min.y = title_bar_rect.max.y;
    rect
}.shrink(8.0); // 可调整shrink数值改变缩进大小，8.0的间距更美观

// 创建缩进后的子UI
let mut content_ui = ui.child_ui(content_rect, egui::Layout::top_down_justified(egui::Align::LEFT));

// 所有内容都用content_ui替代原来的ui
content_ui.horizontal(|ui| {
    ui.label("Theme:");
    egui::widgets::global_dark_light_mode_buttons(ui);
});

content_ui.horizontal(|ui| {
    ui.set_height(50.);
    ui.heading("Vulnerability Details");
});

content_ui.horizontal(|ui| {
    // 用布局让标签右对齐，替代手动加空格和固定add_space
    ui.with_layout(egui::Layout::right_to_left(egui::Align::CENTER), |ui| {
        ui.label("Criticality:");
    });
    ui.add_space(8.); // 标签与控件之间的间距
    egui::ComboBox::from_label("")
        .selected_text(self.this_vuln.level.to_string())
        .show_ui(ui, |ui| {
            for level in [vuln::Criticality::Critical, Criticality::High, Criticality::Medium, Criticality::Low]{
                ui.selectable_value(&mut self.this_vuln.level, level, level.to_string());
            }
        });
});

// 其他内容块同理，都用content_ui添加，去掉手动空格
content_ui.horizontal(|ui| {
    ui.with_layout(egui::Layout::right_to_left(egui::Align::CENTER), |ui| {
        ui.label("Title/Label:");
    });
    ui.add_space(8.);
    ui.text_edit_singleline(&mut self.this_vuln.title);
});

// ... 剩余内容以此类推 ...

解决方案2：给CentralPanel设置全局内边距 #

如果你不想单独处理内容区域，可以直接给CentralPanel设置内边距，这样整个面板内的元素都会自动缩进：

CentralPanel::default()
    .frame(egui::Frame::none().inner_margin(egui::Margin::all(8.0))) // 设置全局内边距
    .show(ctx, |ui| {
        let rect = ui.max_rect();
        let painter = ui.painter();
        // 注意：原标题栏绘制代码需要调整rect，因为ui的max_rect已经包含内边距
        // ... 调整后的标题栏绘制代码 ...
        
        // 内容部分直接用ui添加，无需手动缩进
        ui.horizontal(|ui| {
            ui.label("Theme:");
            egui::widgets::global_dark_light_mode_buttons(ui);
        });
        // ... 剩余内容 ...
    });

额外优化：统一标签对齐 #

推荐用ui.with_layout(Layout::right_to_left(Align::CENTER))让标签右对齐，替代手动加空格和固定add_space，这样所有输入控件能自动对齐，布局更整洁，也不需要根据标签长度调整空格数。

内容的提问来源于stack exchange，提问作者SysRisk