如下图所示:
Compose Text 效果图
实现原理:
以下实现主要是使用Text控件的onLayout事件,得到文字占用行数,以及每行的信息,然后根据这些信息来绘制线条
相关代码:
@Compose
fun UnderlinedText(){
val lineInfos= remember { mutableStateListOf<Float>() }
Text(
text = "这个文本\nfafasdf\nfafsdf\nqwrqwr\nqwrqwr\nqrqwr\n",
modifier = Modifier
.fillMaxWidth()
.drawBehind {
for (info in lineInfos) {
drawLine(
Color.Red,
Offset(0, info),
Offset(it.size.width, info)
)
}
},
onTextLayout = {
textLineInfoList.clear()
for (line in 0 until it.lineCount - 1) {
lineInfos.add(it.getLineBottom(line))
}
},
style = TextStyle(
colorResource(R.color.red),
lineHeight = 1.0.em,
letterSpacing = 0.10.em
)
)
}
- 原创实现,如需转载请标明出处,感谢!
网友评论