基于C++ Gtkmm开发：如何让多相机Gtk::DrawingArea网格最大化同尺寸显示？

嘿，这个需求根本不用你自己从零编写复杂的Gtk布局逻辑！Gtkmm里现成的容器就能完美搞定，而且能自动帮你处理网格排布、尺寸一致和窗口大小变化时的自适应显示。

首选方案：Gtk::Grid容器 #

Gtk::Grid是专门为网格布局设计的容器，完全契合你的需求——它可以自动将子Widget分配到网格单元格中，并且支持设置子元素的扩展属性，让每个单元格的尺寸自动均分，最大化利用可用空间。

具体实现步骤很简单：

1. 计算最优行列数：根据摄像头数量（3-9），算出接近正方形的行列组合，这样每个画面的显示空间更合理。比如：

   • 3个摄像头：2行2列（空一个单元格不影响布局）
   • 4个摄像头：2行2列
   • 5-6个摄像头：3行2列或2行3列
   • 7-9个摄像头：3行3列
     你可以用std::ceil(std::sqrt(camera_count))快速计算出列数，再推导出行数，代码里一行就能搞定。

2. 配置Gtk::Grid和子Widget：

   • 给Grid设置set_expand(true)，让它填充整个父容器空间。
   • 每个Gtk::DrawingArea都要开启hexpand、vexpand，并将对齐方式设为FILL，这样它们会自动拉伸填充所在的网格单元格，保持所有画面尺寸一致。

简单代码示例 #

#include <gtkmm.h>
#include <cmath>

int main(int argc, char* argv[]) {
    auto app = Gtk::Application::create("org.example.camera_grid");

    Gtk::Window main_window;
    main_window.set_default_size(1280, 720);
    main_window.set_title("Camera Grid View");

    const int camera_count = 5; // 可以替换为3-9之间的任意整数
    const int cols = std::ceil(std::sqrt(camera_count));
    const int rows = std::ceil(static_cast<double>(camera_count) / cols);

    auto grid = Gtk::make_managed<Gtk::Grid>();
    grid->set_expand(true);
    grid->set_row_spacing(2); // 可选：设置单元格之间的间距
    grid->set_column_spacing(2);

    for (int i = 0; i < camera_count; ++i) {
        const int row = i / cols;
        const int col = i % cols;

        auto draw_area = Gtk::make_managed<Gtk::DrawingArea>();
        draw_area->set_hexpand(true);
        draw_area->set_vexpand(true);
        draw_area->set_halign(Gtk::Align::FILL);
        draw_area->set_valign(Gtk::Align::FILL);

        // 绑定绘制摄像头画面的回调（这里用纯色模拟）
        draw_area->signal_draw().connect([i, draw_area](const Cairo::RefPtr<Cairo::Context>& cr) {
            const Gdk::Rectangle allocation = draw_area->get_allocation();
            cr->set_source_rgb((i%3)/3.0, ((i+1)%3)/3.0, ((i+2)%3)/3.0);
            cr->rectangle(0, 0, allocation.get_width(), allocation.get_height());
            cr->fill();
            return true;
        });

        grid->attach(*draw_area, col, row, 1, 1);
    }

    main_window.set_child(*grid);
    return app->run(main_window);
}

额外优化提示 #

如果需要保持摄像头画面的宽高比（比如16:9），可以在DrawingArea的size_allocate信号回调中调整绘制区域，或者使用set_content_width和set_content_height设置固定比例，不过这属于锦上添花的需求，不影响核心的网格布局功能。

总的来说，你完全不需要自己实现复杂的布局计算逻辑，Gtk::Grid已经帮你封装好了所有必要的功能，只需要按上面的步骤配置就能达到你想要的效果。

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