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...

相关推荐
程序leo源31 分钟前
C语言:操作符详解1
android·java·c语言·c++·青少年编程·c#
sunly_6 小时前
Flutter:AnimatedPadding动态修改padding
android·flutter
诸神黄昏EX6 小时前
Android 常用命令和工具解析之GPU相关
android
顾北川_野6 小时前
Android 布局菜单或按钮图标或Menu/Item设置可见和不可见
android
练习本6 小时前
android 动画原理分析
android
别拿曾经看以后~6 小时前
原生Android调用uniapp项目中的方法
android·vue.js·uni-app
Winston Wood6 小时前
Android Binder技术概览
android·binder·进程通信
踏雪羽翼6 小时前
android 使用实现音效--Equalizer
android·音效·eqequalizer·bassboost·presetreverb
老码沉思录6 小时前
Android开发实战班 - Android开发基础之 Kotlin语言基础与特性
android·微信·kotlin
峥嵘life7 小时前
Android adb shell dumpsys audio 信息查看分析详解
android·adb