How to make image fit in scrollable column?-CodePudding

What I want: I want every image to fit as much as it can in the scrollable column. so the image fit the maximum width it can and the height respectively. I can't figure out how to do this in compose.

What I tried: I only succeed to do this by using a fixed size for the image but this isn't really a solution.

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.size(640.dp)
        )

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

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

CodePudding user response：

If you want the Image composable to fill the maximum width available you have to use Modifier.fillMaxWidth(). That is the same with any Composable.

And then if you also want the image content to be scaled in such a way that it fills the maximum width first and then proportionally fills the height as well, you have to pass the ContentScale.FillWidth value for the contentScale parameter.

Both together in your code

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

Another detail that I noticed, if you want the Button below the Column to actually stay on the screen (and not get pushed out by the Column) you have to add the .weight(1f, fill = true) modifier to the Column.

Column(modifier = Modifier
    .verticalScroll(rememberScrollState())
    .fillMaxSize()
    .weight(1f, fill = true)
    .background(Color.Red))