主页 / coding / 问题 / 79016499
Accepted
BobDoolittle
Asked: 2024-09-24 06:58:59 +0800 CST

编写 FilterChip 的 Jetpack LazyGrid

  • 772

我正在尝试创建一个与Material3 Chip 页面顶部非常相似的 UI 。 在此处输入图片描述 看来最好的方法是构建一个LazyVerticalStaggeredGrid由可组合项组成的内容FilteredChip。

列中的单个 FilteredChip 显示得很好。但是当我将其包装在 LazyVerticalStaggeredGrid 中时，它会忽略文本大小限制并减小每个芯片的宽度，并给出非常大的高度。根据布局检查器，文本的宽度为 0dp，高度为 140dp。此外，它忽略了我的主题配色方案。

我期望它测量 Text 可组合项中的文本大小，并将其传递上去以确定每个块的宽度和每行的高度。如果 LazyGrids 的工作方式不是这样，我该如何处理这个问题？

这是一个非常简单的例子，可以说明我的问题：

@Composable
fun VerticalGrid(
    contentList: List<String>,
    modifier: Modifier = Modifier,
) {
    LazyVerticalStaggeredGrid(
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        columns = StaggeredGridCells.Adaptive(minSize = 4.dp),
        verticalItemSpacing = 8.dp,
        modifier = modifier.fillMaxSize()
    ) {
        var selected = false
        items(contentList) { text ->
            Chip(text, selected, { selected = !selected }, modifier)
        }
    }
}

@Composable
fun Chip(
    text: String,
    selected: Boolean,
    onClick: () -> (Unit),
    modifier: Modifier = Modifier,
) {
    FilterChip(
        onClick = onClick,
        label = { Text(text = text) },
        selected = selected,
        modifier = modifier
    )
}

object Content {
    val contentList = mutableListOf<String>()

    init {
        for (i in 10..50) {
            contentList.add("Label$i")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ChipPreview1() {
    StaggeredGridOfChipsTheme {
        Column(
            verticalArrangement = Arrangement.Top,
            modifier = Modifier.fillMaxSize()
        ) {
            Chip("Hello", true, {})
        }
    }
}

@Preview(showBackground = true)
@Composable
fun VerticalGridPreview1() {
    StaggeredGridOfChipsTheme {
        VerticalGrid(Content.contentList, Modifier.fillMaxSize())
    }
}

这会导致以下行为： 在此处输入图片描述

任何能帮助我解决此问题的提示都会受到欢迎。

kotlin

1 个回答

  1. Best Answer

    LazyVerticalStaggeredGrid您可以使用 来限制每列的大小StaggeredGridCells.Adaptive(minSize = 4.dp)。摘自文档：

    定义一个具有尽可能多的行或列的网格，条件是每个单元格至少具有minSize空间并且所有额外空间均匀分布。

    这意味着列仅很4.dp宽（+一些额外的边际空间）。尝试将其设置为80.dp以查看差异。

    如果你的芯片尺寸不尽相同，那么 Grid 就不是最好的选择，你应该使用 FlowRow 来代替：

    FlowRow(
    modifier = modifier,
    horizontalArrangement = Arrangement.SpaceBetween,
) {
    contentList.forEach { text ->
        var selected by remember { mutableStateOf(false) }
        Chip(text, selected, { selected = !selected })
    }
}

    让我们仔细看看 aLazyVerticalStaggeredGrid实际上是什么：

    1. LazyVertical StaggeredGrid：惰性垂直行为与 类似LazyColumn。这意味着您没有垂直限制，可以无限滚动（当然，只要有可显示的元素）。

    2. LazyVerticalStaggered Grid：网格由行和列组成，其中所有单元格的大小相同。它们不必是正方形（即宽度==高度），但每个单元格的宽度与所有其他单元格相同。高度也是如此。rgid 就像一个栅格。

    3. LazyVertical交错网格：另一方面，交错网格可以具有可变大小的单元格。显然，单元格不能具有任意大小，否则会有很多空白的未使用空间。交错与滚动方向上的可变大小有关，只是它是可变的。在垂直滚动的交错网格中，高度是可变的。

    看看文档中的这个例子：

    具有三个固定列的 LazyVerticalStaggeredGrid

    它有三列等宽的列，可以垂直滚动。每个单元格的宽度相同，但高度不同。这就是LazyVerticalStaggeredGrid典型的样子。

    该图像来自上述链接的第二个示例。它使用 明确将列数设置为三StaggeredGridCells.Fixed(3)。列的实际宽度取决于可用的总宽度，每列占总宽度的三分之一。当设备旋转到横向模式时，它仍然会有三列，但每列的宽度要大得多。

    但是，第一个示例使用的类似于您StaggeredGridCells.Adaptive(200.dp)在代码中使用的 。这意味着列数是灵活的，并根据可用空间进行调整。唯一的限制是每列必须至少为 200.dp宽。因此，我们假设 LazyVerticalStaggeredGrid 可用的总宽度为 500.dp。这意味着至少200.dp可以容纳两列。其余列100.dp均匀分布到其他列，因此每列都很250.dp宽。当设备旋转到横向模式并且现在有1000.dp可用时，您将有五列，每列的宽度都恰好为200.dp。这就是为什么它被称为Adaptive：列数根据可用空间进行调整。

    现在，当显示每个单元格的实际内容时（这些示例中的图像，代码中的 Chips），内容会调整大小以适应。这是 Compose 布局组件的一般工作方式，它并不特定于 LazyVerticalStaggeredGrid。在您的代码中，列只有4.dp宽度（加上剩余空间的可忽略不计的一小部分），因此要求 Chips 相应地调整自身大小。它们会尽其所能，将每个字母换行，以便宽度尽可能小，同时高度增加。这是可能的，因为高度不受限制（请参阅上面的第 3 点，网格是垂直交错的。）

    不相关，但仍然值得注意：

    1. modifier您应该仅将的参数传递VerticalGrid给第一个元素（LazyVerticalStaggeredGrid），而不要传递给其他元素（Chips）。否则，它将扰乱修饰符语义，并使调用者感到不可预测。

    2. 您将VerticalGrid变量声明为纯布尔值。如果您希望芯片相应地更新，selected则需要考虑这一点。此外，该变量需要在循环内移动，以便每个芯片都有自己的状态，否则切换一个芯片也会切换所有其他芯片。与我在上面的 FlowRow 示例中所做的操作进行比较。MutableState<Boolean>items

    3. 您可以更轻松地创建测试数据Content.contentList。如果您想要 41 个不同标签的列表，您可以简单地使用以下命令：

      List(41) { "Label$it" }

      如果希望它介于 10 和 50 之间（含 10 和 50），则可以使用以下命令：

      List(41) { "Label${it + 10}" }
    • 2

相关问题