如何在Egui中显示可编辑的3×3矩阵？

Egui默认采用垂直流式布局，直接调用ui.add()会让元素上下排列。要实现3×3的网格矩阵，你可以使用Egui提供的Grid组件快速构建规整的表格布局，以下是修改后的代码：

let (_pos, mut mat) = dual_to_components(&mesh.verts.get_mut()[0].data);

// 创建3列的网格，设置单元格间距
ui.grid("3x3_matrix")
    .num_columns(3)
    .spacing([12.0, 8.0])
    .show(|ui| {
        // 第一行
        if ui.add(ne_gui::DragValue::new(&mut mat[(0,0)]).speed(0.01)).changed() {
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
        if ui.add(ne_gui::DragValue::new(&mut mat[(0,1)]).speed(0.01)).changed() {
            mat[(1,0)] = mat[(0,1)];
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
        if ui.add(ne_gui::DragValue::new(&mut mat[(0,2)]).speed(0.01)).changed() {
            mat[(2,0)] = mat[(0,2)];
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
        ui.end_row();

        // 第二行
        if ui.add(ne_gui::DragValue::new(&mut mat[(1,0)]).speed(0.01)).changed() {
            mat[(0,1)] = mat[(1,0)];
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
        if ui.add(ne_gui::DragValue::new(&mut mat[(1,1)]).speed(0.01)).changed() {
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
        if ui.add(ne_gui::DragValue::new(&mut mat[(1,2)]).speed(0.01)).changed() {
            mat[(2,1)] = mat[(1,2)];
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
        ui.end_row();

        // 第三行
        if ui.add(ne_gui::DragValue::new(&mut mat[(2,0)]).speed(0.01)).changed() {
            mat[(0,2)] = mat[(2,0)];
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
        if ui.add(ne_gui::DragValue::new(&mut mat[(2,1)]).speed(0.01)).changed() {
            mat[(1,2)] = mat[(2,1)];
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
        if ui.add(ne_gui::DragValue::new(&mut mat[(2,2)]).speed(0.01)).changed() {
            update_covariance(&mut mesh.verts.get_mut()[0].data.position, &mat);
        }
    });

关键说明： #

• ui.grid()创建网格容器，num_columns(3)指定每行固定3个元素，spacing()用于调整单元格的水平/垂直间距，优化视觉效果。
• 每添加完一行的3个元素后，调用ui.end_row()手动触发换行，确保布局严格按照3×3排列。
• 针对对称矩阵的元素（如(0,1)与(1,0)），保留原有逻辑：修改其中一个值时同步更新对称位置的元素，维持矩阵对称性。

如果你更倾向于按列组织布局，也可以使用ui.columns(3, ...)实现，核心思路是将界面划分为3列，每列垂直排列对应行的元素，代码结构类似但布局逻辑不同。

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