设置容器属性

您可以定义网格容器配置，以创建能够响应不同屏幕尺寸和内容类型的灵活布局。 本页面介绍了如何执行以下操作：

• 定义网格：设置行和列的基本结构。
• 在网格中放置项：了解如何将项放置到网格单元格中，以及如何更改流向。
• 管理轨道大小：使用固定大小、百分比大小、灵活大小和固有大小来设置轨道大小。
• 设置间距：管理行和列之间的“装订线”。

定义网格

网格由列和行组成。 Grid 可组合项具有 config 形参 ，该形参接受 lambda 以在 GridConfigurationScope 中定义列和行 。以下示例定义了一个包含三行两列的网格， 每行和每列都具有以 Dp 指定的固定大小：

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

在网格中放置项

Grid 会获取 content lambda 中的界面元素，并将它们放置到网格单元格中。 无论您是否已明确定义行和列，网格都会布局项。 默认情况下，Grid 会尝试将界面元素放置在行中的可用网格单元格中；如果无法放置，则会将其放置在下一行中的可用网格单元格中。 如果没有空单元格，Grid 会创建一个新行。

在以下示例中，网格有六个网格单元格，并在每个单元格中放置一张卡片（图 1）。 每个网格单元格的大小为 160dp x 90dp，因此网格的总大小为 320dp x 270dp。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

图 1. 六张卡片放置在一个包含三行两列的网格中。

如需将此默认行为更改为按列填充， 请将 flow 属性设置为 GridFlow.Column。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

图 2。 GridFlow.Row （左）和 GridFlow.Column（右）。

管理轨道大小

行和列统称为网格轨道。 您可以使用以下方法之一指定网格轨道的大小：

• 固定 (Dp)：分配特定大小（例如，column(180.dp)）。
• 百分比 (Float)：分配总可用空间的百分比，范围从 0.0f 到 1.0f（例如，row(0.5f) 表示 50%）。
• 灵活 (Fr)：在计算固定 轨道和百分比轨道后，按比例分配剩余空间。例如，如果将两行设置为 1.fr 和 3.fr，则后者将获得剩余高度的 75%。
• 固有：根据轨道内的内容调整轨道大小。如需了解详情，请参阅以固有方式确定网格轨道大小。

以下示例使用不同的轨道大小选项来定义行高：

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}
GridTrackSize.kt

图 3. 使用 Grid 中的四个主要轨道大小选项定义的行高。

以固有方式确定网格轨道大小

您可以对 Grid 使用 固有大小， 以便布局适应内容， 而不是强制将内容放入固定容器中。 网格轨道大小由以下值确定：

• GridTrackSize.MaxContent：使用内容的最大固有大小（例如，宽度由没有换行的文本块中文字的完整长度确定）。
• GridTrackSize.MinContent：使用内容的最小固有大小（例如，宽度由文本块中最长的单个字词确定）。
• GridTrackSize.Auto：为轨道使用灵活的大小，该大小会根据可用空间进行调整。默认情况下，它的行为类似于 MaxContent，但会缩小并换行其内容以适应父级容器。

以下示例将两个文本并排放置。 第一个文本的列大小由显示文本所需的最小宽度确定，而第二个文本的列宽度取决于文本所需的最大宽度。

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
}
GridTrackSize.kt

图 4. 列中指定的固有大小。

设置行和列之间的间距

确定网格轨道的大小后， 您可以修改网格间距，以优化轨道之间的间距。 您可以使用 columnGap 函数， 并使用 rowGap 指定行间距。在以下示例中，每行之间有 16dp 的间距，每列之间有 8dp 的间距（图 5）。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

图 5. 行和列之间的间距。

您还可以使用便捷函数 gap 来定义相同列大小和行大小的间距， 并使用单个函数分别定义列大小和间距大小。 以下代码向网格添加了 8dp 的间距：

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt