Android Compose-Text的使用

1、TextView介绍

// androidx.compose.material.Text
@Composable
fun Text(
    // 要显示的文本内容
    text: String,
    // Modifier修饰符
    modifier: Modifier = Modifier,
    // 文本颜色
    color: Color = Color.Unspecified,
    ......
    // 在文本内容上面绘制的装饰（如，下划线）
    textDecoration: TextDecoration? = null,
    // 行高
    lineHeight: TextUnit = TextUnit.Unspecified,
    // 文本内容溢出处理方式：Clip、Ellipsis、Visible
    overflow: TextOverflow = TextOverflow.Clip,
    // 是否处理换行符
    softWrap: Boolean = true,
    // 计算新文本布局时执行的回调。
    // [TextLayoutResult] 包含段落信息、大小
    // 文本、基线等。回调可用于添加额外的装饰和
    // 文本的功能。例如，围绕文本绘制选择。
    onTextLayout: (TextLayoutResult) -> Unit = {},
    // 文本的样式配置
    style: TextStyle = LocalTextStyle.current
)

2、Text的基础使用

Column() {
    Text(
        text = "Hello $name!", style = TextStyle(
            color = colorResource(id = R.color.purple_500),
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold
        )
    )

    Text(text = "赵丽颖", color = Color.Cyan, fontSize = 30.sp, fontWeight = FontWeight.Bold)
}

3、Text的字体加粗

Column() {
    Text(
        text = "Hello $name!", style = TextStyle(
            fontWeight = FontWeight.W900
        )
    )

    Text(text = "赵丽颖",  fontWeight = FontWeight.Bold)
}

下图中 左右两边等价

4、Text的字体类型

Column() {
    Text(
        text = "Hello $name!", style = TextStyle(
            fontFamily = FontFamily.Serif
        )
    )

    Text(text = "赵丽颖",  fontFamily = FontFamily.Default)
}

注意：可以使用 fontFamily 属性来处理 res/font 文件夹中定义的自定义字体和字型

• 需要注意 引入的字体库名称 必须仅包含小写字母az，0-9或下划线
• 引入完成就以后需要rebuild一下，否则无法找到 font的
• 字体下载

val fontFamily = FontFamily(
Font(resId = R.font.myfont, weight = FontWeight.Normal)
)
Text(
text = “Demo Text”,
style = TextStyle(
fontFamily = fontFamily,)
)

5、Text的字间隔空

注意：必须是sp;

Column() {
    Text(
        text = "Hello $name!", 
        style = TextStyle(
            letterSpacing = 2.sp
        )
    )

    Text(text = "赵丽颖",  
        letterSpacing  =12.sp)
}

6、Text的文字修饰

Column() {
    Text(
        text = "Hello $name!",
        style = TextStyle(
            textDecoration  = TextDecoration.Underline
        )
    )

    Text(text = "赵丽颖",
        textDecoration  = TextDecoration.LineThrough
    )
}

7、Text的对齐方式

//必须定义宽度
var modifier = Modifier.width(200.dp)
Column() {
    Text(
        text = "Hello $name!",
        modifier = modifier,
        style = TextStyle(
            textAlign  = TextAlign.Left
        )
    )

    Text(text = "赵丽颖",
        modifier = modifier,
        textAlign  = TextAlign.Right
    )
}

其中Justify表示两端贴边

TextAlign.Start和TextAlign.Left的区别

有些国家的文字是从右往左。例如阿拉伯语。

• TextAlign.Left表示 不管你是什么语言，都是靠左
• TextAlign.Start会根据首选项语言去选择从左还是从右

8、Text的行高

Text(  
text = value,  
lineHeight = 30.sp  
)

9、Text的最大行数

Text("hello ".repeat(50), maxLines = 2)

10、Text的文字溢出

Text(  
text = value,  
overflow = TextOverflow.Ellipsis,  
maxLines = 1  
)

• Clip 将溢出的部分裁剪
• Ellipsis 使用省略号表示溢出部分
• Visible 指定范围内没有足够的空间。也要显示所有文本

关于最后一个Visible 在官网中可以找到示例去演示器效果。笔者这边简化了一下。示例如下。

Box(modifier = Modifier
.size(300.dp, 150.dp)
.background(Color.Red)) {
Text(
text = "Hello World".repeat(2),
modifier = Modifier
.size(200.dp, 70.dp)
.background(Color.Yellow),
fontSize = 35.sp,
overflow = TextOverflow.Visible,
)
}

11、Text的换行处理

Text(  
text = value2,  
softWrap = false  
)

• false 被定位为有无限的水平空间
• true 默认会有边界

12、Text的onTextLayout

计算新的文本布局时执行的回调.预览是不打印的。只有运行才会打印

val value = "hello world"
Column(Modifier.width(200.dp)) {
    Text(
        text = value,
        onTextLayout = {
            Log.d("lyy",it.toString())
        })
}

运行以后的结果，可以看到所有的属性都被打印出来了

TextLayoutResult(layoutInput=
TextLayoutInput(text=hello world, 
style=TextStyle(color=Color(0.0, 0.0, 0.0, 0.87058824, sRGB IEC61966-2.1), fontSize=16.0.sp, 
fontWeight=FontWeight(weight=400), 
fontStyle=null, fontSynthesis=null, fontFamily=androidx.compose.ui.text.font.DefaultFontFamily@ea5b223, fontFeatureSettings=null, 
letterSpacing=Unspecified, 
baselineShift=null, 
textGeometricTransform=null, 
localeList=null, 
background=Color(0.0, 0.0, 0.0, 0.0, None), 
textDecoration=null, shadow=null, 
textAlign=null, 
textDirection=null, 
lineHeight=Unspecified, textIndent=null), 
placeholders=[], 
maxLines=2147483647, 
softWrap=true, 
overflow=Clip, 
density=DensityImpl(density=2.75, fontScale=1.0), 
layoutDirection=Ltr, resourceLoader=androidx.compose.ui.platform.AndroidFontResourceLoader@e42e14c, constraints=Constraints(minWidth = 0, maxWidth = 550, minHeight = 0, maxHeight = 2068)), multiParagraph=androidx.compose.ui.text.MultiParagraph@fe74595, 
size=214 x 59, 
firstBaseline=47.0, 
lastBaseline=47.0, 
placeholderRects=[])

13、Text的文字样式

style属性的TextStyle类中。有很多就可以在Text的构造方法中去执行。但是依然有一些特殊的属性

背景颜色

style = TextStyle(  
background = Color.Red  
)

14、Text的基线偏移

Text(  
text = value,  
style = TextStyle(  
baselineShift = BaselineShift.Subscript  
)  
)

说明这个属性之前，要明白什么是基线。用hencoder中描述

每只小鸟的最高点和最低点都不一样，但画面很平衡,而这个用来让所有文字互相对齐的基准线，就是基线( baseline )

Android Text 的基线baseline

实际运行效果呢？

笔者这边选择了 3个参数进行演示。

BaselineShift给我们提供了3个默认的选项

• val Superscript = BaselineShift(0.5f)
• val Subscript = BaselineShift(-0.5f)
• val None = BaselineShift(0.0f)

15、Text的合成字体

fontSynthesis = FontSynthesis.All

合成字体用于指定当使用的FontFamily不包含粗体或斜体时，系统是否应该伪造粗体或倾斜字形。

• None 关闭字体合成。 如果FontFamily中不存在粗体和斜体，则不会合成它们
• Weight 如果FontFamily中不提供，则仅合成粗体。 倾斜的字体将不会被合成。
• Style 如果FontFamily中不可用，则仅合成倾斜的字体。 粗体字体将不被合成。
• All 如果FontFamily中不提供粗体和倾斜字体，则系统会合成粗体和倾斜字体

16、Text的文字缩进

Text(  
text = “hello world”.repeat(2),  
style = TextStyle(  
textIndent = TextIndent(10.sp,10.sp)  
)  
)

class TextIndent(  
//第一行的缩进  
val firstLine: TextUnit = 0.sp,  
//除了第一行其他行的缩进  
val restLine: TextUnit = 0.sp  
)

17、Text的文字方向

style = TextStyle(  
textDirection = TextDirection.Ltr  
)

一般情况下。我们用到的都是从左往右。也有一些国家的语言是从右往左，例如阿拉伯语

• Ltr 从左往右
• Rtl 从右往左

18、Text的字体阴影

Card(
    modifier = Modifier
        .shadow(8.dp, RoundedCornerShape(8.dp)) // 添加阴影
        .background(Color.Red), // 背景颜色
    elevation = 4.dp // 卡片的高度
) {
    Text(
        text = "这是一个带阴影的卡片",
        modifier = Modifier.padding(16.dp),
       style = MaterialTheme.typography.body1
    )
}

• 1、Card: 使用 Card 组件，它本身就有一些默认的阴影和圆角效果。
• 2、Modifier.shadow:
  • 8.dp 是阴影的大小，您可以根据需要调整。
  • RoundedCornerShape(8.dp) 指定阴影的形状，通常与组件的形状一致。
• 3、Modifier.background: 设置卡片的背景颜色。
• 4、Text: 在卡片中添加文本，并使用 Modifier.padding 来设置内边距。