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

已于 2022-12-06 23:50:58 修改
阅读量744 收藏 2
点赞数 1
分类专栏： Android Jetpack 文章标签： 学习 android kotlin
于 2022-11-28 21:26:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012556114/article/details/128081287
版权

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

上一篇文章我们讲解了modifier的一些简单用法，本篇就开始讲解基础控件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.TextStyle的效果预览：

在这里插入图片描述

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效果预览:

在这里插入图片描述

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的效果预览：

在这里插入图片描述

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的效果预览：在这里插入图片描述

10.ClickableText

      ClickableText(
                text = annotatedText,
                onClick = { offset ->
                    // 获取被点击区域 tag 为 URL 的 annotation
                    annotatedText.getStringAnnotations(
                        tag = "URL",
                        start = offset,
                        end = offset
                    ).firstOrNull()?.let { annotation ->
                        // 打开 URL
                        Log.d(TAG,"打开url" + annotation.item)
                        //openURL(annotation.item)
                    }
                }
            )

11.SelectionContainer:

 SelectionContainer {
                Text("我是可被复制的")
 }

12. 可复制文本的效果预览：

在这里插入图片描述

13.完整的代码如下：

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")
                    }
                }
            )
        }
    }
    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")
        }
    }
)

14.完整的效果预览：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wZOfFR4D-1669621553800)(C:\Users\ningjinbo\AppData\Roaming\Typora\typora-user-images\image-20221128120901227.png)]

15.源码如下：

(在BaseWeightActivity，点击size修饰符即可跳转)
https://gitee.com/jackning_admin/compose-modifier-demo

淡淡的香烟
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
DSP入门学习笔记2——从流水灯到GPIO
08-13
"DSP入门学习笔记2——从流水灯到GPIO" 本文主要介绍了DSP入门学习笔记的第二部分，从流水灯到GPIO的控制。流水灯是硬件学习的基础，犹如Hello World之于软件学习。下面将详细介绍流水灯的实现及GPIO控制的编程。 ...
Jetpack Compose - Text
乐翁龙
12-01 2324
Jetpack Compose - TextText Text 首先直接把常用的参数列出来： @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, fontSize: TextUnit = TextUnit.Inherit, fontStyle: FontStyle? = null, fontWeight
Jetpack Compose —— Text
江小白的博客
04-29 623
是一个类，它包含了多个属性，可以用来定义字体的各种样式，包括字体大小、字体颜色、字体家族、字体粗细、字体风格等等。来呈现任何类型的文本，例如标题、正文、标签等。通过指定文本、样式、字体、大小和颜色等属性，可以完全控制文本的外观。这一章我们来看看Compose中第一个Text控件的使用，类似xml中的TextView。这一章只介绍常用属性的使用，如果还需要查看别的属性的使用，可直接跳转到官方文档。它用于指定字体的风格，比如是否倾斜或斜体。是一个UI组件，用于显示文本。组件的字体样式，但是它们的作用有所不同。
Jetpack Compose之Text
chxip的博客
11-23 2204
基本使用 Text是显示文本的组件，最常用的组件，都没有之一，text参数是必须要传的，其它的可以为空。基本用法如下： Text(text = "ping 老师很帅") 通常我们都会把文字放到string.xml文件里面，在Compose的Text里面，需要使用stringResource(id)来获取string.xml里面的值： Text(text = stringResource(id = R.string.ping)) color 设置color参数可以调整text的文字颜色 Text(te.
JetpackCompose从入门到实战学习笔记2——Modifier的简单使用
u012556114的博客
11-27 536
Modifier的简单使用
JetPackCompose之Text使用指北
左大侠的博客
02-04 1472
对应View体系中传统的TextView，Jetpack Compose中用Text组件来显示文本信息。本文让你彻底明白Compose中的文本使用。
【精品分享】《Python编程从入门到实践》学习笔记——第二章 变量和简单数据类型
12-20
在后续章节中，如第三章“列表简介”，我们将学习更复杂的数据结构——列表，它允许你存储多个值在一个变量中。第四章“操作列表”会涵盖如何对列表进行添加、删除、排序等操作。第五章“if语句”介绍条件控制，用于...
PHP从入门到精通完整笔记301页.pdf
05-12
【PHP从入门到精通完整笔记】是一份涵盖了HTML、CSS以及PHP基础知识的全面教程，旨在帮助初学者系统地学习这三门技术。这份笔记共有301页，内容包括了HTML+CSS的前22讲以及PHP的第23至149讲。 **HTML基础知识** 1. ...
机器学习实战笔记4——主成分分析
01-21
3、K-means聚类 10、高斯混合模型 4、主成分分析 11、嵌入学习 5、线性判别分析 12、强化学习 6、贝叶斯方法 13、PageRank 7、逻辑回归 14、深度学习 主成分分析(PCA) Ⅰ算法背景：维数灾难  维数灾难最早是由...
Jetpack Compose（一）：Text
AndroidKt
04-05 483
前言 自从去年参加 Android 官方发起了 Jetpack Compose 的推广活动：Jetpack Compose 开发者挑战赛以后，再未系统的学习过 Jetpack Compose 的内容，一晃一年就过去了，官方版本已经更新至稳定版 本1.1.1，Alpha 版本 1.2.0-alpha04。 从今天开始，继续自学 Jetpack Compose，就从文本 Text 开始吧，用不用得上再说。 Text 属性 @Composable fun Text( text: String,
Android Jetpack Compose 之 Text
u011215710的博客
02-10 751
官方教程 下载Android Studio Canary版本 环境 添加依赖： def compose_version = "0.1.0-dev03" kapt("androidx.compose:compose-compiler:$compose_version") implementation("androidx.compose:compose-runtime:$co...
Jetpack Compose基础组件之 — Text
huangjianfeng21的博客
09-14 261
是Compose中最基本的布局组件，它可以显示文字从res中加载文字。
Jetpack Compose——Text(文本)的使用
lplj717的博客
12-09 3328
首先来看一些基础的参数： Text(text = "hello world", fontSize = 30.sp)//设置字体大小 Text( text = stringResource(id = R.string.hello_world),//设置为资源中的文字 color = colorResource(id = R.color.purple_500)//设置字体颜色 ) Text(tex
Jetpack Compose系列-Text组件花式使用！，膜拜
2401_83620654的博客
04-01 682
在Jetpack Compose 中，组件是一个特殊的Kotlin 函数，因此Text其实也是一个函数，而它提供了很多参数来配置文本的显示外观。这些参数就是组件的属性。看一下Text组件有哪些属性：fun Text(// 显示的文本字符串// 修改器，可以配置文本的大小及显示外观// 文本的颜色// 文本的字号大小// 文字样式= null,// 文字粗细= null,// 文本字体= null,// 文字间的间距。
[Android]Jetpack Compose设置颜色
最新发布
Gamin
04-19 507
Jetpack Compose 提供了一系列预定义的颜色，如Color.RedColor.BlueText(",color = Color.Red // 使用预定义的红色。
Compose Modifier修饰符详细解说
ymeddmn的博客
06-26 3534
本文会对Modifier修饰符进行详尽的解说，报你收货满满 本文git地址： https://github.com/ymeddmn/ModifierIntroduce Modifier Modifier 可以被翻译为修饰符，可以用来修饰以下内容： 更改可组合项的大小、布局、行为和外观 添加信息，如无障碍标签 处理用户输入 添加高级互动，如使元素可点击、可滚动、可拖动或可缩放 item 代码案例 第三节属性扩展中的案例都是基于本节中 item 方法的形参进行赋值得到的 item1 ite
compose--初入compose、资源获取、标准控件与布局
aruba的博客
12-05 2031
compose正式发布已经一年多了，越来越多的开发人员选择使用它，声明式UI也是未来的一个主流趋势，本人也是一年前学习后，并没有真正的使用，所以本着边学习，边分享的心态，准备写个compose系列的文章 首先compose目前只支持kotlin，基于google对移动端的鸿图，未来应该也不会支持其他语言，和传统安卓的xml布局不同，compose是通过kotlin定义一个一个组件，由于是通过代码定...
Jetpack Compose——Text的基本使用
wy313622821的博客
12-01 353
【代码】Jetpack Compose——Text的基本使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值