Jetpack TextOverflow.Ellipsis不指定maxLines就不能工作

Question

我想在一个带有一些内部填充的Text内部显示一个Card，有时文本会不合适。我想用省略号标记这个东西。但是，没有maxLines，我就无法让它运转起来。

@Composable
fun CardWithText() {
    Card(
        modifier = Modifier
            .height(60.dp)
            .width(100.dp)
            .border(1.dp, Color.Black, RoundedCornerShape(0))
    ) {
        Card(
            modifier = Modifier
                .padding(8.dp)
                .fillMaxSize()
                .border(1.dp, Color.Black, RoundedCornerShape(0))
        ) {
            Text(
                text = "One two three four five six seven eight nine ten eleven twelve",
                maxLines = 2,
                overflow = TextOverflow.Ellipsis,
                color = Color.Black
            )
        }
    }
}

用maxLines = 2

​

​

使用maxLines = 3或根本不使用maxLines

​

​

Answer 1

这是一个已知问题，导致Ellipsis忽略父级大小约束。明星它可以带来更多的关注，并跟踪更新。

同时，您可以使用这个hacky解决方案:它将计算实际行数，并为maxLines传递正确的值

@Composable
fun TextEllipsisFixed(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit,
    style: TextStyle = LocalTextStyle.current,
) {
    SubcomposeLayout(modifier = modifier) { constraints ->
        var slotId = 0
        fun placeText(
            text: String,
            onTextLayout: (TextLayoutResult) -> Unit,
            constraints: Constraints,
            maxLines: Int,
        ) = subcompose(slotId++) {
            Text(
                text = text,
                color = color,
                fontSize = fontSize,
                fontStyle = fontStyle,
                fontWeight = fontWeight,
                fontFamily = fontFamily,
                letterSpacing = letterSpacing,
                textDecoration = textDecoration,
                textAlign = textAlign,
                lineHeight = lineHeight,
                softWrap = softWrap,
                onTextLayout = onTextLayout,
                style = style,
                overflow = TextOverflow.Ellipsis,
                maxLines = maxLines,
            )
        }[0].measure(constraints)
        var textLayoutResult: TextLayoutResult? = null
        val initialPlaceable = placeText(
            text = text,
            constraints = constraints,
            onTextLayout = {
                textLayoutResult = it
            },
            maxLines = maxLines,
        )
        val finalPlaceable = textLayoutResult?.let { layoutResult ->
            if (!layoutResult.didOverflowHeight) return@let initialPlaceable
            val lastVisibleLine = (0 until layoutResult.lineCount)
                .last {
                    layoutResult.getLineBottom(it) <= layoutResult.size.height
            }
            placeText(
                text = text,
                constraints = constraints,
                onTextLayout = onTextLayout,
                maxLines = lastVisibleLine + 1,
            )
        } ?: initialPlaceable

        layout(
            width = finalPlaceable.width,
            height = finalPlaceable.height
        ) {
            finalPlaceable.place(0, 0)
        }
    }
}

用法：

Card(
    modifier = Modifier
        .height(60.dp)
        .width(100.dp)
        .border(1.dp, Color.Black, RoundedCornerShape(0))
) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxSize()
            .border(1.dp, Color.Black, RoundedCornerShape(0))
    ) {
        TextEllipsisFixed(
            text = "One two three four five six seven eight nine ten eleven twelve",
            color = Color.Black
        )
    }
}

结果：

​

​