通过

容器布局

  • 项目

容器（如 Container、 Column、 TableCell或自适应卡片）本身支持三种不同类型的布局：

  • Layout.Stack 将元素堆叠在一起，是默认布局。
  • Layout.Flow 可水平分布元素，并根据需要将它们包装在多个行中。
  • Layout.AreaGrid 将容器划分为名为 areas 的 容器，其中元素可以通过属性放置 grid.area ，该属性可以设置在任何元素上。

Layout.Stack

将元素堆叠在一起的布局。 Layout.Stack 是自适应卡和所有容器使用的默认布局。

下面是布局的属性 Layout.Stack ：

Name 必需 类型 说明
type ✔️ String 必须是 Layout.Stack。
targetWidth String 控制必须使用布局的卡宽度。 如果未targetWidth指定 ，则以所有卡宽度呈现元素。 使用 targetWidth 可以创作响应式卡片，使其布局适应可用的水平空间。
有关详细信息，请参阅 自适应卡片响应布局。
允许的值：VeryNarrow、、Narrow、Standard、Wide、atLeast:VeryNarrowatLeast:NarrowatMost:NarrowatMost:VeryNarrow、atLeast:Standard、、atMost:Standard、、 atLeast:WideatMost:Wide

Layout.Flow

一种布局，可根据需要水平分布元素并将其换行到多个行。

使用 Layout.Flow 可对图像等元素列表进行布局，而无需担心可用的水平空间量。 可以根据需要调整元素的宽度和对齐方式。 每行自动获取适当的高度，列和行之间的间距是可配置的，并自动强制实施。

示例

从上到左对齐

屏幕截图显示了自适应卡片容器布局，其中元素堆叠在左上角。

水平和垂直居中

屏幕截图显示具有水平和垂直居中容器布局的自适应卡片。

始终填充每行的可用空间

屏幕截图显示了具有填充容器布局的自适应卡片。

提示

不要将 属性与 一起使用maxItemWidthitemFit: fill。 根据定义， maxItemWidth 通过稍微放大该行中的每个元素，防止项超过特定宽度，这与填充行上的剩余可用空间不兼容。 itemWidth请改用 属性。

下面是布局的属性 Layout.Stack ：

名称 类型 默认值 说明
type String 必须是 Layout.Stack。
columnSpacing String “Default” 项之间的空格。
允许的值：None、、ExtraSmall、Small、DefaultMedium、Large、ExtraLarge、Padding
horizontalItemsAlignment String “Center” 控制容器内容必须水平对齐的方式。
允许的值： Left、 Center、 Right
itemFit String “Fit” 控制项必须放入容器内的方式。
允许的值： Fit、 Fill
itemWidth String 每个项的宽度（以像素为单位 <number>px ）的格式。 如果 maxItemWidth 设置了 或 minItemWidth，或 两者都设置，则不得使用 。
允许的值： <number>px
maxItemWidth String 每个项的最大宽度（以像素为单位），格式 <number>px 为 。 如果 itemWidth 设置了 ，则不得使用 。
允许的值： <number>px
minItemWidth String 0 每个项的最小宽度（以像素为单位），格式 <number>px 为 。 如果 itemWidth 设置了 ，则不得使用 。
允许的值： <number>px
rowSpacing String Default 项行之间的间距。
允许的值：None、、ExtraSmall、Small、DefaultMedium、Large、ExtraLarge、Padding
targetWidth String 必须使用布局卡宽度的控件。 如果未targetWidth指定 ，则以所有卡宽度呈现元素。 使用 targetWidth 可以创作响应式卡片，使其布局适应可用的水平空间。
有关详细信息，请参阅 自适应卡片响应布局。
允许的值：VeryNarrow、、Narrow、Standard、Wide、atLeast:VeryNarrowatLeast:NarrowatMost:NarrowatMost:VeryNarrow、atLeast:Standard、、atMost:Standard、、 atLeast:WideatMost:Wide
verticalItemsAlignment String Top 控制容器内容必须如何垂直对齐。
允许的值： Top、 Center、 Bottom

Layout.AreaGrid

一种布局，将容器划分为可以放置元素的命名区域。

用于Layout.AreaGrid将自适应卡片 、 Container或 ColumnTableCell 中的元素组织到网格中。 Layout.AreaGrid对于设计响应式卡片很有用：在单个容器上定义多个Layout.AreaGrid布局，并将其定位在不同的卡宽度，以便在运行时根据可用宽度自动从一个布局切换到另一个布局。 若要将容器中的元素分配给网格中的特定区域，必须设置其 grid.area 属性。

示例

屏幕截图显示了具有区域网格布局的自适应卡片容器。

下面是布局的属性 Layout.AreaGrid ：

名称 类型 默认值 说明
type String 必须是 Layout.AreaGrid。
areas 对象的数组。 网格布局中的区域。
允许的值： GridArea
columns 数字或字符串数组 网格布局中的列，定义为可用宽度的百分比或使用 格式以像素 <number>px 为单位。
columnSpacing String Default 列之间的间距。
允许的值：None、、ExtraSmall、Small、DefaultMedium、Large、ExtraLarge、 。 Padding
rowSpacing String Default 行之间的空格。
允许的值：None、、ExtraSmall、Small、DefaultMedium、Large、ExtraLarge、 。 Padding
targetWidth String 必须使用布局卡宽度的控件。 如果 itemWidth 设置了 ，则不得使用 。 如果未targetWidth指定 ，则以所有卡宽度呈现元素。 使用 targetWidth 可以创作响应式卡片，使其布局适应可用的水平空间。
有关详细信息，请参阅 自适应卡片响应布局。
允许的值：VeryNarrow、、Narrow、Standard、Wide、atLeast:VeryNarrowatLeast:NarrowatMost:NarrowatMost:VeryNarrow、atLeast:Standard、、atMost:Standard、、 atLeast:WideatMost:Wide

GridArea

定义布局中的 Layout.AreaGrid 区域。

下面是数组的属性 GridArea ：

名称 类型 默认值 说明
columns 数字 1 区域的起始列索引。 列索引从 1 开始。
columnSpan 数字 1 定义区域必须跨越的列数。
name String 区域的名称。 若要将元素置于此区域中，请将其 grid.area 属性设置为与区域名称匹配。
row 数字 1 区域的起始行索引。 行索引从 1 开始。
rowSpan 数字 1 定义区域必须跨越的行数。

使用容器布局实现响应式布局

容器布局可用于实现响应式布局，因为可以将多个布局与单个容器相关联，每个布局专用于特定的卡宽度。 在运行时，相应的布局会自动用于在可用宽度中排列元素。

例如，如果要定义具有典型布局的卡，其中：

  • 左侧有一个图像
  • 图像右侧的文本

但是，当没有足够的水平空间时，文本必须出现在图像下方。

可以使用 完成 Layout.AreaGrid此操作：

屏幕截图显示了采用不同布局的自适应卡片。

运作方式

在这里， 属性layouts在整个卡上定义：

{
    "type": "Layout.AreaGrid",
    "targetWidth": "atLeast:standard",
    "columns": [
        60
    ],
    "areas": [
        {
            "name": "image"
        },
        {
            "name": "text",
            "column": 2
        }
    ]
}

这意味着：

  • 仅当卡的宽度至少standard为 (对应于 Teams 聊天中卡的典型宽度（例如) ）时，才在网格布局中组织卡中的元素。
    • 如果卡的宽度小于 standard，请使用默认布局 Layout.Stack。
  • 网格布局至少有一列必须使用 60% 的可用空间。 网格中可能有其他列 (，具体取决于 areas 定义) 但因为它们未定义，因此它们各自共享剩余空间的相等部分。
  • 定义了两个区域：
    • 一个用于图像，映射到网格的第一列和第一行。
    • 一个用于文本，覆盖第二列和第一行。

提示

layouts不需要指定 属性。 如果未指定显式布局，容器将使用 Layout.Stack 布局。

卡正文中的元素通过 grid.area 属性分配网格区域：

{
    "type": "Container",
    "grid.area": "textArea", // The text container is assigned to the textArea
    "items": [
      ...
    ]
}

{
    "type": "Image",
    "url": "...",
    "grid.area": "imageArea", // The Image is assigned to the imageArea
    "style": "RoundedCorners",
    "targetWidth": "atLeast:narrow" // Also notice the image is set to not display at all at the "very narrow" width
}

代码示例

名称 说明 .Node.js .NET
卡片格式设置 此示例应用演示自适应卡片中的各种容器布局。 View View

另请参阅