Question

所以我一直在为以下问题苦苦挣扎一段时间。我做到了（约翰的例子）：

但我想要做的是强制小时总是直接显示在文本之后，如果文本太长 - 溢出文本。所以 Jane Doe 的例子是完美的，和 Jack Doe 的一样（但在 Jack 的例子中那都是一个虚拟文本）。

我真的不知道我做错了什么。

这是我写的一段代码：

Row(modifier = Modifier
  .fillMaxWidth()
  .padding(horizontal = 10.dp, vertical = 7.dp),
  verticalAlignment = Alignment.CenterVertically
) {
  Column {
    Row(
      verticalAlignment = Alignment.CenterVertically,
      horizontalArrangement = Arrangement.SpaceBetween
    ) {
      // there's another Row printing the name
    }
    Spacer(Modifier.height(5.dp))
    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Start) {
      Row(modifier = Modifier.wrapContentWidth(), horizontalArrangement = Arrangement.Start) {
        Text(
          text = item.message,
          style = MaterialTheme.typography.subtitle1,
          maxLines = 1,
          overflow = TextOverflow.Ellipsis
        )
      }
      Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Start) {
        Circle() // that's my function which just shows the circle
        Text(
          text = dateString,
          style = MaterialTheme.typography.subtitle1,
          maxLines = 1,
          modifier = Modifier.padding(horizontal = 4.dp)
        )
      }
    }
  }
}

我将非常感谢您的任何帮助。

Answer 1

您可以通过 Layout 和使用 IntrinsicWidth 来实现这一点。您可以在此示例的基础上再接再厉，因为它只为孩子使用了 2 个 Text，但这应该会让您走上正确的道路。

@Composable
fun MyRow(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Layout(
        content = content,
        modifier = modifier,
    ) { measurables, constraints ->
        check(measurables.size == 2) { "This composable requires 2 children" }
        val first = measurables.first()
        val second = measurables[1]

        val looseConstraints = constraints.copy(
            minWidth = 0,
            minHeight = 0,
        )
        val secondMeasurable = second.measure(looseConstraints)
        val maxHeight = secondMeasurable.height
        val availableWidth = constraints.maxWidth - secondMeasurable.width
        val maxWidth = first.maxIntrinsicWidth(maxHeight).coerceAtMost(availableWidth)
        val firstMeasurable = first.measure(
            Constraints(
                minWidth = maxWidth,
                maxWidth = maxWidth,
                minHeight = 0,
                maxHeight = maxHeight
            )
        )
        layout(
            constraints.maxWidth,
            maxHeight,
        ) {
            firstMeasurable.place(0, 0)
            secondMeasurable.place(maxWidth, 0)
        }
    }
}

@Composable
@Preview
fun MyRowPreview() {
    SampleTheme {
        Surface(modifier = Modifier.width(320.dp)) {
            Column(modifier = Modifier.fillMaxWidth()) {
                Text(
                    text = "John Doe",
                    style = MaterialTheme.typography.h5,
                )
                MyRow(modifier = Modifier.fillMaxWidth()) {
                    Text(
                        text = "Short Label",
                        style = MaterialTheme.typography.body1,
                        modifier = Modifier.padding(end = 8.dp),
                        overflow = TextOverflow.Ellipsis,
                        maxLines = 1,
                    )
                    Text(
                        text = "8:35 PM",
                        style = MaterialTheme.typography.body1,
                        modifier = Modifier.padding(start = 8.dp),
                    )
                }
                Spacer(modifier = Modifier.height(16.dp))
                Text(
                    text = "John Doe",
                    style = MaterialTheme.typography.h5,
                )
                MyRow(modifier = Modifier.fillMaxWidth()) {
                    Text(
                        text = "A long label that will require truncation goes here",
                        style = MaterialTheme.typography.body1,
                        modifier = Modifier.padding(end = 8.dp),
                        overflow = TextOverflow.Ellipsis,
                        maxLines = 1,
                    )
                    Text(
                        text = "8:35 PM",
                        style = MaterialTheme.typography.body1,
                        modifier = Modifier.padding(start = 8.dp),
                    )
                }
            }
        }
    }
}

Answer 2

类似的东西？

@Preview(showBackground = true)
@Composable
fun Test() {
    Column {
        Message(message = "short message")
        Message(message = "short")
        Message(message = "very long message")
    }
}

@Composable
fun Message(message: String) {
    Text("John Doe")
    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Text(
            message,
            modifier = Modifier.weight(1F, fill = false),
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
        )
        Text("8:35PM")
    }
}

有没有办法强制显示 Jetpack Compose 文本？

2 个答案: