Jetpack Compose(5) : component-text

directory

• Hello,Jetpack Compose!
• Jetpack Compose(2) : Layout
• Jetpack Compose Compose for the first time
• First introduction to Jetpack Compose(4) : Theme
• Jetpack Compose(5) : component-text

A, the Text

Compose’s Text function is similar to that of the TextView in XML, which is used for the most basic Text display.

1. The attribute

@Composable
fun Text(
    // text: String,
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
) {
    ...
}
Copy the code

2. Example

2.1 the sample a

@Composable
fun TextExampleMoney(value:Float){
    var str = value.toString()
    if(! str.contains("."))
        str+=00 "."
    var strSplit = str.split(".")

    val annotatedStringBuilder = AnnotatedString.Builder()
    annotatedStringBuilder.apply {
        pushStyle(
            SpanStyle(
                color = Color.Gray,
                fontSize = 16.sp,
            )
        )
        append("RMB")
        pop()
        pushStyle(
            SpanStyle(
                color = Color.DarkGray,
                fontSize = 26.sp,
                fontWeight = FontWeight.Bold
            )
        )
        append(strSplit[0])
        pop()
        pushStyle(
            SpanStyle(
                color = Color.Gray,
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold
            )
        )
        append(".${strSplit[1]}")
        pop()
    }

    Text(
        text = annotatedStringBuilder.toAnnotatedString(),
    )

}

/ / call
TextExampleMoney(98.99 f)
Copy the code

2.2 example 2

@Composable
fun TextExample(a){
    val annotatedStringBuilder = AnnotatedString.Builder()
    annotatedStringBuilder.apply {
        append("Jetpack Compose ")
        pushStyle(
            SpanStyle(
                color = Color.Blue,
                fontSize = 16.sp,
            )
        )
        append("widget")
        pop()
        append("[")
        pushStyle(
            SpanStyle(
                color = Color.Red,
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
        )
        append("Text")
        pop()
        append(" ] usage example")
    }

    Text(
        text = annotatedStringBuilder.toAnnotatedString(),
        fontSize = 16.sp,
        overflow = TextOverflow.Ellipsis,
        textAlign = TextAlign.Center
    )

}

/ / call
TextExample()
Copy the code

2.3 the sample 3

Text(
    text = "High level element that displays text and provides semantics / accessibility information.\n" +
            "\n" +
            "The default style uses the LocalTextStyle provided by the MaterialTheme / components. If you are setting your own style, you may want to consider first retrieving LocalTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override.\n" +
            "\n" +
            "For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:\n" +
            "\n" +
            "If a parameter is explicitly set here (i.e, it is notnull or TextUnit.Unspecified), then this parameter will always be used.\n" +
            "\n" +
            "If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.\n" +
            "\n" +
            "Additionally, for color, if color is not set, and style does not have a color, then LocalContentColor will be used with an alpha of LocalContentAlpha- this allows this Text or element containing this  Text to adapt to different background colors and still maintain contrast and accessibility.",
    fontSize = 16.sp,
    overflow = TextOverflow.Ellipsis,
    textAlign = TextAlign.Start,
    style = MaterialTheme.typography.Description,
    maxLines = 20,
    lineHeight = 20.sp,
    textDecoration = TextDecoration.Underline
)
Copy the code

Second, the ClickableText

For some development requirements, we need to listen for Touch events in a section of a Text. For example, please read and agree to the XXX User Agreement. We need to listen for click events in the Text in the book name and jump to it.

@Composable
fun ClickableText(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    softWrap: Boolean = true,
    overflow: TextOverflow = TextOverflow.Clip,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) - >Unit = {},
    // Click event listener. The argument is the position of the clicked character in the text when the event is triggered
    onClick: (Int) - >Unit
){... }Copy the code

ClickableText differs from Text in that it provides an onClick callback that returns the position of the character in the Text we clicked with our finger when we clicked the Text. Such as:

ClickableText(
    text = annotatedStringBuilder.toAnnotatedString(),
    overflow = TextOverflow.Ellipsis
){
    Log.d("ClickableText"."$it -> character is clicked.")}Copy the code

LongClickableText: text long press events are expected in the future, but not currently supported.

Three, the last

A good memory is better than a bad pen. Jetpack Compose series is my own study notes for the first time, which can not only deepen the knowledge consolidation, but also exercise my writing skills. The content in this article is for reference only, if you have any questions, please leave a comment.

Reference 1.

• Android developers