Android 撰写文本溢出权重不起作用

Question

RI 正在使用 Jetpack Compose 开发 Android 应用程序。

这是一个非常基本的 UI 组件：

我想在右侧添加一个按钮。

但是如果名字很长，按钮就没有了。

我的代码在这里：

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()
    }
}

如何正确显示右键？

Answer 1

您实际上需要向包含您的 Text 的 Row 提供该重量，并确保您没有覆盖整个宽度。例如不要只做 1f.

你可以这样做；（这是用 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")
        }
    }
}

输出：

Answer 2

这是一个工作代码（我删除了无用的行，这样更简单）

@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")
        }
    }
}

Answer 3

即使另一个问题是正确的，我也会解释你的错误，以便更好地理解发生了什么。

所以你需要：一个 Row() 将包含那些 3:

Image
Column
和带有两个按钮的 Row

换句话说：

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

你的错误是你创建了一个 Row 和另外两个 Rows 没有权重，你得到了这个奇怪的输出。

所以如果你简单地删除你的外部 Row 并像这样移动你的 Row of buttons 它将起作用：

Android 撰写文本溢出权重不起作用

Android compose text overflow weight is not work

layout

android

text

android-jetpack-compose