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 = 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
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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")
        }
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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)
                    }
                }
            )
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

11.SelectionContainer:

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

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")
        }
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

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

相关阅读:
国内顶尖架构师手撸Vue+SpringBoot神级项目实战手册，GitHub限时开源
 探索 ArrayList 原理 - 第一节 ArrayList 集合底层数据结构
 【Linux operation 55】centos 9 steam 在线安装docker
北理工嵩天Python语言程序设计笔记（6 函数和代码复用）
IDENTITY_INSERT 设置为 OFF 时，不能为表 ‘t_user‘ 中的标识列插入显式值
 Ubuntu——卸载、安装CUDA
学内核之七：问题三，全局变量加锁与每CPU变量
 [Node] Node.js Webpack打包图片-Js-Vue
BI零售数据分析方案，看了就想拥有
 我帮厂商找BUG系列之华大(小华)HC32F460——PWM输出占空比错误与解决方案
原文地址：https://blog.csdn.net/u012556114/article/details/128081287