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

【问题标题】：Android compose text overflow weight is not workAndroid撰写文本溢出权重不起作用
【发布时间】：2022-02-04 18:58:12
【问题描述】：

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

如何正确显示右键？

【问题讨论】：

这能回答你的问题吗？ Text layout priority in Jetpack Compose

标签： android text layout android-jetpack-compose

【解决方案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")
        }
    }
}

输出：

【讨论】：

【解决方案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")
        }
    }
}

【讨论】：

【解决方案3】：

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

所以你需要： Row() 将包含这 3 个：

Image
Column
和带有两个按钮的Row

换句话说：

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

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

所以如果你只是删除你的外部Row 并移动你的Row of buttons 这样它就可以工作：

【讨论】：