16. CVUI 2.7.0 行和列：行列嵌套（官方文档翻译）

官方文档链接：https://dovyski.github.io/cvui/layout-nesting/

---

行列嵌套 （Nesting rows and columns）

row/column 可以相互嵌套来创建更复杂的布局，而不需要单独定位组件。

当一列或一行嵌套在另一列或另一行中时，它的行为类似于普通的组件：如果需要，用户不需要指明渲染它的帧或它的 (x, y) 坐标，只需要指明它的宽度和高度即可。

下面是 row/column 嵌套的一个示例：

核心代码：

cv::Mat frame = cv::Mat(300, 800, CV_8UC3);

// beginRow(cv::mat, x, y, width, height);
cvui::beginRow(frame, 10, 50, 100, 150);
  // Nested column. No frame or (x, y) informed, only width and heigh, i.e. 100 and 150.
  cvui::beginColumn(100, 150);
    cvui::text("Column 1");
    cvui::text("End of column 1");
  cvui::endColumn();

  // Nested column. No frame or (x, y) informed, only width and heigh, i.e. 100 and 50.
  cvui::beginColumn(100, 50);
    cvui::text("Column 2");
    cvui::button("button1");
  cvui::endColumn();
cvui::endRow();

输出结果：

其实用户可以省略（嵌套或者不嵌套）的 row/column 的 宽度/高度，这样 cvui 将根据其组件计算其维度：

核心代码：

// beginRow(cv::mat, x, y);
cvui::beginRow(frame, 10, 50);
  cvui::beginColumn();
    cvui::text("Column 1");
    cvui::text("End of column 1");
  cvui::endColumn();

  cvui::beginColumn();
    cvui::text("Column 2");
    cvui::button("button1");
  cvui::endColumn();
cvui::endRow();

输出结果：

---

示例：行嵌套列 （Example of row with nested columns）

下面是一个行的示例，它包含的组件有 text、button、columns

核心代码：

// Define a row at position (10, 50) with width 100 and height 150.
// beginRow(cv::mat, x, y, width, height, padding);
cvui::beginRow(frame, 10, 50, 100, 150);

cvui::text("Row, starts");
cvui::button("here");

// Column #1 with width 100 and height 150. The next component
// added will behave like it was added after a component
// with width 100 and height 150.
cvui::beginColumn(100, 150);
cvui::text("Column 1");
cvui::button("button 1");
cvui::button("button 2");
cvui::button("button 3");
cvui::text("End of column 1");
cvui::endColumn();

// Add two pieces of text
cvui::text("Hi again, ");
cvui::text("its me!");

// Column #2 width 100 and height 50.
cvui::beginColumn(100, 50);
cvui::text("Column 2");
cvui::button("button 1");
cvui::button("button 2");
cvui::button("button 3");
cvui::space();
cvui::text("Another text");
cvui::space(40);
cvui::text("End of column 2");
cvui::endColumn();

// Add more text
cvui::text("this is the ");
cvui::text("end of the row!");
cvui::endRow();

输出结果：

嵌套列（和行）与任何其他组件类似。在本例中，它们是由 cvui 放在一起的，因为它们属于一行。

注意：如果需要，嵌套的行和列不需要指定它们的 (x, y) 坐标，只需要指定它们的宽度和高度。而被嵌套的行和列的使用与其他组件相同。

下面是与前面相同的示例，但是将主行的 padding 设置为 10px，所有行和列都会自动计算各自的尺寸：

核心代码：

// beginRow(cv::mat, x, y, width, height, padding);
cvui::beginRow(frame, 10, 50, -1, -1, 10);
  cvui::text("Row starts");
  cvui::button("here");

  cvui::beginColumn();
    cvui::text("Column 1");
    cvui::button("button1");
    cvui::button("button2");
    cvui::button("button3");
    cvui::text("End of column 1");
  cvui::endColumn();

  cvui::text("Hi again,");
  cvui::text("its me!");

  cvui::beginColumn();
    cvui::text("Column 2");
    cvui::button("button1");
    cvui::button("button2");
    cvui::button("button3");
    cvui::space();
    cvui::text("Another text");
    cvui::space(40);
    cvui::text("End of column 2");
  cvui::endColumn();

  cvui::text("this is the ");
  cvui::text("end of the row!");
cvui::endRow();

输出结果：