RI am developing an Android app using jetpack compose.

Here is a very basic UI component:

I want to add a button on the right side.

But if the name is very long, the button is gone.

My code is here:

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = rememberImagePainter(data = profileImg),
            contentDescription = null,
            modifier = Modifier
                .size(56.dp)
                .clip(CircleShape)
        )

        Column(
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.weight(1F) // I set the weight in here but it doesn't work.
        ) {
            Text(
                text = "very very very very very very very long name",
                fontWeight = FontWeight.Bold,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
            Text(
                text = "3 minutes ago",
            )
        }
    }

    Row {
        Button()
        Button()
    }
}

How can I show the right button correctly?

CodePudding user response：

You need to actually provide that weight to Row containing your Text & make sure you don't cover the entire width. e.g don't do just 1f.

You can do something like this; (This is done with compose_version = '1.0.1')

@Composable
fun Item() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.weight(0.7f)
        ) {
            Image(
                painter = painterResource(R.drawable.ic_launcher_background),
                contentDescription = null,
                modifier = Modifier
                    .size(56.dp)
                    .clip(CircleShape)
            )

            Column(
                verticalArrangement = Arrangement.Center,
            ) {
                Text(
                    text = "very very very very very very very long name",
                    fontWeight = FontWeight.Bold,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
                Text(
                    text = "3 minutes ago",
                )
            }
        }

        Button(
            onClick = {}, modifier = Modifier
                .wrapContentWidth()
                .weight(0.3f)
        ) {
            Text(text = "Button")
        }
    }
}

Output:

CodePudding user response：

Here is a working code (I've removed useless Row, it's simpler that way)

@Composable
fun Test() {
    Row(
        modifier = Modifier.fillMaxWidth,
        horizontalArrangement = Arrangement.spacedBy(5.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = rememberImagePainter(data = profileImg),
            contentDescription = null,
            modifier = Modifier
                .size(56.dp)
                .clip(CircleShape)
        )

        Column(
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.weight(1f) // I set the weight in here but it doesn't work.
        ) {
            Text(
                text = "very very very very very very very long name",
                fontWeight = FontWeight.Bold,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
            Text(
                text = "3 minutes ago",
            )
        }

        Button(onClick = { }) {
            Text(text = "Btn1")
        }
        Button(onClick = { }) {
            Text(text = "Btn2")
        }
    }
}

CodePudding user response：

Even though the other question are right I am going to explain your mistake, to better understand what is going on.

So you need: A Row() which will contain those 3:

1. Image
2. Column
3. and a Row with the two buttons

In other words something like:

Row() {
   Image()
   Column(weight:1f)
   Row()
}

Your mistake is that you created a Row with two other Rows without weights and you get this weird output.

So if you simply delete your outer Row and move your Row of buttons like so it will work: