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

2次阅读

共计 14126 个字符，预计需要花费 36 分钟才能阅读完成。

对于用户界面而言，文本是最根底而又外围的内容，在传统的 Android Native 开发中，须要用一个 TextView 来显示一个文本。在 Jetpack Compose 中，提供了 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 显示文本

对于用户界面而言，文本是最根底而又外围的内容，在传统的 Android Native 开发中，须要用一个 TextView 来显示一个文本。在 Jetpack Compose 中，提供了 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 显示文本

显示文字的最简略的办法是应用以 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.Italic和FontStyle.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 种字体，Default、SansSerif、Serif、Monospace、Cursive。

@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.Start、TextAlign. End 、TextAlign. Center 、TextAlign. Justify 等值。默认状况下，Text 会依据其内容值抉择天然的文字对齐形式：

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

如果您想手动设置 Text 组件的文字对齐形式，最好别离应用 TextAlign.Start 和 TextAlign.End（而不要应用 TextAlign.Left 和 TextAlign.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 组件内容 不可抉择 ，这意味着，在默认状况下用户无奈从你的利用中 抉择和复制 文字。要启用文字抉择，须要应用 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")
        }
    }
}

增加 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 属性是 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)
    )
}

下面，设置的 lineHeight 和textAlin款式利用到了所包裹的所有段落上。

咱们的 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」，干货内容第一工夫送阅！

正文完

jetpack

发表至： jetpack

2021-04-26

0

关于jetpack:Jetpack-Compose-系列环境搭建和工具介绍

关于jetpack:Jetpack探索之旅Jetpack-Compose开发应用指南从入门到精通

关于jetpack:Jetpack架构演化初步运用flow附加经典案例

关于jetpack:Jetpack-Compose-现已支持-Material-You-2021-Android-开发者峰会

关于前端:影响了一代代前端人的-20-个里程碑式的顶级开源项目2021-成为里程碑的项目又是哪个呢

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

Text 属性介绍

Text 各属性示例成果

text 显示文本

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

Text 属性介绍

Text 各属性示例成果

text 显示文本

color 更改文字色彩

fontSize 更改文字大小

fontStyle 设置文字款式

fontWeight 更改文字的粗细水平

fontFamily 更改字体

letterSpacing 更改文字间距

textDecoration 文字装璜器

textAlign 设置文字对齐方向

lineHeight 设置行高

overflow 设置文本溢出成果

maxLines 设置最多显示行数

softWrap 是否主动换行

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

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

modifier 修改器

可抉择的 Text

SelectionContainer 组件

可点击的 Text

增加 clickable 修饰符

获取点击文字的地位

Text 款式嵌套

实用案列 - 点击超链接

总结

站内搜索