I made a text and checkbox that writes the contract agreement for users, but there are two contracts in one text and they need to be underlined and the user should be able to click on these underlined texts. I wrote a code like this
Screen
Scaffold(
topBar = {
BackPopUp(
navController = navHostController,
route = RegisterScreen.SignUpHealthyLifeStyleGoalsScreen.route
)
},
backgroundColor = Color.Transparent
) {
Column(
modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.SpaceBetween,
horizontalAlignment = Alignment.CenterHorizontally
) {
Column(
modifier = Modifier
.weight(1f, false)
.verticalScroll(rememberScrollState())
) {
CheckedBox(
modifier = Modifier,
fontSize = 14.sp,
underlineText1 = "Çerez politikası'nı",
staticText1 = " ve",
underlineText2 = " kişisel verilerin korunması kanunu'nu ",
staticText2 = "okudum ve anladım",
clickableText = {
}
)
CheckedBox(
modifier = Modifier,
fontSize = 14.sp,
underlineText1 = "Kullanıcı sözleşmesi'ni ",
staticText1 = " ve gizlilik politikasını okudum, anladım ve kabul ediyorum",
underlineText2 = null,
staticText2 = null,
clickableText = {
}
)
}
}
}
}
CheckedBox
@Composable
fun CheckedBox(
modifier: Modifier,
underlineText1: String,
fontSize: TextUnit,
staticText1: String,
underlineText2: String?,
staticText2: String?,
clickableText: () -> Unit
) {
val isCheck = remember { mutableStateOf(false) }
val color = if (isSystemInDarkTheme()) Color(0xFF1A1818) else Color.White
val annotatedText = buildAnnotatedString {
withStyle(
style = SpanStyle(
textDecoration = TextDecoration.Underline,
fontSize = fontSize
)
) {
append(underlineText1)
}
withStyle(
style = SpanStyle(
fontSize = fontSize
)
) {
append(staticText1)
}
if (underlineText2 != null && staticText2 != null) {
withStyle(
style = SpanStyle(
textDecoration = TextDecoration.Underline,
fontSize = fontSize
)
) {
append(underlineText2)
}
withStyle(
style = SpanStyle(
fontSize = fontSize
)
) {
append(staticText2)
}
}
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
start = 15.dp,
end = 15.dp,
top = 10.dp,
bottom = 10.dp
)
) {
Card(
elevation = 0.dp,
shape = RoundedCornerShape(6.dp),
border = BorderStroke(2.dp, color = MaterialTheme.colors.grayColor)
) {
Box(
modifier = Modifier
.size(25.dp)
.weight(1f)
.background(if (isCheck.value) DYTGreenColor else color)
.clickable {
isCheck.value = !isCheck.value
},
contentAlignment = Alignment.TopStart
) {
if (isCheck.value)
Icon(Icons.Default.Check, contentDescription = "", tint = Color.White)
}
}
Text(
modifier = Modifier
.padding(start = 10.dp)
.clickable {
clickableText()
},
text = annotatedText
)
}
}
When I do it this way, all text can be clicked normally.
what I want to do :
As you can see, all the text is not underlined, only the contracts are underlined and the user should be able to click on these contracts so that I can contact the service and show the relevant contract on the screen.
