Jetpack Compose - 将图像缩放至列/行中的可用尺寸

Question

考虑下图：

我有一个Column与另一个有一些元素Image的一起。我想做的是将比例统一到可用空间。我就是无法让它发挥作用。ColumnTextImage

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Cyan)
        .padding(horizontal = 16.dp),
    verticalArrangement = Arrangement.SpaceEvenly
) {
    Image(
        modifier = Modifier.fillMaxWidth(),
        painter = painterResource(R.drawable.rocket_boy),
        contentDescription = null,
        contentScale = ContentScale.Fit
    )
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        repeat(20) {
            Text(text = "${it}")
        }
    }
}

我尝试的其中一件事是将ImagetofillMaxSize和weight第二个Columnto的大小设置为1f，但它没有做任何事情。也许我需要Column固定第二个的大小？非常感谢任何帮助。

Answer 1

你没有用Modifier.weight在正确的孩子身上。它应该应用于视图，您需要填充父级的其余部分。

父级会划分测量未加权的子元素后剩余的垂直空间，并根据这个权重进行分配。

Modifier.weightfill有带有默认参数的参数true。Modifier.fillMaxHeight()此默认参数的作用与（在情况下）相同Column，如果您不需要填充所有可用的高度，则可以指定false：

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Cyan)
        .padding(horizontal = 16.dp),
    verticalArrangement = Arrangement.SpaceEvenly,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    val painter = painterResource(R.drawable.ic_redo)
    Image(
        modifier = Modifier.weight(1f, fill = false)
            .aspectRatio(painter.intrinsicSize.width / painter.intrinsicSize.height)
            .fillMaxWidth(),
        painter = painter,
        contentDescription = null,
        contentScale = ContentScale.Fit
    )
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        repeat(20) {
            Text(text = "${it}")
        }
    }
}