Compose - 对齐列最大高度

Question

我正在尝试创建一个适应视图高度的组件，它是一个列表（列），里面有项目。

 Column(
        modifier = modifier.padding(horizontal = 8.dp), verticalArrangement = Arrangement.SpaceBetween
    ) {
        example.forEachIndexed { index, (exampleText, isOk) ->
            val hasItemBelow = index < example.size - 1

            ExampleItem(
                exampleText = exampleText,
                isOk = isOk,
                hasItemBelow = hasItemBelow,
            )
        }
    }

我正在将项目添加到列表中。

名单是：

@Composable
fun ExampleItem(
    exampleText: String,
    isOk: Boolean,
    hasItemBelow: Boolean,
    modifier: Modifier = Modifier,
) {
    Column(
        horizontalAlignment = Alignment.Start,
        modifier = modifier.then(
            if (!hasItemBelow) {
                Modifier
            } else {
                Modifier.height(IntrinsicSize.Max)
            }
        ),
    ) {
        Row(
            verticalAlignment = Alignment.Top, modifier = Modifier.wrapContentHeight()
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                val icon = if (isOk) {
                    Icons.Default.CheckCircle
                } else {
                    Icons.Default.Check
                }

                Icon(
                    imageVector = icon,
                    contentDescription = null,
                    tint = if (isOk) Color.Green else Color.Gray,
                    modifier = Modifier.size(24.dp)
                )
                if (hasItemBelow) {
                    Divider(
                        color = MaterialTheme.colors.grey,
                        modifier = Modifier
                            .width(1.dp)
                            .padding(top = 4.dp)
                            .defaultMinSize(minHeight = 20.dp)
                    )
                }
            }

            Spacer(modifier = Modifier.width(8.dp))

            Text(
                text = exampleText,
                color = Color.White,
                style = MaterialTheme.typography.caption,
                modifier = Modifier.padding(start = 8.dp)
            )
        }
    }
}

所以我想实现的是，如果我有 200.dp 的空间，则该项目占据所有高度并且应该展开，我面临的问题是

此行应与最后一项对齐，如下所示：

这条线应该是动态的，具体取决于视图的高度。

我缺少什么？

Answer 1

您需要将

weight

修饰符应用于除最后一项之外的所有项目。但它是一个

ColumnScope

修饰符，因此要在自定义组件中使用它，请使其成为

ColumnScope

扩展名：

@Composable
fun ColumnScope.StepItem(
//...

现在您可以将

weight

应用到外部

Column

：

Column(
    horizontalAlignment = Alignment.Start,
    modifier = modifier.then(
        if (hasItemBelow) {
            Modifier.weight(1f)
        } else {
            Modifier
        }
    ),