使用网格布局 (Grid Layout) 节点

网格布局 (Grid Layout) 节点可用于按网格排列节点。您可以让网格布局 (Grid Layout) 节点从左上角至右下角自动排列其子节点，也可以手动分配各子节点至网格的特定行与列。

请注意 3D 网格布局 (Grid layout 3D) 节点的深度是 3D 网格布局 (Grid layout 3D) 节点所有子节点的最大深度。

创建 网格布局 (Grid Layout) 节点

要创建 网格布局 (Grid Layout) 节点：

1. 在工程 (Project) 中按下 Alt 并右键点击要在其中创建网格布局 (Grid Layout) 节点的那个节点，然后选择 3D 网格布局 (Grid layout 3D) 或 2D 网格布局 (Grid layout 2D)。
   请注意，只能在 3D 节点内创建 3D 节点，只能在 2D 节点内创建 2D 节点。
   
   建议

   在预览 (Preview) 工具中使用 2D 网格布局工具 (Grid Layout 2D tool) ，以在预览 (Preview) 中点击并拖动来创建 2D 网格布局 (Grid layout 2D)节点。要缩放列和行，在预览 (Preview) 中点击这些行和列并拖动。

2. 在工程 (Project) 中向您在上一步中创建的布局添加子节点。
   例如，如果您创建 3D 网格布局 (Grid layout 3D) 节点，则添加若干球体 (Sphere) 节点，如果您想创建 2D 网格布局 (Grid layout 2D) 节点，则添加若干图像 (Image) 节点。
   在您添加子节点时，网格布局 (Grid Layout) 节点会将它们从网格的左上角至左下角排列。网格布局 (Grid Layout) 节点中每个对象的确切位置是由 列 (Column) 与各子节点 行 (Row) 属性定义。
   

3. （可选） 要清除布局中子节点周围的区域，在工程 (Project) 中选择布局中的子节点，在属性 (Properties) 中点击 ，然后添加并设置边距属性：

   • 深度边距 (Depth Margin) 用于清除子节点前后的区域。
   • 水平边距 (Horizontal Margin) 用于清除子节点左右两侧的区域。
   • 垂直边距 (Vertical Margin) 用于清除子节点底部和顶部的区域。
   

设置网格布局 (Grid Layout) 节点排列其子节点的方向

当您允许网格布局 (Grid Layout) 节点自动排列其子节点时，您可以设置网格布局 (Grid Layout) 节点排列其子节点的方向。

要设置网格布局 (Grid Layout) 节点排列其子节点的方向，在 工程 (Project) 中选择您想设置方向的网格布局 (Grid Layout) 节点，在属性 (Properties) 中添加及设置布局方向 (Layout Direction) 属性。
例如，当您将布局方向 (Layout Direction) 属性设置为 下对齐 (Down)，网格布局 (Grid Layout) 节点首先将其子节点放在第一列的各行中。当第一列的行填满时，网格布局 (Grid Layout) 节点开始将其子节点放在第二列的行里，以此类推。

设置网格布局 (Grid Layout) 节点如何计算其行与列的尺寸

当您创建网格布局 (Grid Layout) 节点的列与行时，您可以指定网格布局 (Grid Layout) 节点如何计算其列与行的尺寸。例如，您可以使用行与列尺寸成比例的网格布局 (Grid Layout) 节点，均匀分配 网格布局 (Grid Layout) 节点的内容。

要设置网格布局 (Grid Layout) 节点如何计算其列与行的尺寸：

1. 创建一个网格布局 (Grid Layout) 节点并向其添加多个子节点。请参阅创建 网格布局 (Grid Layout) 节点。
   
2. 在属性 (Properties) 中设置网格布局 (Grid Layout) 节点的尺寸，具体做法是设置其布局宽度 (Layout Width) 和布局高度 (Layout Height) 属性。
   例如，将布局宽度 (Layout Width) 设置为 500 并将布局高度 (Layout Height) 设置为 300。
   
3. 设置网格布局 (Grid Layout) 节点中列 (Columns) 和行 (Rows) 属性的值，以便：
   • 自动 (Automatic) 允许网格布局 (Grid Layout) 节点根据该列与行中最大子节点的尺寸自动计算其列与行的尺寸。
     
   • 固定 (Fixed) 设置列与行的确切尺寸，而不管该列与行中子节点的尺寸如何。
     
   • 按比例 (Proportional) 设置列与行的尺寸与其他使用相同设置的列与行的剩余尺寸以及整个网格布局 (Grid Layout) 节点的尺寸成比例。
     例如：
     • 为均匀分配各列的内容，选择按比例 (Proportional) 并为各列赋予相同的值。
     • 如果您有三列，您想要第一列占网格布局 (Grid Layout) 节点宽度的一半，请选择按比例 (Proportional)，第一列使用值 2，另外两列使用值 1。
     

在网格布局 (Grid Layout) 节点中跨越单元格与行

对于网格布局 (Grid Layout) 节点中的每个单元格，您可以设置其跨越的行数与列数。

要使单元格跨越网格布局 (Grid Layout) 节点的列与行：

1. 创建一个网格布局 (Grid Layout) 节点并向其添加多个子节点。请参阅创建 网格布局 (Grid Layout) 节点。
2. 在 工程 (Project) 中选择您要在网格布局 (Grid Layout) 节点中跨越单元格和行的子节点。
3. 在属性 (Properties) 中添加列跨度 (Column Span) 和行跨度 (Row Span) 属性。
   
4. 在属性 (Properties) 中设置您想要该单元格跨越的行数与列数。
   单元格向右跨列，向下跨行。
   

使用网格布局 (Grid Layout) 节点创建适用于不同屏幕尺寸的用户界面

您可以使用网格布局 (Grid Layout) 节点创建可用于不同屏幕尺寸的设备并且用户界面统一的应用程序。网格布局 (Grid Layout) 节点可分配其子节点以便在应用程序界面中占据相对尺寸相同的空间，而不管屏幕尺寸或设备方向如何。例如，有了网格布局 (Grid Layout) 节点，您可以把用户界面控件放在左上角和右下角，距离屏幕边缘有严格定义的距离。

有关创建适用于不同屏幕尺寸的用户界面的更高级方法，请参阅教程：让应用程序拥有动态布局。

使用网格布局 (Grid Layout) 节点创建适用于不同尺寸的统一用户界面：

1. 创建一个网格布局 (Grid Layout) 节点并向其添加多个子节点。请参阅创建 网格布局 (Grid Layout) 节点。
2. 选择网格布局 (Grid Layout) 节点，并在属性 (Properties) 设置：
   • 列 (Columns) 和 行 (Rows) 属性为 按比例 (Proportional)。
   • 水平对齐 (Horizontal Alignment) 和 垂直对齐 (Vertical Alignment) 属性为 拉伸 (Stretch)。
     请注意，为了保持完美的图片像素，与其将水平对齐 (Horizontal Alignment) 和垂直对齐 (Vertical Alignment) 属性设置为拉伸 (Stretch)，不如添加对齐像素 (Snap to Pixel) 属性至随着应用程序布局改变位置的子节点。
   
   通过这些设置，您可以设置网格布局 (Grid Layout) 节点将其内容均匀分配到整个宽度和高度上，并设置网格布局 (Grid Layout) 节点拉伸至整个屏幕。
3. 在工程 (Project) 中选择网格布局 (Grid Layout) 节点的第三个子节点并在属性 (Properties) 中添加和设置：
   • 列 (Column) 为 2
   • 行 (Row) 为 2
   • 水平对齐 (Horizontal Alignment) 为右对齐 (Right)
   • 垂直对齐 (Vertical Alignment) 为下对齐 (Bottom)
   • 水平边距 (Horizontal Margin) 属性右对齐 (Right) 属性字段为 20
   • 垂直边距 (Vertical Margin) 属性下对齐 (Bottom) 属性字段为 20
   通过这些设置，您把网格布局 (Grid Layout) 节点的第三个子节点放在网格布局 (Grid Layout) 节点的第三行、第三列，并放置于距离屏幕右下角 20 像素的位置。网格布局 (Grid Layout) 节点的第三个子节点固定在该位置，而不管屏幕尺寸或方向如何。
   
4. 在工程 (Project) 中选择网格布局 (Grid Layout) 节点的第一个子节点，并在属性 (Properties) 中添加及设置：
   • 水平边距 (Horizontal Margin) 属性 左对齐 (Left) 属性字段为 20
   • 垂直边距 (Vertical Margin) 属性上对齐 (Top) 属性字段为 20
   通过这些设置，您在第一个子节点与屏幕边缘之间设置了 20 像素的边距。
   
5. 在 工程 (Project) 选择网格布局 (Grid Layout) 节点的第二个子节点并在属性 (Properties) 添加和设置：
   • 列 (Column) 为 1
   • 行 (Row) 为 1
   • 水平对齐 (Horizontal Alignment) 为居中 (Center)
   • 垂直对齐 (Vertical Alignment) 为居中 (Center)

   通过这些设置，您把第二个子节点放在 网格布局 (Grid Layout) 的第二列、第二行。
   

设置 2D 网格布局 (Grid layout 2D) 节点的外观

要设置 2D 节点的外观：

• 您可以使用单色、纹理或材质填充 2D 节点。请参阅调整 2D 节点的外观。
  
• 您可以围绕所有三个轴旋转 2D 节点，以创建 3D 透视效果。请参阅为 2D 节点创建 3D 透视效果。
  
• 您可以应用自定义渲染到 2D 节点，以创建后处理效果。请参阅应用自定义渲染到 2D 节点。
  

在 API 中使用 3D 网格布局 (Grid layout 3D) 节点

要创建一个两列两行且单元格自动调整大小的 3D 网格布局，并将网格设置为按照从上到下的顺序排列网格列中的项：

//创建一个名为 Grid 的 GridLayout3D。
GridLayout3DSharedPtr grid = GridLayout3D::create(domain, "Grid");

//设置网格，以便在排列网格中的项时首先将它们添加到
//第一列中的行中。当第一列中的所有行都填满时，
//网格开始将这些项添加到第二列的行中，以此类推。
grid->setDirection(GridLayoutConcept::GridDirectionDown);

//设置网格，使其有两行两列并且自动根据内容
//确定自己的大小。
grid->addAutomaticColumn();
grid->addAutomaticColumn();
grid->addAutomaticRow();
grid->addAutomaticRow();

//创建并添加四个立方体，网格中的每个单元格一个。让网格
//自动设置子节点要占用的单元格。由于 #GridDirection 被
//设置为 GridDirectionDown，因此网格在自动排列网格中的项时，
//会首先按照从上到下的顺序将它们添加到第一列的两行中，
//然后按照从上到下的顺序添加到第二列的两行中。
Model3DSharedPtr child1 = Model3D::createBox(domain, "Box1", Vector3(2.0f, 2.0f, 2.0f), ThemeRed);
grid->addChild(child1);
Model3DSharedPtr child2 = Model3D::createBox(domain, "Box2", Vector3(3.0f, 3.0f, 3.0f), ThemeBlue);
grid->addChild(child2);
Model3DSharedPtr child3 = Model3D::createBox(domain, "Box3", Vector3(1.0f, 1.0f, 1.0f), ThemeOrange);
grid->addChild(child3);
Model3DSharedPtr child4 = Model3D::createBox(domain, "Box4", Vector3(4.0f, 4.0f, 4.0f), ThemeGreen);
grid->addChild(child4);

要创建一个两列三行且网格根据网格中其他列和行的大小成比例计算这些行列大小的 3D 网格布局。（对于网格中的每个项，手动设置它们要在网格中占用的单元格）：

//创建一个名为 Grid 的 GridLayout3D。
GridLayout3DSharedPtr grid = GridLayout3D::create(domain, "Grid");

//将整个网格的宽度和高度设置为 6 个单位。
grid->setWidth(6.0f);
grid->setHeight(6.0f);

//设置网格，以使其具有 2 个加权列和 3 个加权行。
//第一列占整个网格宽度的三分之一，第二列占
//三分之二。
grid->addWeightedColumn(1.0f);
grid->addWeightedColumn(2.0f);
//每一行各占整个网格高度的三分之一。
grid->addWeightedRow(1.0f);
grid->addWeightedRow(1.0f);
grid->addWeightedRow(1.0f);

//创建一个名为 Box1 的橙色立方体，并将其添加到第一行、第一列的单元格
//（网格的左上角）。
Model3DSharedPtr child1 = Model3D::createBox(domain, "Box1", Vector3(2.0f, 2.0f, 2.0f), ThemeOrange);
GridLayout3D::setColumn(*child1, 0);
GridLayout3D::setRow(*child1, 0);
grid->addChild(child1);
//创建并添加一个名为 Box2 的蓝色立方体，以使其跨越第一列中的第二个和第三个单元格。
Model3DSharedPtr child2 = Model3D::createBox(domain, "Box2", Vector3(3.0f, 3.0f, 3.0f), ThemeBlue);
GridLayout3D::setColumn(*child2, 0);
GridLayout3D::setRow(*child2, 1);
GridLayout3D::setRowSpan(*child2, 2);
grid->addChild(child2);
//创建一个名为 Box3 的绿色立方体，并将其添加到第三行、第二列的单元格。
//（网格的右下角）。
Model3DSharedPtr child3 = Model3D::createBox(domain, "Box3", Vector3(1.0f, 1.0f, 1.0f), ThemeGreen);
GridLayout3D::setColumn(*child3, 1);
GridLayout3D::setRow(*child3, 2);
grid->addChild(child3);

要创建一个两行两列而且使用固定自动单元格大小的 3D 网格布局。（默认情况下，网格会自动设置这些项要占用的单元格）：

//创建一个名为 Grid 的 GridLayout3D。
GridLayout3DSharedPtr grid = GridLayout3D::create(domain, "Grid");

//设置网格为两列两行。
//将第一列的大小设置为 5 个单位，但让第二列根据
//自身所含内容的大小调整自己的大小。
grid->addFixedColumn(5.0f);
grid->addAutomaticColumn();
//将第一行的大小设置为 4 个单位，但让第二行根据
//自身所含内容的大小调整自己的大小。
grid->addFixedRow(4.0f);
grid->addAutomaticRow();

//为网格创建并添加 3 个立方体，并让网格自动设置
//子节点要占用的单元格。在本例中，三个子节点将占用
//整个第一行以及第二行的第一列。网格的最后一个单元格
//（右下角）保持为空。
Model3DSharedPtr child1 = Model3D::createBox(domain, "Box1", Vector3(2.0f, 2.0f, 2.0f), ThemeOrange);
grid->addChild(child1);
Model3DSharedPtr child2 = Model3D::createBox(domain, "Box2", Vector3(3.0f, 3.0f, 3.0f), ThemeBlue);
grid->addChild(child2);
Model3DSharedPtr child3 = Model3D::createBox(domain, "Box3", Vector3(1.0f, 2.0f, 1.0f), ThemeGreen);
grid->addChild(child3);

有关详细信息，请参阅 API reference中的 GridLayout3D 类。

在 API 中使用 2D 网格布局 (Grid layout 2D) 节点

要创建一个两列两行且单元格自动调整大小的 2D 网格布局，并将网格设置为按照从上到下的顺序排列网格列中的项：

//创建一个名为 Grid 的 GridLayout2D。
GridLayout2DSharedPtr grid = GridLayout2D::create(domain, "Grid");

//设置网格，以便在排列网格中的项时首先将它们添加到
//第一列中的行中。当第一列中的所有行都填满时，
//网格开始将这些项添加到第二列的行中，以此类推。
grid->setDirection(GridLayoutConcept::GridDirectionDown);

//设置网格，以使其具有 2 个自动列和行，它们将根据自身所含内容的大小
//确定自己的大小。
grid->addAutomaticColumn();
grid->addAutomaticColumn();
grid->addAutomaticRow();
grid->addAutomaticRow();

//为网格中的 4 个单元格分别创建并添加一个空节点。让网格
//自动设置子节点要占用的单元格。由于 #GridDirection 被
//设置为 GridDirectionDown，因此网格在自动排列网格中的项时，
//会首先按照从上到下的顺序将它们添加到第一列的两行中，
//然后按照从上到下的顺序添加到第二列的两行中。
EmptyNode2DSharedPtr child1 = EmptyNode2D::create(domain, "Empty1", 128.0f, 128.0f, ThemeRed);
grid->addChild(child1);
EmptyNode2DSharedPtr child2 = EmptyNode2D::create(domain, "Empty2", 256.0f, 256.0f, ThemeBlue);
grid->addChild(child2);
EmptyNode2DSharedPtr child3 = EmptyNode2D::create(domain, "Empty3", 128.0f, 128.0f, ThemeOrange);
grid->addChild(child3);
EmptyNode2DSharedPtr child4 = EmptyNode2D::create(domain, "Empty4", 128.0f, 128.0f, ThemeGreen);
grid->addChild(child4);

要创建一个两行两列而且使用固定自动单元格大小的 2D 网格布局。（默认情况下，网格会自动设置这些项要占用的单元格）：

//创建一个名为 Grid 的 GridLayout2D。
GridLayout2DSharedPtr grid = GridLayout2D::create(domain, "Grid");

//设置网格为两列两行。
//将第一列的大小设置为 200 个单位，但让第二列根据
//自身所含内容的大小调整自己的大小。
grid->addFixedColumn(200.0f);
grid->addAutomaticColumn();
//将第一行的大小设置为 100 个单位，但让第二行根据
//自身所含内容的大小调整自己的大小。
grid->addFixedRow(100.0f);
grid->addAutomaticRow();

//为网格创建并添加 3 个空节点，并让网格自动设置
//子节点要占用的单元格。在本例中，三个子节点将占用
//整个第一行以及第二行的第一列。网格的最后一个单元格
//（右下角）保持为空。
EmptyNode2DSharedPtr child1 = EmptyNode2D::create(domain, "Empty1", 128.0f, 128.0f, ThemeRed);
grid->addChild(child1);
EmptyNode2DSharedPtr child2 = EmptyNode2D::create(domain, "Empty2", 256.0f, 256.0f, ThemeBlue);
grid->addChild(child2);
EmptyNode2DSharedPtr child3 = EmptyNode2D::create(domain, "Empty3", 128.0f, 128.0f, ThemeOrange);
grid->addChild(child3);

要创建一个两列三行且网格根据网格中其他列和行的大小成比例计算这些行列大小的 2D 网格布局。（对于网格中的每个项，手动设置它们要在网格中占用的单元格）：

//创建一个名为 Grid 的 GridLayout2D。
GridLayout2DSharedPtr grid = GridLayout2D::create(domain, "Grid");

//将整个网格的宽度和高度设置为 600 个单位。
grid->setWidth(600.0f);
grid->setHeight(600.0f);

//设置网格，以使其具有 2 个加权列和 3 个加权行。
//第一列占整个网格宽度的三分之一，第二列占
//三分之二。
grid->addWeightedColumn(1.0f);
grid->addWeightedColumn(2.0f);
//每一行各占整个网格高度的三分之一。
grid->addWeightedRow(1.0f);
grid->addWeightedRow(1.0f);
grid->addWeightedRow(1.0f);

//创建一个名为 Empty1 的空节点，并将其添加到第一行、第一列的单元格
//（网格的左上角）。
EmptyNode2DSharedPtr child1 = EmptyNode2D::create(domain, "Empty1", 128.0f, 128.0f, ThemeRed);
GridLayout2D::setColumn(*child1, 0);
GridLayout2D::setRow(*child1, 0);
grid->addChild(child1);
//创建一个名为 Empty1 的空节点，并将其添加到第二行、第一列的单元格，
//以使其跨越网格第一列中的第二行和第三行。
EmptyNode2DSharedPtr child2 = EmptyNode2D::create(domain, "Empty2", 256.0f, 256.0f, ThemeBlue);
GridLayout2D::setColumn(*child2, 0);
GridLayout2D::setRow(*child2, 1);
GridLayout2D::setRowSpan(*child2, 2);
grid->addChild(child2);
//创建一个名为 Empty3 的空节点，并将其添加到第三行、第二列的单元格
//（网格的右下角）。
EmptyNode2DSharedPtr child3 = EmptyNode2D::create(domain, "Empty3", 128.0f, 128.0f, ThemeOrange);
GridLayout2D::setColumn(*child3, 1);
GridLayout2D::setRow(*child3, 2);
grid->addChild(child3);

有关详细信息，请参阅 API reference中的 GridLayout2D 类。

网格布局 (Grid Layout)属性类型和消息

要查看 网格布局 (Grid Layout) 节点可用属性类型和消息的列表，请参阅 Grid layout 2D 和 Grid layout 3D。

另请参阅

使用网格列表框 (Grid List Box) 节点

使用流式布局 (Flow Layout) 节点

使用网格布局 (Grid Layout) 节点

使用堆栈布局 (Stack Layout) 节点

使用轨迹布局 (Trajectory Layout) 节点

布局控制节点

设置 屏幕 (Screen) 节点

使用 Kanzi Studio 为节点启用点击手势

打开导航