在撰写行中分隔视图，使最后一个视图始终对半显示 [英] Spacing views inside a compose row so the last view always is half shown

问题描述

我有一张作文卡片，在一行内有圆形视图，我需要制作它，以便该行中的最后一项只显示一半。有没有一种简单的方法来实现这一点，而不需要在绘制完所有内容后测量屏幕宽度，然后动态修改行项目的填充来实现它？)

推荐答案

如果您需要根据单元格内容的大小计算元素数，则在没有实际测量的情况下无法计算元素数。

但是，如果您确切知道需要显示多少元素，则可以将Modifier.fillParentMaxWidth与所需的fraction一起使用。这仅在像LazyRow这样的延迟视图中可用。

使用空格会稍微复杂一些：通常使用contentPadding来偏移第一个元素，这会减少parent size，这取决于Modifier.fillParentPaxMaxWidth计算的实际值。此外，如果将它同时应用于start和end，则不会得到预期的结果。这就是为什么我只将它应用于start，并在末尾使用另一个item来创建相同的效果。

我还手动将Spacers项括起来，而不是使用Arrangement.spacedBy，因为间隔符也应该在Modifier.fillParentMaxWidth中。

val spacing = 20.dp
val halfSpacing = spacing / 2
val shape = RoundedCornerShape(20)
LazyRow(
    contentPadding = PaddingValues(start = halfSpacing),
    modifier = Modifier
        .padding(30.dp)
        .border(1.dp, color = Color.Black, shape = shape)
        .clip(shape)
        .padding(vertical = 20.dp)
) {
    items(10) {
        Row(
            Modifier
                .fillParentMaxWidth(1f / 3.5f)
        ) {
            Spacer(Modifier.size(halfSpacing))
            Box(
                Modifier
                    .weight(1f)
                    .aspectRatio(1f)
                    .background(Color.Blue, shape = CircleShape)
            )
            Spacer(Modifier.size(halfSpacing))
        }
    }
    item {
        Spacer(Modifier.size(halfSpacing))
    }
}

结果：

LazyColumn变量：

val spacing = 20.dp
val halfSpacing = spacing / 2
val shape = RoundedCornerShape(20)
LazyColumn(
    contentPadding = PaddingValues(top = halfSpacing),
    modifier = Modifier
        .padding(30.dp)
        .border(1.dp, color = Color.Black, shape = shape)
        .clip(shape)
        .padding(horizontal = 20.dp)
) {
    items(10) {
        Column(
            Modifier
                .fillParentMaxHeight(1f / 3.5f)
        ) {
            Spacer(Modifier.size(halfSpacing))
            Box(
                Modifier
                    .weight(1f)
                    .aspectRatio(1f)
                    .background(Color.Blue, shape = CircleShape)
            )
            Spacer(Modifier.size(halfSpacing))
        }
    }
    item {
        Spacer(Modifier.size(halfSpacing))
    }
}

这篇关于在撰写行中分隔视图，使最后一个视图始终对半显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！