텍스트를 클릭하여 이벤트를 실행하는 Text (Compose)

@Composable
fun ClickableAnnotationText(
    text: String,
    fontSize: TextUnit = TextUnit.Unspecified,
    color: Color = Color.Unspecified,
    textAlign: TextAlign = TextAlign.Unspecified,
    locale: Locale = Locale.JAPAN,
    weight: FontWeight = FontWeight.Normal,
    clickable: List<Pair<String, () -> Unit>>,
    modifier: Modifier = Modifier
) {
    val annotationString = buildAnnotatedString {
        append(text)

        clickable.forEach {
            val start = text.indexOf(it.first)
            val end = start + it.first.length

            addStyle(
                style = SpanStyle(
                    color = colorResource(id = R.color.sapphire)
                ),
                start = start,
                end = end
            )
            addStringAnnotation(
                tag = it.first,
                annotation = "",
                start = start,
                end = end
            )
        }
    }

    ClickableText(
        text = annotationString,
        style = defaultTextStyle(
            color = color,
            fontSize = fontSize,
            locale = locale,
            weight = weight,
            textAlign = textAlign
        ),
        modifier = modifier
    ) { offset ->
        clickable.forEach { pair ->
            annotationString.getStringAnnotations(
                tag = pair.first,
                start = offset,
                end = offset
            ).firstOrNull()?.let {
                pair.second()
            }
        }
    }
}

 

텍스트 전문에서 일부 텍스트를 클릭하여 이벤트 실행

 

클릭할 텍스트와 이벤트를 list로 받아서 본문에 addStyle 및 addStringAnnotation으로 추가