Jetpack Compose如何实现图片自适应可滚动Column布局

不需要给Image设置固定尺寸，按两个规则调整即可实现宽度撑满、高度按原图比例自适应的效果：

• 移除Image原有的固定size(640.dp)修饰符，替换为Modifier.fillMaxWidth()，让图片组件占满父布局分配的最大可用宽度
• 给Image配置contentScale = ContentScale.FillWidth参数，该配置会让图片严格按照原始宽高比，根据实际拿到的宽度自动计算对应高度，不会出现拉伸变形、裁剪的问题

修正后的完整可运行代码如下：

Column(modifier = Modifier.fillMaxSize().background(Color.Blue)) {
    Text(text = "text")

    Column(modifier = Modifier
        .verticalScroll(rememberScrollState())
        .fillMaxSize()
        .background(Color.Red)) {

        Image(
            painter = painterResource(id = R.drawable.1),
            contentDescription = null,
            modifier = Modifier.fillMaxWidth(),
            contentScale = ContentScale.FillWidth
        )

        Button(onClick = { /*TODO*/ }) {}
        Button(onClick = { /*TODO*/ }) {}
        Button(onClick = { /*TODO*/ }) {}
        Button(onClick = { /*TODO*/ }) {}
    }

    Button(onClick = { /*TODO*/ }) {}
}

如果需要给图片加左右边距，直接在fillMaxWidth()后链式调用padding(horizontal = 对应边距值.dp)即可，图片高度会根据扣除边距后的实际宽度自动重算，不需要手动调整尺寸。

内容的提问来源于stack exchange，提问作者AloneWalker