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

相关推荐
黄林晴7 分钟前
如何判断手机是否是纯血鸿蒙系统
android
火柴就是我14 分钟前
flutter 之真手势冲突处理
android·flutter
法的空间33 分钟前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
循环不息优化不止39 分钟前
深入解析安卓 Handle 机制
android
恋猫de小郭1 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
jctech1 小时前
这才是2025年的插件化!ComboLite 2.0:为Compose开发者带来极致“爽”感
android·开源
用户2018792831671 小时前
为何Handler的postDelayed不适合精准定时任务?
android
叽哥1 小时前
Kotlin学习第 8 课:Kotlin 进阶特性:简化代码与提升效率
android·java·kotlin
Cui晨1 小时前
Android RecyclerView展示List<View> Adapter的数据源使用View
android
氦客1 小时前
Android Doze低电耗休眠模式 与 WorkManager
android·suspend·休眠模式·workmanager·doze·低功耗模式·state_doze