{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

ClickableTextKt

public final class ClickableTextKt


Summary

Public methods

static final void
@Composable
ClickableText(
    @NonNull AnnotatedString text,
    @NonNull Modifier modifier,
    @NonNull TextStyle style,
    boolean softWrap,
    @NonNull TextOverflow overflow,
    int maxLines,
    @NonNull Function1<@NonNull TextLayoutResultUnit> onTextLayout,
    @NonNull Function1<@NonNull IntegerUnit> onClick
)

A continent version of BasicText component to be able to handle click event on the text.

static final void
@ExperimentalFoundationApi
@Composable
ClickableText(
    @NonNull AnnotatedString text,
    @NonNull Function1<IntegerUnit> onHover,
    @NonNull Modifier modifier,
    @NonNull TextStyle style,
    boolean softWrap,
    @NonNull TextOverflow overflow,
    int maxLines,
    @NonNull Function1<@NonNull TextLayoutResultUnit> onTextLayout,
    @NonNull Function1<@NonNull IntegerUnit> onClick
)

A continent version of BasicText component to be able to handle click event on the text.

Public methods

ClickableText

@Composable
public static final void ClickableText(
    @NonNull AnnotatedString text,
    @NonNull Modifier modifier,
    @NonNull TextStyle style,
    boolean softWrap,
    @NonNull TextOverflow overflow,
    int maxLines,
    @NonNull Function1<@NonNull TextLayoutResultUnit> onTextLayout,
    @NonNull Function1<@NonNull IntegerUnit> onClick
)

A continent version of BasicText component to be able to handle click event on the text.

This is a shorthand of BasicText with pointerInput to be able to handle click event easily.

import androidx.compose.foundation.text.ClickableText
import androidx.compose.material.Text
import androidx.compose.ui.text.AnnotatedString

ClickableText(
    text = AnnotatedString("Click Me"),
    onClick = { offset ->
        Log.d("ClickableText", "$offset -th character is clicked.")
    }
)

For other gestures, e.g. long press, dragging, follow sample code.

import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.text.TextLayoutResult

val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
val gesture = Modifier.pointerInput(onLongClick) {
    detectTapGestures(
        onLongPress = { pos ->
            layoutResult.value?.let { layout ->
                onLongClick(layout.getOffsetForPosition(pos))
            }
        }
    )
}

Text(
    text = text,
    modifier = modifier.then(gesture),
    style = style,
    softWrap = softWrap,
    overflow = overflow,
    maxLines = maxLines,
    onTextLayout = {
        onTextLayout(it)
        layoutResult.value = it
    }
)
Parameters
@NonNull AnnotatedString text

The text to be displayed.

@NonNull Modifier modifier

Modifier to apply to this layout node.

@NonNull TextStyle style

Style configuration for the text such as color, font, line height etc.

boolean softWrap

Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.

@NonNull TextOverflow overflow

How visual overflow should be handled.

int maxLines

An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.

@NonNull Function1<@NonNull TextLayoutResultUnit> onTextLayout

Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.

@NonNull Function1<@NonNull IntegerUnit> onClick

Callback that is executed when users click the text. This callback is called with clicked character's offset.

ClickableText

@ExperimentalFoundationApi
@Composable
public static final void ClickableText(
    @NonNull AnnotatedString text,
    @NonNull Function1<IntegerUnit> onHover,
    @NonNull Modifier modifier,
    @NonNull TextStyle style,
    boolean softWrap,
    @NonNull TextOverflow overflow,
    int maxLines,
    @NonNull Function1<@NonNull TextLayoutResultUnit> onTextLayout,
    @NonNull Function1<@NonNull IntegerUnit> onClick
)

A continent version of BasicText component to be able to handle click event on the text.

This is a shorthand of BasicText with pointerInput to be able to handle click event easily.

import androidx.compose.foundation.text.ClickableText
import androidx.compose.material.Text
import androidx.compose.ui.text.AnnotatedString

ClickableText(
    text = AnnotatedString("Click Me"),
    onClick = { offset ->
        Log.d("ClickableText", "$offset -th character is clicked.")
    }
)

For other gestures, e.g. long press, dragging, follow sample code.

import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.text.TextLayoutResult

val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
val gesture = Modifier.pointerInput(onLongClick) {
    detectTapGestures(
        onLongPress = { pos ->
            layoutResult.value?.let { layout ->
                onLongClick(layout.getOffsetForPosition(pos))
            }
        }
    )
}

Text(
    text = text,
    modifier = modifier.then(gesture),
    style = style,
    softWrap = softWrap,
    overflow = overflow,
    maxLines = maxLines,
    onTextLayout = {
        onTextLayout(it)
        layoutResult.value = it
    }
)
Parameters
@NonNull AnnotatedString text

The text to be displayed.

@NonNull Function1<IntegerUnit> onHover

Callback that is executed when user hovers over the text with a mouse or trackpad. This callback is called with the hovered character's offset or null if the cursor is no longer hovering this.

@NonNull Modifier modifier

Modifier to apply to this layout node.

@NonNull TextStyle style

Style configuration for the text such as color, font, line height etc.

boolean softWrap

Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.

@NonNull TextOverflow overflow

How visual overflow should be handled.

int maxLines

An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.

@NonNull Function1<@NonNull TextLayoutResultUnit> onTextLayout

Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.

@NonNull Function1<@NonNull IntegerUnit> onClick

Callback that is executed when users click the text. This callback is called with clicked character's offset.