JetpackCompose从入门到实战学习笔记3——Text的简单使用

Android小渣渣
411 阅读4分钟

JetpackCompose从入门到实战学习笔记3——Text的简单使用

1.源码分析：

@Composable
fun Text(
    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,
    maxLines: Int = Int.MAX_VALUE,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
) {
    val textColor = color.takeOrElse {
        style.color.takeOrElse {
            LocalContentColor.current
        }
    }
    val mergedStyle = style.merge(
        TextStyle(
            color = textColor,
            fontSize = fontSize,
            fontWeight = fontWeight,
            textAlign = textAlign,
            lineHeight = lineHeight,
            fontFamily = fontFamily,
            textDecoration = textDecoration,
            fontStyle = fontStyle,
            letterSpacing = letterSpacing
        )
    )
    BasicText(
        text,
        modifier,
        mergedStyle,
        onTextLayout,
        overflow,
        softWrap,
        maxLines,
        inlineContent
    )
}

2.TextStyle：字体样式

//1.TextStyle：字体样式
Spacer(modifier = Modifier.width(10.dp))
Text(text = "Hello World \n" + "Goobye World")
Spacer(modifier = Modifier.width(20.dp))
Text(
    text = "Hello World \n" + "Goobye World",
    style = TextStyle(
        fontSize = 25.sp,//字体大小
        fontWeight = FontWeight.Bold,//字体粗细
        background = Color.Cyan,//背景
        lineHeight = 35.sp//行高
    ),
)
Spacer(modifier = Modifier.width(20.dp))
Text(
    text = "Hello World",
    style = TextStyle(
        color = Color.Gray,
        letterSpacing = 4.sp)//字体间距
)
Spacer(modifier = Modifier.width(20.dp))
Text(
    text = "Hello World",
    style = TextStyle(
        textDecoration = TextDecoration.LineThrough,//删除线
        fontSize = 10.sp,
        color = Color.DarkGray
    )
)
Spacer(modifier = Modifier.width(20.dp))
Text(
    text = "Hello World",
    style = MaterialTheme.typography.headlineLarge.copy(fontStyle = FontStyle.Italic),
    color = Color.Cyan
)
Spacer(modifier = Modifier.width(40.dp))
Text(
    text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
    style = MaterialTheme.typography.bodyLarge.copy(fontFamily = FontFamily.Cursive),//字体风格
    fontSize = 20.sp,
    color = Color.Magenta
)

3.TestStyle的效果预览：

image.png

4.MaxLines：行数

Spacer(modifier = Modifier.width(40.dp))
Text(
    text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
    style = MaterialTheme.typography.titleLarge.copy(fontStyle = FontStyle.Italic),
    fontSize = 20.sp,
    maxLines = 1,
    color = Color.Blue
)
Spacer(modifier = Modifier.width(40.dp))
Text(
    text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面你好世界，我正在使用Jetpack Compose框架来开发我的App界面,你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
    style = MaterialTheme.typography.labelLarge.copy(fontStyle = FontStyle.Normal),
    fontSize = 20.sp,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
    color = Color.Red
)

5.MaxLines效果预览:

image.png

6.FontFamily：字体风格

Spacer(modifier = Modifier.width(40.dp))
Text(
    text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面你好世界，我正在使用Jetpack Compose框架来开发我的App界面,你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
    style = MaterialTheme.typography.labelLarge.copy(fontFamily = FontFamily.Serif),
    fontSize = 20.sp,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
    color = Color.Red
)
Spacer(modifier = Modifier.width(40.dp))
Text(
    text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面你好世界，我正在使用Jetpack Compose框架来开发我的App界面,你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
    style = MaterialTheme.typography.labelLarge.copy(fontFamily = FontFamily.SansSerif),
    fontSize = 20.sp,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
    color = Color.Red
)

7.FontFamily的效果预览：

image.png

8.AnnotatedString多样式文字

Spacer(modifier = Modifier.width(40.dp))
Text(
    text = buildAnnotatedString {
        withStyle( style = SpanStyle(
            fontSize = 24.sp)){
            append("你现在学习的章节是")
        }
        withStyle (
            style = SpanStyle(
                fontWeight = FontWeight.W900,
                fontSize = 24.sp
            )
        ){
            append("Text")
        }
        append("\n")
        withStyle (
            style = ParagraphStyle(
                lineHeight =25.sp,
            )
        ){
            append("在刚刚讲过的内容中，我们学会了如何应用文字，以及如何限制文本的行数和处理溢出的视觉效果。")
        }
        append("\n")
        append("现在，我们正在学习")
        withStyle (
            style = SpanStyle(
                fontWeight = FontWeight.W900,
                textDecoration = TextDecoration.Underline,
                color = Color(0xFF59A869)
            )
        ){
            append("AnnotatedString")
        }
    }
)

9.AnnotatedString的效果预览：

image.png

10.完整的代码如下：

class BaseWeightActivity : ComponentActivity() {
​
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //text文本控件
            TextDemo()
        }
    }
​
    @Composable
    fun TextDemo() {
        Column {
            //1.TextStyle：字体样式
            Spacer(modifier = Modifier.width(10.dp))
            Text(text = "Hello World \n" + "Goobye World")
            Spacer(modifier = Modifier.width(20.dp))
            Text(
                text = "Hello World \n" + "Goobye World",
                style = TextStyle(
                    fontSize = 25.sp,//字体大小
                    fontWeight = FontWeight.Bold,//字体粗细
                    background = Color.Cyan,//背景
                    lineHeight = 35.sp//行高
                ),
            )
            Spacer(modifier = Modifier.width(20.dp))
            Text(
                text = "Hello World",
                style = TextStyle(
                    color = Color.Gray,
                    letterSpacing = 4.sp)//字体间距
            )
            Spacer(modifier = Modifier.width(20.dp))
            Text(
                text = "Hello World",
                style = TextStyle(
                    textDecoration = TextDecoration.LineThrough,//删除线
                    fontSize = 10.sp,
                    color = Color.DarkGray
                )
            )
            Spacer(modifier = Modifier.width(20.dp))
            Text(
                text = "Hello World",
                style = MaterialTheme.typography.headlineLarge.copy(fontStyle = FontStyle.Italic),
                color = Color.Cyan
            )
            Spacer(modifier = Modifier.width(40.dp))
            Text(
                text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
                style = MaterialTheme.typography.bodyLarge.copy(fontFamily = FontFamily.Cursive),//字体风格
                fontSize = 20.sp,
                color = Color.Magenta
            )
            //2.MaxLines：行数
            Spacer(modifier = Modifier.width(40.dp))
            Text(
                text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
                style = MaterialTheme.typography.titleLarge.copy(fontStyle = FontStyle.Italic),
                fontSize = 20.sp,
                maxLines = 1,
                color = Color.Blue
            )
            Spacer(modifier = Modifier.width(40.dp))
            Text(
                text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面你好世界，我正在使用Jetpack Compose框架来开发我的App界面,你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
                style = MaterialTheme.typography.labelLarge.copy(fontStyle = FontStyle.Normal),
                fontSize = 20.sp,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                color = Color.Red
            )
            //3.fontFamily：字体风格
            Spacer(modifier = Modifier.width(40.dp))
            Text(
                text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面你好世界，我正在使用Jetpack Compose框架来开发我的App界面,你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
                style = MaterialTheme.typography.labelLarge.copy(fontFamily = FontFamily.Serif),
                fontSize = 20.sp,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                color = Color.Red
            )
            Spacer(modifier = Modifier.width(40.dp))
            Text(
                text = "你好世界，我正在使用Jetpack Compose框架来开发我的App界面你好世界，我正在使用Jetpack Compose框架来开发我的App界面,你好世界，我正在使用Jetpack Compose框架来开发我的App界面",
                style = MaterialTheme.typography.labelLarge.copy(fontFamily = FontFamily.SansSerif),
                fontSize = 20.sp,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                color = Color.Red
            )
            //4.AnnotatedString多样式文字
            Spacer(modifier = Modifier.width(40.dp))
            Text(
                text = buildAnnotatedString {
                    withStyle( style = SpanStyle(
                        fontSize = 24.sp)){
                        append("你现在学习的章节是")
                    }
                    withStyle (
                        style = SpanStyle(
                            fontWeight = FontWeight.W900,
                            fontSize = 24.sp
                        )
                    ){
                        append("Text")
                    }
                    append("\n")
                    withStyle (
                        style = ParagraphStyle(
                            lineHeight =25.sp,
                        )
                    ){
                        append("在刚刚讲过的内容中，我们学会了如何应用文字，以及如何限制文本的行数和处理溢出的视觉效果。")
                    }
                    append("\n")
                    append("现在，我们正在学习")
                    withStyle (
                        style = SpanStyle(
                            fontWeight = FontWeight.W900,
                            textDecoration = TextDecoration.Underline,
                            color = Color(0xFF59A869)
                        )
                    ){
                        append("AnnotatedString")
                    }
                }
            )
        }
    }

11.完整的效果预览：

image.png

12.源码如下：

(在BaseWeightActivity，点击size修饰符即可跳转)
gitee.com/jackning_ad…

avatar
文章
阅读
粉丝