乐趣区

关于jetpack:Jetpack-Compose系列Text组件花式使用

对于用户界面而言,文本是最根底而又外围的内容,在传统的 Android Native 开发中,须要用一个 TextView 来显示一个文本。在 Jetpack Compose 中,提供了 Text 可组合函数(即组件,前面的文章都会称其为“组件”),可更轻松的显示文本。在本文中,将带大家一起摸索 Text 组件的各种用法。

Text 属性介绍

在 Jetpack Compose 中,组件是一个非凡的 Kotlin 函数,因而 Text 其实也是一个函数,而它提供了很多参数来配置文本的显示外观。这些参数就是组件的属性。看一下 Text 组件有哪些属性:

@Composable
fun Text(
    // 显示的文本字符串 
    text: String,
    // 修改器,能够配置文本的大小及显示外观
    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,
    // 计算布局时的回调
    onTextLayout: (TextLayoutResult) -> Unit = {},
    // 款式
    style: TextStyle = LocalTextStyle.current
) {...}

Jetpack Compose 中,很多中央都用到了 Kotlin 的个性,比方这里,就用到 Kotlin 的默认参数,Text 组件除了第一个参数text,其余都有默认值,也就是应用的时候能够不传,然而如果传多个参数时,肯定要加参数名。比方,设置大小:

@Composable
fun MyText(){
    Text("Jetpack Compose,by 仍然范特稀西", 
        fontSize = 20.sp
    )
}

第一个参数能够加参数名,也能够不加,但我集体还是举荐加上,因为他是一个组件,参数是它的属性,这样代码比拟直观。像上面这样就比拟好一点:

@Composable
fun MyText(){
    Text(
        text = "Jetpack Compose,by 仍然范特稀西",
        fontSize = 20.sp
    )
}

晓得了,每个属性的意思,咱们接下来一起看看,配置各属性后的成果展现。

Text 各属性示例成果

text 显示文本

Jetpack Compose 系列 -Text 组件花式应用!

对于用户界面而言,文本是最根底而又外围的内容,在传统的 Android Native 开发中,须要用一个 TextView 来显示一个文本。在 Jetpack Compose 中,提供了 Text 可组合函数(即组件,前面的文章都会称其为“组件”),可更轻松的显示文本。在本文中,将带大家一起摸索 Text 组件的各种用法。

Text 属性介绍

在 Jetpack Compose 中,组件是一个非凡的 Kotlin 函数,因而 Text 其实也是一个函数,而它提供了很多参数来配置文本的显示外观。这些参数就是组件的属性。看一下 Text 组件有哪些属性:

@Composable
fun Text(
    // 显示的文本字符串 
    text: String,
    // 修改器,能够配置文本的大小及显示外观
    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,
    // 计算布局时的回调
    onTextLayout: (TextLayoutResult) -> Unit = {},
    // 款式
    style: TextStyle = LocalTextStyle.current
) {...}

Jetpack Compose 中,很多中央都用到了 Kotlin 的个性,比方这里,就用到 Kotlin 的默认参数,Text 组件除了第一个参数text,其余都有默认值,也就是应用的时候能够不传,然而如果传多个参数时,肯定要加参数名。比方,设置大小:

@Composable
fun MyText(){
    Text("Jetpack Compose,by 仍然范特稀西", 
        fontSize = 20.sp
    )
}

第一个参数能够加参数名,也能够不加,但我集体还是举荐加上,因为他是一个组件,参数是它的属性,这样代码比拟直观。像上面这样就比拟好一点:

@Composable
fun MyText(){
    Text(
        text = "Jetpack Compose,by 仍然范特稀西",
        fontSize = 20.sp
    )
}

晓得了,每个属性的意思,咱们接下来一起看看,配置各属性后的成果展现。

Text 各属性示例成果

text 显示文本

显示文字的最简略的办法是应用以 String 作为参数的 Text 组件:

@Composable
fun MyText(){Text("Jetpack Compose,by 仍然范特稀西")
}

也能够显示字符串资源,这也是举荐的形式,而不是间接将字符串写死在代码中,这样有利于替换或者国际化。

<!-- xml 资源文件 -->
<resources>
    <string name="my_text">Jetpack Compose,by 仍然范特稀西 </string>
</resources>

@Composable
fun MyText(){Text(stringResource(R.string.my_text))
}

color 更改文字色彩
@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text),
        color = Color.Blue
    )
}

fontSize 更改文字大小
@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text),
        color = Color.Blue,
        fontSize = 30.sp,
    )
}

fontStyle 设置文字款式

fontStyle有 2 个取值,FontStyle.ItalicFontStyle.Normal

@Composable
fun MyText() {
    Column{
        Text(text = stringResource(R.string.my_text),
            fontStyle = FontStyle.Normal,
        )
        Text(text = stringResource(R.string.my_text),
            fontStyle = FontStyle.Italic,
        )
    }
}

fontWeight 更改文字的粗细水平

fontWeight 能够取 1- 1000 之间的值,应用的时候,结构一个 FontWeight 即可:

FontWeight(50)

FontWeight 默认为咱们定义几个默认值,100-900 的整百值,并依据他们的显示成果取名为 Bold,Light,Thin 等等。

companion object {/** [Thin] */
        @Stable
        val W100 = FontWeight(100)
        /** [ExtraLight] */
        @Stable
        val W200 = FontWeight(200)
        /** [Light] */
        @Stable
        val W300 = FontWeight(300)
        /** [Normal] / regular / plain */
        @Stable
        val W400 = FontWeight(400)
        /** [Medium] */
        @Stable
        val W500 = FontWeight(500)
        /** [SemiBold] */
        @Stable
        val W600 = FontWeight(600)
        /** [Bold] */
        @Stable
        val W700 = FontWeight(700)
        /** [ExtraBold] */
        @Stable
        val W800 = FontWeight(800)
        /** [Black] */
        @Stable
        val W900 = FontWeight(900)

        /** Alias for [W100] */
        @Stable
        val Thin = W100
        /** Alias for [W200] */
        @Stable
        val ExtraLight = W200
        /** Alias for [W300] */
        @Stable
        val Light = W300
        /** The default font weight - alias for [W400] */
        @Stable
        val Normal = W400
        /** Alias for [W500] */
        @Stable
        val Medium = W500
        /** Alias for [W600] */
        @Stable
        val SemiBold = W600
        /**
         * A commonly used font weight that is heavier than normal - alias for [W700]
         */
        @Stable
        val Bold = W700
        /** Alias for [W800] */
        @Stable
        val ExtraBold = W800
        /** Alias for [W900] */
        @Stable
        val Black = W900

        /** A list of all the font weights. */
        internal val values: List<FontWeight> = listOf(
            W100,
            W200,
            W300,
            W400,
            W500,
            W600,
            W700,
            W800,
            W900
        )

看一下他们的显示成果:

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Thin,
        )
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.ExtraLight
        )
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Light
        )
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Normal
        )
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Medium
        )
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.SemiBold
        )
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Bold
        )
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.ExtraBold
        )
        Text(text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Black
        )
    }
}

fontFamily 更改字体

fontFamily能够更改字体,FontFamily 为咱们默认内置了 5 种字体,DefaultSansSerifSerifMonospaceCursive

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text),
            fontFamily = FontFamily.Default,
        )
        Text(text = stringResource(R.string.my_text),
            fontFamily = FontFamily.SansSerif
        )
        Text(text = stringResource(R.string.my_text),
            fontFamily = FontFamily.Serif
        )
        Text(text = stringResource(R.string.my_text),
            fontFamily = FontFamily.Monospace
        )
        Text(text = stringResource(R.string.my_text),
            fontFamily = FontFamily.Cursive
        )
    }
}

letterSpacing 更改文字间距

letterSpacing更改文字间距,更确切的说是更改字符间距,因为如果是英文的话,不会按单词来设置间距,而是按字母。

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text),
        letterSpacing = 10.sp,
    )
}

textDecoration 文字装璜器

textDecoration能够给文字装璜下划线和中划线。默认提供了三个值:

  • None: 无装璜成果
  • LineThrough: 增加中划线
  • Underline: 增加下划线
@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text),
            textDecoration = TextDecoration.None,
        )
        Text(text = stringResource(R.string.my_text),
            textDecoration = TextDecoration.LineThrough,
        )
        Text(text = stringResource(R.string.my_text),
            textDecoration = TextDecoration.Underline,
        )
    }
}

除此之外,TextDecoration还提供了一个 combine 函数,能够将下划线和中划线组合:

@Composable
fun MyText() {val combineDecoration = listOf(TextDecoration.Underline, TextDecoration.LineThrough)
    Text(text = stringResource(R.string.my_text),
        textDecoration = TextDecoration.combine(combineDecoration)
    )
}

textAlign 设置文字对齐方向

 textAlign 能够设置 Text 组件内容的对齐形式,有 TextAlign.StartTextAlign. End TextAlign. Center TextAlign. Justify 等值。默认状况下,Text 会依据其内容值抉择天然的文字对齐形式:

  • 对于从左到右书写的文字,如拉丁语、西里尔文或朝鲜文,向 Text 容器的左边缘对齐
  • 对于从右到左书写的文字,如阿拉伯语或希伯来语,向 Text 容器的右边缘对齐

如果您想手动设置 Text 组件的文字对齐形式,最好别离应用 TextAlign.StartTextAlign.End(而不要应用 TextAlign.LeftTextAlign.Right),这样零碎就能够依据具体语言的首选文字方向,将您的设置解析为向 Text 的右边缘对齐。例如,TextAlign.End 对于法语文字将向右侧对齐,而对于阿拉伯语文字则将向左侧对齐,但无论对于哪种文字,TextAlign.Right 都将向右侧对齐。

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text),
            modifier = Modifier
                .size(300.dp, 50.dp)
                .background(Color.Gray),
            textAlign = TextAlign.Start
        )
        Text(text = stringResource(R.string.my_text),
            modifier = Modifier
                .size(300.dp, 50.dp)
                .background(Color.Gray),
            textAlign = TextAlign.End
        )
        Text(text = stringResource(R.string.my_text),
            modifier = Modifier
                .size(300.dp, 50.dp)
                .background(Color.Gray),
            textAlign = TextAlign.Center
        )
        Text(text = stringResource(R.string.my_text),
            modifier = Modifier
                .size(300.dp, 50.dp)
                .background(Color.Gray),
            textAlign = TextAlign.Justify
        )
    }
}

留神:要对齐形式失效,须要给 Text 设置大小,因为 Text 组件默认的大小是包裹内容的,下面的代码咱们用 modifier属性设置了 Text 组件的大小。

lineHeight 设置行高

lineHeight设置行高,值为一个具体数值,单位为sp

@Composable
fun MyText() {
    Column {
        Text(text = "未设置 lineHeight".repeat(10),
        )
        Text(text = "曾经设置 lineHeight".repeat(10),
            lineHeight = 30.sp
        )

    }
}

overflow 设置文本溢出成果

overflow设置当文本超出控件时的显示款式,有两个取值:

  • TextOverflow.Clip: 超出局部间接截断
  • TextOverflow.Ellipsis: 应用省略号示意文本已溢出

overflow个别配合 maxLines 应用

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text).repeat(10),
            overflow = TextOverflow.Clip,
            maxLines = 2
        )
        Spacer(modifier = Modifier.height(20.dp))
        Text(text = stringResource(R.string.my_text).repeat(10),
            overflow = TextOverflow.Ellipsis,
            maxLines = 2
        )

    }
}

maxLines 设置最多显示行数

maxLines配置最多显示几行,该属性个别须要配置overflow,表明超出局部该如何显示,默认间接截断(Clip 成果)。

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text).repeat(10),
        )
        Spacer(modifier = Modifier.height(20.dp))
        Text(text = stringResource(R.string.my_text).repeat(10),
            maxLines = 2,
        )

    }
}

softWrap 是否主动换行

默认为 true,即会主动换行,如果设置为false,将不会主动换行。个别应用场景为: 文本单行显示,超出默认截断或显示省略号 ,即配合overflow 应用:

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text).repeat(10),
        softWrap = false,
        overflow = TextOverflow.Ellipsis
    )
}

onTextLayout 计算新的布局时回调函数

计算新的 Text 布局时回调函数, 回调中能够获取一些后果,比方控件的 size 等。

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text),
        onTextLayout = {Log.e("xige","text width: ${it.size.width}, text height: ${it.size.height}")
        }
    )
}

运行后果:

style 能够配置 text 的色彩、字号、行低等等

色彩、字号、行低等那些属性成果,都能够用 style 来对立配置, 除此之外,还有一些属性,如:shadow能够设置倒影成果,所有可配置属性如下:

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text),
        style = TextStyle(
            color = Color.Blue,
            fontSize = 20.sp,
            lineHeight = 20.sp,
            fontWeight = FontWeight.Bold,
            fontFamily = FontFamily.Monospace,
            fontStyle = FontStyle.Normal,
            shadow = Shadow(
                color = Color.Red,
                offset = Offset(10.0f,10.0f),
                blurRadius = 10.0f
            )
        )
    )
}

modifier 修改器

最初来说说 modifier, 这个属性很重要,也不是 Text 组件所独有,根本所有组件都有这个属性,它能够批改组件外观比方:pading、宽高、背景、形态等等。但绝不仅于此,还要很多弱小的性能,能够定义动画,自定义点击事件等等。因为篇幅无限,前面会独自写一篇 Modifier 的文章介绍。

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text),
        modifier = Modifier
            .border(
                width = 3.dp,
                color = Color.Red,
                shape = RoundedCornerShape(
                    topStart = 30.dp,
                    topEnd = 30.dp,
                    bottomStart = 20.dp,
                    bottomEnd = 30.dp
                )
            )
            .size(400.dp, 50.dp)
            .padding(10.dp)
    )
}

可抉择的 Text

默认状况下,Text 组件内容 不可抉择 ,这意味着,在默认状况下用户无奈从你的利用中 抉择和复制 文字。要启用文字抉择,须要应用 SelectionContainer 容器包装 Text 元素。

SelectionContainer 组件

从字面意思看:可抉择的容器,的确,只有用 SelectionContainer 包装 Text,则可抉择 Text 组件显示的文本。

@Composable
fun MyText() {
   SelectionContainer {Text(stringResource(R.string.my_text))
   }
}

##### DisableSelection 组件

JetpackCompose 其实反对更精细化的抉择,假如你想在一段可抉择的文本中,嵌入一个不可被抉择的文本。要实现这样一个性能非常简单,应用 DisableSelection 组件即可。

被 DisableSelection 包裹的 Text 组件,内容不可被抉择:

@Composable
fun MyText() {
    SelectionContainer {
        Column {Text("我是可被选中文本 1")
            Text("我是可被选中文本 2")
            Text("我是可被选中文本 3")
            DisableSelection {Text("我是不可被选中文本 1")
                Text("我是不可被选中文本 2")
            }
            Text("我是可被选中文本 4")
            Text("我是可被选中文本 4")
        }
    }
}

可点击的 Text

增加 clickable 修饰符

Text 组件自身是没有点击事件的,如果要让 Text 可点击,能够给它增加clickable 修饰符,也就是咱们后面说的 Modifier,如下,咱们增加一个可点击 Text,点击一次减少1

@Composable
fun MyText() {val txt = remember { mutableStateOf(0)}
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFE5E4E2))
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "${txt.value}",
            fontFamily = FontFamily.Serif,
            fontSize = 75.sp,
            color = Color(0xFFE63E62),
            modifier = Modifier
                .clip(RoundedCornerShape(12.dp))
                .background(Color(0xFFC9C0BB))
                .clickable(
                    enabled = true,
                    role = Role.Button
                ){txt.value += 1}
                .padding(25.dp)
        )
    }
}

获取点击文字的地位

clickable能够给 Text 增加点击事件,然而它却不能监听点击的是 Text 的那个地位,比方显示的是 Jetpack Compose,by 仍然范特稀西, 我想确定点击的是哪个字符,该咋整呢?Compose 为咱们提供了反对,应用ClickableText 即可:

@Composable
fun MyText() {
    ClickableText(text = AnnotatedString(stringResource(R.string.my_text))
    ) { index ->
        Log.d("ClickableText", "第 $index 个字符被点击")
    }
}

留神 ClickableText 承受的是一个 AnnotatedString类型,最初一个参数就是onClick, 这里使用了 kotlin 的 lamuda 表达式个性,最初一个 lamuda 表达式能够提到括号外,跟上面是等价的。

@Composable
fun MyText() {
    ClickableText(text = AnnotatedString(stringResource(R.string.my_text)),
        onClick = { index ->
            Log.d("ClickableText", "第 $index 个字符被点击")
        }
    ) 
}

Text 款式嵌套

Text 反对为其中的字符、字符串独自设置不同的款式,因为 Text 组件的 text 属性是 AnnotatedString 类型,AnnotatedString是一个数据类:

class AnnotatedString internal constructor(
    val text: String, // 字符串
    val spanStyles: List<Range<SpanStyle>> = emptyList(), // 设置字符款式的 List
    val paragraphStyles: List<Range<ParagraphStyle>> = emptyList(), // 设置段落款式的 List
    internal val annotations: List<Range<out Any>> = emptyList() // 注解 list) 

咱们能够通过提供的 buildAnnotatedString 来构建 AnnotatedString 类,其中,能够通过 append 函数拼接字符串,能够通过 withStyle 拼接字符串并设置款式:

@Composable
fun MyText() {
    Text(
        buildAnnotatedString {
            withStyle(
                style = SpanStyle(
                    color = Color.Blue,
                    fontWeight = FontWeight.Bold
                )
            ) {append("Jetpack")
            }
            append("Compose")
            withStyle(
                style = SpanStyle(
                    color = Color.Red,
                    fontWeight = FontWeight.Bold,
                    fontSize = 30.sp
                )
            ) {append("by")
            }
            append("仍然范特稀西")
        }
    )
}

这里咱们应用了 SpanStyle 来设置单个款式,还有一个ParagraphStyle ,按字面了解,就是设置段落款式,也就是包裹在 ParagraphStyle 外面的段落都会利用它设置的款式,看一下示例:

@Composable
fun MyText() {
    Text(
        buildAnnotatedString {

            withStyle(
                // 设置段落款式
                style = ParagraphStyle(
                    lineHeight = 60.sp,
                    textAlign = TextAlign.Center
                )
            ) {
                withStyle(
                    style = SpanStyle(
                        color = Color.Blue,
                        fontWeight = FontWeight.Bold
                    )
                ) {append("Jetpack Compose\n")
                }

                withStyle(
                    style = SpanStyle(
                        color = Color.Red,
                        fontWeight = FontWeight.Bold,
                        fontSize = 30.sp
                    )
                ) {append("by\n")
                }

                withStyle(
                    style = SpanStyle(
                        color = Color.Green,
                        fontWeight = FontWeight.Bold,
                    )
                ) {append("仍然范特稀西 \n")
                }

                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold,
                        fontSize = 30.sp,
                        color = Color.Red
                    )
                ) {append("@公众号:技术最 TOP")
                }
            }
        },
        modifier = Modifier.width(400.dp)
    )
}

下面,设置的 lineHeighttextAlin款式利用到了所包裹的所有段落上。

实用案列 - 点击超链接

咱们的 APP 中,登录 / 注册页面都会有 隐衷政策协定,须要用户批准后能力持续,像上面这样:

点击蓝色字即可跳转到隐衷政策 / 用户协定界面,个别是一个 H5 页面。咱们来用 Jetpack Compose 实现这么一个性能。

思路:ClickText + 款式嵌套 + 点击注解 可实现

前两个曾经介绍过了,当初简略说说 点击注解 在应用 buildAnnotatedString 时,能够应用 pushStringAnnotation 携带一个 tag 数据, 在点击对应 tag 时,onClick 中,能够应用 getStringAnnotations 获取携带的数据。

@Composable
fun MyText() {
    val annotatedText = buildAnnotatedString {append("登录即表明批准")
        pushStringAnnotation(
            tag = "tag1",
            annotation = "隐衷条款 1:https://www.xxx1.com"
        )
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                fontWeight = FontWeight.Bold,
                textDecoration = TextDecoration.Underline
            )
        ) {append("中国移动认证服务条款")
        }
        pop()
        append("以及")
        pushStringAnnotation(
            tag = "tag2",
            annotation = "隐衷条款 2:https://www.xxx2.com"
        )
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                fontWeight = FontWeight.Bold,
                textDecoration = TextDecoration.Underline
            )
        ) {append("用户协定")
        }
        pop()
        append("和")
        pushStringAnnotation(
            tag = "tag1",
            annotation = "隐衷条款 3:https://www.xxx3.com"
        )
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                fontWeight = FontWeight.Bold,
                textDecoration = TextDecoration.Underline
            )
        ) {append("隐衷政策")
        }
        pop()}

    val tags = listOf("tag1", "tag2", "tag3")
    ClickableText(
        text = annotatedText,
        onClick = { offset ->

            tags.forEach { tag ->
                annotatedText.getStringAnnotations(
                    tag = tag, start = offset,
                    end = offset
                )
                    .firstOrNull()?.let { annotation ->
                        Log.d("xige", annotation.item)
                    }
            }
        }
    )
}


点击蓝色字,打印如下:

在实在场景中,只须要将打印的中央,换跳转 Webview 展现即可。

总结

以上就是 Jetpack Compose 中,Text 组件应用的介绍,以及文字显示的各种应用摸索。欢送大家留言交换。

我是西哥,欢送大家关注我的公众号:「技术最 TOP」,干货内容第一工夫送阅!

退出移动版