0
209
ViewsCómo dibujar un borde alrededor del texto de varias líneas en Redactar
Quiero dibujar un borde alrededor de un Text como este,
Text("Box around text", modifier = Modifier .padding(top = 8.dp) .border(width = 2.dp, color = Color.Red) .background(Color.DarkGray)) Text("Box around text with a very very very very longlonglonglongword", modifier = Modifier .padding(top = 8.dp) .border(width = 2.dp, color = Color.Red) .background(Color.DarkGray) ) Pero en el caso de un texto de varias líneas, no se ve bien.
Hay un espacio a la derecha entre el borde y el texto.
Entonces, ¿cómo dibujar un borde alrededor de un texto de varias líneas, de modo que se ajuste al ancho del texto?
1 answers
Answer question0
No estoy seguro de si esto es un error o un comportamiento esperado. Para el primer caso en el que he creado este problema , veremos qué piensan los mantenedores.
Así es como puede restringirlo manualmente:
var textWidth by remember { mutableStateOf<Int?>(null) } Text( "Box around text with a very very very very longlonglonglongword", color = Color.White, onTextLayout = { layoutResult -> textWidth = (0 until layoutResult.lineCount) .maxOf { ceil(layoutResult.getLineRight(it)).toInt() } }, modifier = Modifier .border(width = 2.dp, color = Color.Red) .width(with(LocalDensity.current) { textWidth?.toDp() ?: Dp.Unspecified }) .drawWithContent { // prevent full with text from being drawn if (textWidth != null) { drawContent() } } .background(Color.DarkGray) )Resultado:
La desventaja de la primera solución es que se necesita un marco para calcular el ancho. Ocultamos el texto en sí, pero si hay otra vista en el lado derecho, puede aparecer en una posición incorrecta al principio. La solución a continuación es más engorrosa, pero hace todo el trabajo durante una recomposición para evitar ese problema.
SubcomposeLayout { constraints -> val composable = @Composable { onTextLayout: (TextLayoutResult) -> Unit -> Text( "Box around text with a very very very very longlonglonglongword", color = Color.White, onTextLayout = onTextLayout, modifier = Modifier .border(width = 2.dp, color = Color.Red) .background(Color.DarkGray) ) } var textWidth: Int? = null subcompose("measureView") { composable { layoutResult -> textWidth = (0 until layoutResult.lineCount) .maxOf { ceil(layoutResult.getLineRight(it)).toInt() } } }[0].measure(constraints) val placeable = subcompose("content") { composable { } }[0].measure(constraints.copy(maxWidth = textWidth!!)) layout(width = textWidth!!, height = placeable.height) { placeable.place(0, 0) } }