Jerome
Jerome

Reputation: 2761

Column vertical SpaceBetween not taking into account

Can not understand why in this card, in the column, the spacebetween vertical alignment is not taking into account. I'm expecting the Title to be on top, and the "View Details" button to be at the bottom of the Column

fun UserCard(image:Int, text:String, actionButtonLabel:String){
    Card(
        elevation = 4.dp,
        modifier = Modifier
            .padding(12.dp)
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        Row(
            horizontalArrangement  =  Arrangement.SpaceBetween,
            modifier = Modifier
                .padding(8.dp)
                .border(width = 1.dp, color = Color.Blue)
                .padding(12.dp)
        ) {
            Image(
                painter = painterResource(id = image),
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(120.dp)
                    .clip(CircleShape)
            )
            Column(
                modifier= Modifier.fillMaxHeight(),
                horizontalAlignment = Alignment.End,
                verticalArrangement = Arrangement.SpaceBetween, // <-- seems not to be taking into account
            ) {
                Title(text)
                Button(onClick = { }) {
                    Text(text = actionButtonLabel)
                }

            }
        }
    }
}

example of call of UserCard

UserCard(
            image= R.drawable.iron,
            text = "Live after death",
            actionButtonLabel = "View details"
        )

button tp be at button of the card

Upvotes: 2

Views: 505

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

You can apply an intrinsic measurements to the Row container and the fillMaxHeight() Modifier to the Column.
Your issue is the height of the column.

    Row(
        horizontalArrangement  =  Arrangement.SpaceBetween,
        modifier = Modifier.height(IntrinsicSize.Min)
        //..
    ){
        /* Image */
        Column(
            modifier = Modifier
                .fillMaxHeight(),
            horizontalAlignment = Alignment.End,
            verticalArrangement = Arrangement.SpaceBetween){
          
           //...
        }
   }

enter image description here

Upvotes: 2

Related Questions