Jetpack Compose学习(2)——文本(Text)的使用

原文: Jetpack Compose学习(2)——文本(Text)的使用 | Stars-One的杂货小窝

对于开发来说,文字最为基础的组件,我们先从这两个使用开始吧

本篇涉及到Kotlin和DSL特性的使用 若不了解的话可能会造成代码阅读困难,阅读前确保你有上述基础知识!!!

本系列以往文章请查看此分类链接jetpackcompose学习

基础使用

@Preview(showBackground = true)
@Composable
fun textDemo() {
    ComposeDemoTheme {
        Column() {
			//基础使用
            Text(text = "Hello world")
			//文字颜色
            Text(text = "Hello world", color = Color.Blue)
			//文字大小,sp关键字需要导入
			Text("Hello World", fontSize = 30.sp)
			//斜体
            Text("Hello World", fontStyle = FontStyle.Italic)
			//字体加粗
            Text("Hello World", fontWeight = FontWeight.Bold)
			//文字溢出(显示省略号) repeat是重复的意思,文本内容是20个Hello world组成的字符串
            Text(text = "Hello world".repeat(20),overflow = TextOverflow.Ellipsis,maxLines = 2)

        }
    }
}

上述代码的效果如下图所示:

Jetpack Compose学习(2)——文本(Text)的使用

属性 说明
text 文字
color 文字颜色
fontSize 字体大小
fontStyle 字体样式, 可设置为斜体Italic
fontWeight 字体权重,可设置字体加粗
overflow 文字溢出效果,与maxLines结合使用可实现文字溢出显示省略号效果
maxLines 最大行数 ,与overflow结合使用实现文字溢出显示省略号效果

PS:这里提下,还有个重要的属性modifier,这个准备在和布局使用一起讲解,其作用很强大,可以设置控件宽高,背景,点击效果,间距,滚动等效果,所有的组件都是存在有这个属性,方便我们对组件进行调整

上述列出的属性并不是全部,还有些不是太常用的就没列出来了

补充: 一般我们是将常用的文本放在string.xml文件中,如果想要获取这里的数值,compose也是提供有相应的方法,当然,除了文本之外,颜色等资源也有对应的方法

文本 -> stringResource(R.string.app_name)

颜色 -> colorResource(R.color.black)

尺寸 -> dimensionResource(R.dimen.padding_small)

图片 -> painterResource(R.drawable.ic_logo)

单行文本多样式

我们可能遇到这样的情况,在一行文本中,其中某个地址可以点击,或者某个词语需要加粗,按照以往的操作,我们就得用多个TextView来实现或借助他人封装的View来实现

但在Compose中,我们可以很方便的实现上述这样的效果,text属性除了接收字符串,还可以接收一个参数AnnotatedString,如下图所示

Jetpack Compose学习(2)——文本(Text)的使用

提示:如果你快捷键是默认的话,在方法括号里按下ctrl+p可以看到参数提示 :good:

官方文档的解释:

The basic data structure of text with multiple styles.

翻译过来就是说AnnotatedString是一种具有多种样式的文本的基本数据结构

文档上也是说明了,推荐可以使用构建器来生成对象,其实也就是一个方法buildAnnotatedString()

此方法里面我们可以使用Kotlin的语言特性DSL,更方便的创建一个AnnotatedString

来段简单的代码:

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
				//设置Hello为蓝色字体
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello")
                }       
            }
        }
    )
}

buildAnnotatedString方法里存在有withStyleappend方法,这两个方法其实是AnnotatedString.Builder类里的方法

这里是采用了lambda写法,buildAnnotatedString花括号里的对象即为AnnotatedString.Builder

withStyle可以接收ParagraphStyleSpanStyle

从字面上很容易理解,ParagraphStyle是段落样式,SpanStyle是单行样式

从构造方法来看,SpanStyle其实和Text的构造方法差不多,而且比Text类中的属性都要丰富,如设置背景色,阴影等(而Text类中这些功能都被封装在Modified类里)

前面列出的属性表格它都有,但除了text属性(当然,也能理解,这只是个Style,要text属性做什么 )

上一篇:这才是做了五年Android开发该有的样子!


下一篇:这才是做了五年Android开发该有的样子!