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

相关推荐
枯骨成佛43 分钟前
Android中Crash Debug技巧
android
kim56596 小时前
android studio 更改gradle版本方法(备忘)
android·ide·gradle·android studio
咸芝麻鱼6 小时前
Android Studio | 最新版本配置要求高,JDK运行环境不适配,导致无法启动App
android·ide·android studio
无所谓จุ๊บ6 小时前
Android Studio使用c++编写
android·c++
csucoderlee7 小时前
Android Studio的新界面New UI,怎么切换回老界面
android·ui·android studio
kim56597 小时前
各版本android studio下载地址
android·ide·android studio
饮啦冰美式7 小时前
Android Studio 将项目打包成apk文件
android·ide·android studio
夜色。7 小时前
Unity6 + Android Studio 开发环境搭建【备忘】
android·unity·android studio
ROCKY_8178 小时前
AndroidStudio-滚动视图ScrollView
android
趴菜小玩家9 小时前
使用 Gradle 插件优化 Flutter Android 插件开发中的 Flutter 依赖缺失问题
android·flutter·gradle