如何在Compose中使用fillMaxSize()来填充row中的Box()?

Question

我想将按钮对齐到行中盒子的BottomEnd（在下面的卡片的BottomEnd）。我有一个带有两个部分的行（Card和Box）的卡片，并且我想让盒子填充剩余行的最大值。我无法按照自己的想法实现它。下面是当前代码的可视化效果。

@Composable
fun ProductItem(product: ProductModel, onItemClick: () -> Unit, onAddToCardButton: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxSize()
            .padding(7.dp)
            .clickable { onItemClick() },
        shape = MaterialTheme.shapes.large,
        elevation = 4.dp
    ) {
        Row(
            modifier = Modifier.fillMaxSize()
        ) {
            Card(
                modifier = Modifier
                    .weight(1f),
                shape = MaterialTheme.shapes.small,
                elevation = 2.dp
            ) {
                Image(
                    painter = painterResource(id = R.drawable.ic_splash_screen),
                    contentDescription = "Image of ${product.name}",
                )
            }
            Box(
                modifier = Modifier
                    .weight(2f)
                    .fillMaxHeight()
                    .padding(6.dp)
                    .background(Color.Green)
            ) {
                Column(modifier = Modifier.align(Alignment.TopStart)) {
                    Text(
                        text = "${product.number}. ${product.name}",
                        fontWeight = FontWeight.Bold,
                        style = MaterialTheme.typography.h4,
                    )
                    Text(
                        text = product.ingredients, fontStyle = FontStyle.Italic
                    )
                }

                Button(
                    modifier = Modifier.align(Alignment.BottomEnd),
                    onClick = {
                        onAddToCardButton()
                    },
                    shape = RoundedCornerShape(8.dp),
                ) {
                    if (product.type == "pizza") {
                        Text(text = "od ${String.format("%.2f", product.price[0])} zł")
                    } else {
                        Text(text = "${String.format("%.2f", product.price[0])} zł")

                    }
                }
            }
        }
    }
}

- Wojtek K

Answer 1

我希望你能在LazyColumn中或垂直可滚动的容器中显示此项。

由于父级高度约束等于无穷大，因此Modifier.fillMaxHeight在这种情况下不起作用。

为了解决这个问题，你当然可以使用静态值，但在这种情况下，可以使用内在测量来包装内容大小。

将Modifier.height(IntrinsicSize.Max)添加到你的Row中即可。

- Phil Dukhov

Answer 2

代码乍一看还不错，我甚至试了一下，按钮确实在右下角。你在哪里定义了ProductItem卡片的高度？

也许你可以尝试在提供的代码中进行更改来定义它。

.fillMaxSize()

修改器

.fillMaxWidth()
.requiredHeight(**.dp)

在你的第一个卡片组件中。

因此，它看起来会像这样：

@Composable
fun ProductItem(product: ProductModel, onItemClick: () -> Unit, onAddToCardButton: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .requiredHeight(**.dp)
            .padding(7.dp)
            .clickable { onItemClick() },
        shape = MaterialTheme.shapes.large,
        elevation = 4.dp
    ) {
 ...
}

- Abokyy

---

我希望主卡片的高度不是静态的。我想通过内部卡片中由.weight(1f)指定的图像大小来调整它。但我尝试了你的想法，并且使用.requiredHeight(130.dp)效果很好。现在Box填充最大高度。谢谢。 - Wojtek K

如果您想让高度更具“动态性”，可以将其作为参数通过ProductItem组合传递下来。ProductItem(...,cardHeight: Int = 130, ...) { Card(modifier = ....requiredHeight(cardHeight.dp)。也许有一些误解：如果您在Row内部的子元素中编写.weight()，它不会影响子元素的高度，只会影响宽度。（如果您在Column内部编写它，则只会影响子元素的高度而不是宽度）。 - Abokyy

Answer 3

正如Phil Dukhov所回答的那样，Modifier.height(IntrinsicSize.Max)对我有效。

只需将修改器设置为您行中的根元素。在您的情况下，它是卡片（将.fillMaxWidth()更改为.height(IntrinsicSize.Max)）：

Card(
        modifier = Modifier
            .height(IntrinsicSize.Max)
            .padding(7.dp)
            .clickable { onItemClick() },
        shape = MaterialTheme.shapes.large,
        elevation = 4.dp
    ) 

- polis