android 如何填充行内的Box()的MaxSize()-组合

qv7cva1a  于 2022-12-25  发布在  Android
关注(0)|答案(3)|浏览(118)

我想在行中的框的底端对齐按钮(在波纹管卡的底端)。我有卡与行谁是分为两个部分-卡和框,我想框填充最大的其余行。我不能实现它,我会希望。波纹管我附上了当前代码的可视化。


@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ł")

                    }
                }
            }
        }
    }
}
zi8p0yeb

zi8p0yeb1#

我希望您在LazyColumn或垂直滚动条中显示此项目。
Modifier.fillMaxHeight在这种情况下不起作用,因为父高度约束等于无穷大。
为了解决这个问题,你可以使用一个静态值,但是在这种情况下,intrinsic measurements可以用来 Package 内容大小。
Modifier.height(IntrinsicSize.Max)添加到您的Row

0lvr5msh

0lvr5msh2#

代码看起来不错,我第一眼,甚至尝试了它,按钮是在右下角。您在哪里定义您的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
    ) {
 ...
}
zzlelutf

zzlelutf3#

正如Phil Dukhov回答的那样,Modifier.height(IntrinsicSize.Max)对我有效。
只需将修饰符设置为Row中的Root元素,在本例中为Card(将.fillMaxWidth()更改为.height(IntrinsicSize.Max)):

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

相关问题