FillMaxWidth does not take into account other elements in a Row

Why the composable Icon does not appear?

The Cardcontent composable is FillMaxWidth

I want the "Cardcontent" composable to do fillMaxWidth inside the "Cardtest" composable taking into account the "Icon" composable

@Preview
@Composable
fun Icon () {
    Image(painter = painterResource(id = R.drawable.icon),
        contentDescription ="Icon",
        modifier = Modifier.
        size(width = 40.dp,
            height = 40.dp) )
}

@Preview
@Composable
fun Cardcontent (){
    Row (horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth())
    {
        Avatar()
        TextDesc()
    }

}

@Preview
@Composable
fun CardTest(){
    Row(Modifier
            .width(310.dp)
            .padding(start = 16.dp)
            .padding(vertical = 13.dp),
        verticalAlignment = Alignment.CenterVertically)
    { 
        Cardcontent()
        Icon() 
 }
}

CodePudding user response：

Agree with ADM opinion, you must pass the modifier as an argument of CardContent() and that's mandatory, because in order to asign a weight(1f) modifier to your CardContent component, the declaration must be within the scope of a Column or Row, because of possible reusability, you CardContent component could be used in a Box or scaffold in the future, and weight doesn't apply for this components, so imagine that having it declared inside of the CardContent as default weight and then placing it inside of those examples would be useless and give you a sintax error, so finally you must do something like this:

fun CardTest(){
   Row(
       Modifier
           .width(310.dp)
           .padding(start = 16.dp)
           .padding(vertical = 13.dp),
       verticalAlignment = Alignment.centerVertically
       )
       {
           Cardcontent(modifier = Modifier.weight(1f))
           Icon()
       }
}

CodePudding user response：

You should in CardContend insert argument wherein you hand over component Icon