Compose学习之Text

Text是最常见的组件之一,用于显示文本。了解他的用法之前,先看看它的基本参数说明。

一、基本参数

kotlin 复制代码
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,    //控制文本是否能够换行,如果为false,则会截断
maxLines: Int = Int.MAX_VALUE,    //最大行数
onTextLayout: (TextLayoutResult) -> Unit = {},    //在文本发生变化之后,回调此方法
style: TextStyle = LocalTextStyle.current    //文本的风格配置,如颜色、字体、行高等

二、用法

1、简单用法

ini 复制代码
Text(text = "Hello Compose")

2、引用string.xml文件资源

vbnet 复制代码
Text(text = stringResource(id = R.string.app_name))

3、字体样式

ini 复制代码
Text(
    text = "Hello Compose",
    style = TextStyle(//文本的风格配置
        fontFamily = FontFamily.Default,////文本的字体
        fontSize = 15.sp,//字体大小
        fontWeight = FontWeight.Bold,//文本的粗细
        fontStyle = FontStyle.Italic,//斜体
        color = Color.Red,//文本颜色
        textDecoration = TextDecoration.LineThrough//删除线
    )
)

注:颜色引用colors.xml文件资源

ini 复制代码
colorResource(id = R.color.red)

删除线和下划线同时存在

ini 复制代码
textDecoration =  TextDecoration.combine(
    listOf(
        TextDecoration.LineThrough,
        TextDecoration.Underline
    )
)

4、文本对齐方式

ini 复制代码
Text(
    text = "Hello Compose",
    textAlign = TextAlign.Left,
    color= Color.White,
    modifier = Modifier.fillMaxWidth().background(Color.Red).height(200.dp)
)

注:Left左对齐、Right右对齐、Center居中对齐、Start从左往右的语言从左对齐,从右往左的语言从右对齐、End从左往右的语言从右对齐,从右往左的语言从左对齐。

如果宽度没有充满或者说文本的宽度等于自身是看不见效果的。

5、行数上限和文字溢出

ini 复制代码
Text(
    text = "Hello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello Compose",
    maxLines = 1,//最大行数
    overflow = TextOverflow.Ellipsis
)

注:maxLines指定文本的最大行数,overflow指定文本溢出时的处理方式:Ellipsis使用省略号表示文本已溢出,Visible显示所有文本,即使指定边界内没有足够的空间,Clip剪裁溢出的文本。

6、富文本

scss 复制代码
Text(
    text = buildAnnotatedString {
        withStyle(style = SpanStyle(color = Color.Black)) {
            append("文字变色加粗")
        }
        withStyle(style = SpanStyle(color = Color.Blue,fontWeight = FontWeight.W900)) {
            append("Hello Compose")
        }
        append("\n")
        withStyle(style = SpanStyle(color = Color.Black)) {
            append("文字变色加粗添加下划线")
        }
        withStyle(style = SpanStyle(color = Color.Blue,fontWeight = FontWeight.W900, textDecoration = TextDecoration.Underline)) {
            append("Hello Compose")
        }
    }
)

7、添加点击事件

Text没有点击事件的监听,需要换成ClickableText。

ini 复制代码
val annotatedText = buildAnnotatedString {
    append("Click ")
    // We attach this *URL* annotation to the following content
    // until `pop()` is called
    pushStringAnnotation(tag = "URL",
        annotation = "https://developer.android.com")
    withStyle(style = SpanStyle(color = Color.Blue,
        fontWeight = FontWeight.Bold)) {
        append("here")
    }
    pop()
}

ClickableText(
    text = annotatedText,
    onClick = { offset ->
        // We check if there is an *URL* annotation attached to the text
        // at the clicked position
        annotatedText.getStringAnnotations(tag = "URL", start = offset,
            end = offset)
            .firstOrNull()?.let { annotation ->
                // If yes, we log its value
                Log.d("Clicked URL", annotation.item)
            }
    }
)

withStyle函数用于指定文本的样式,append函数用于添加文本。pop函数将该样式或注释从上下文中移除,使其不再影响后续文本的样式,也就是恢复默认样式。

8、选中文本

需要搭配SelectionContainer使用。

ini 复制代码
SelectionContainer() {
    Text(
        text = "Hello Compose",
        color = Color.Red,
        fontSize = 15.sp,
        overflow = TextOverflow.Ellipsis,
        style = TextStyle(color = Color.Blue)
    )
}

参考: developer.android.google.cn/jetpack/com... blog.csdn.net/weixin_4278... juejin.cn/post/727625...

相关推荐
大菠萝爱上小西瓜1 小时前
分享一篇关于雷电模拟器基于安卓9的安装环境及抓包的详细教程
android
用户2018792831672 小时前
浅析:Synchronized的锁升级机制
android
用户2018792831672 小时前
SystemClock.elapsedRealtime() 和 System.currentTimeMillis()
android
低调小一2 小时前
深入理解 Android targetSdkVersion:从 Google Play 政策到依赖冲突
android
皆过客,揽星河3 小时前
Linux上安装MySQL8详细教程
android·linux·hadoop·mysql·linux安装mysql·数据库安装·详细教程
catchadmin3 小时前
开发 PHP 扩展新途径 通过 FrankenPHP 用 Go 语言编写 PHP 扩展
android·golang·php
花城飞猪4 小时前
Android系统框架知识系列(二十):专题延伸:JVM vs ART/Dalvik - Android运行时演进深度解析
android·jvm·dalvik
用户2018792831675 小时前
故事:老王的图书馆HashMap vs 小张的现代科技SparseArray
android
用户2018792831675 小时前
故事:两个图书馆的比喻ArrayMap
android
用户2018792831675 小时前
SparseArray、SparseIntArray 和 SparseLongArray 的差异
android