Jetpack Compose 入门：Text & ClickableText

hefengbao 发布于 2023.06.25 ，最后更新于 2023.10.17

compose 版本：https://developer.android.google.cn/jetpack/androidx/releases/compose?hl=zh-cn

implementation platform('androidx.compose:compose-bom:2023.05.00')

Text 是 androidx.compose.material3.Text 中的控件，用来显示文本内容，ClickableText 用于显示文本内容中部分内容需要添加点击事件。

@Composable
fun TextScreen(
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current

    Column(
        modifier = modifier.background(Color.White),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(text = "Hello World")
        Text(
            text = "Hello World",
            modifier = modifier.fillMaxWidth(),
            textAlign = TextAlign.Center
        )
        Text(
            text = "Hello World",
            color = Color.Blue,
            fontStyle = FontStyle.Italic,
            fontFamily = FontFamily.Cursive,
            fontWeight = FontWeight.ExtraBold,
            fontSize = 32.sp
        )
        Text(
            text = "可以点击的 Text",
            modifier = modifier.clickable {
                Toast.makeText(context,"点击了",Toast.LENGTH_SHORT).show()
            }
        )
        Text(
            text = "庙里有个老和尚和一个小和尚。有一天老和尚对小和尚说:“从前有座山.山里有座庙，庙里有个老和尚和一个小和尚，有一天老和尚对小和尚说：“从前有座山.山里有座庙，庙里有个老和尚和一个小和尚......““。",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Text(text = AnnotatedString("Hello World", spanStyle = SpanStyle(color = Color.Cyan)))
        ClickableTextSample(modifier = modifier)
    }
}

@Composable
fun ClickableTextSample(
    modifier: Modifier
) {
    val tag = "ClickableText"
    val text = buildAnnotatedString {
        append("请阅读并同意")
        pushStringAnnotation(tag = tag, annotation = "https://www.baidu.com")
        withStyle(style = SpanStyle(color = Color.Blue)){
            append("《服务条款》")
        }
        pop()
        append("和")
        pushStringAnnotation(tag,"https://www.bing.com")
        withStyle(style = SpanStyle(color = Color.Blue)){
            append("《隐私条款》")
        }
        pop()
    }

    val uriHandler = LocalUriHandler.current

    ClickableText(text = text, onClick = {index ->
        text.getStringAnnotations(tag, index, index).map {
            uriHandler.openUri(it.item)
        }
    })
}

@Preview
@Composable
private fun TextScreenPreview() {
    TextScreen()
}