当前位置： 首页 > news >正文

Jetpack Compose基础组件之 — Text

news 2025/6/29 8:52:58

Text的源码参数预览

@Composable
fun Text(text: String,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,onTextLayout: (TextLayoutResult) -> Unit = {},style: TextStyle = LocalTextStyle.current
)

Text 是 Compose 中最基本的布局组件，它可以显示文字

@Composable
fun TextScreen() {   Text("Hello World")
}

从 res 中加载文字

@Composable 
fun TextScreen() {    Text(stringResource(id = R.string.content))
}
<resources>
<string name="app_name">examples</string>    
<string name="content">桃之夭夭，灼灼其华。之子于归，宜其室家。</string></resources>

style 参数

style 参数可以帮助我们配置文本的行高，颜色，粗体等设置。

Compose 中内置的 MaterialTheme主题 已经为我们准备了一些设计

@Composable
fun TextScreen() {Column{Text(text = "Hello World Title",style = MaterialTheme.typography.headlineLarge)Text(text ="Hello World Subtitle",style = MaterialTheme.typography.bodyLarge)}
}@Preview(showBackground = true)
@Composable
fun TextScreenPreview() {TextScreen()
}

文字间距

@Composable
fun TextScreen() {Column(modifier = Modifier.fillMaxWidth(),horizontalAlignment = Alignment.CenterHorizontally) {Text(text = "Hello World Title",style = TextStyle(fontWeight = FontWeight.W900,fontSize = 20.sp,letterSpacing = 17.sp // 文字间距))}
}

maxLines 参数

使用 maxLines 参数可以帮助我们将文本限制在指定的行数之间，如果文本足够短则不会生效，

如果文本超过 maxLines 所规定的行数，则会进行截断

@Composable
fun TextScreen() {Column {Text(text = "Hello World Title, Hello World Title,Hello World Title,Hello World Title,Hello World Title",style = MaterialTheme.typography.headlineLarge,maxLines = 1, // maxLines)Text(text = "Hello World Subtitle", style = MaterialTheme.typography.bodyLarge)}
}

overflow 处理溢出

使用 overflow 参数可以帮助我们处理溢出的视觉效果

@Composable
fun TextScreen() {Column {Text(text = "Hello World Title, Hello World Title,Hello World Title,Hello World Title,Hello World Title",style = MaterialTheme.typography.headlineLarge,maxLines = 1, // maxLinesoverflow = TextOverflow.Ellipsis)Text(text = "Hello World Subtitle", style = MaterialTheme.typography.bodyLarge)}
}

总共有四种效果, 效果分别依次对应

textAlign 参数

当我们在 Text 中设置了 fillMaxWidth() 之后，我们可以指定 Text 的对齐方式

@Composable
fun TextScreen1() {Column {Text(text = "Hello World1",modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Left)Text(text = "Hello World2",modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center)Text(text = "Hello World3",modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Right)}
}

lineHeight 参数

使用 lineHeight 参数可以让我们指定 Text 中每行的行高间距

@Composable
fun TextScreen1() {Column {Text(text = "Hello World".repeat(15))Spacer(Modifier.padding(vertical = 15.dp))Text(text ="Hello World".repeat(15), lineHeight = 30.sp)}
}

fontFamily 参数

使用 fontFamily 参数可以让我们自定义字体，它的调用方法是这样的

@Composable
fun TextScreen1() {Column {Text("Hello World", fontFamily = FontFamily.Serif)Text("Hello World", fontFamily = FontFamily.SansSerif)}
}

你也可以加载 res/font 下的字体。

创建一个 font 文件夹可以右键 res 文件夹，选择 Android Resource Directory -> 选择 font

@Composable
fun TextScreen() {Text(text = "Hello World Hello World Hello World Hello World",fontFamily = FontFamily(Font(R.font.pingfang, FontWeight.W700)))
}

可点击的 Text

有的时候也许您需要将文本当作按钮，那么只需要添加 Modifier.clickable 即可

@Composable
fun TextScreen() {Text(text = "Modifier.clickable用于修饰元素可以点击",modifier = Modifier.clickable(onClick = { }))
}

取消点击波纹

但是我们会发现，clickable 有自带的波纹效果，如果我们想要取消的话，只需要添加两个参数即可

@Composable
fun TextScreen1() {val context = LocalContext.currentColumn {Text(text = "Modifier.clickable用于修饰元素可以点击",modifier = Modifier.clickable(onClick = {Toast.makeText(context,"你点击了此文本",Toast.LENGTH_LONG).show()},indication = null,interactionSource = MutableInteractionSource()))}
}

特定的文字显示

如果我们想让一个 Text 语句中使用不同的样式，比如粗体提醒，特殊颜色

则我们需要使用到 buildAnnotatedString

@Composable
fun TextScreen1() {Column(modifier = Modifier.fillMaxWidth(),horizontalAlignment = Alignment.CenterHorizontally) {Text(buildAnnotatedString {append("Hello World 正常文本")withStyle (style = SpanStyle(fontWeight = FontWeight.W900)) { append("加粗文本") }})}
}

文字超链接（ClickableText）

Modifier.Clickable() 无法检测 Text 中的部分点击，那如果我们需要检测一个 Text 中的部分点击事件该怎么办呢？就像我们经常在 App 底下看到的用户协议等

其实很简单，Compose 也给我们准备了 ClickableText，来看看如何使用吧

@Composable
fun TextScreen1() {val text = buildAnnotatedString {append("勾选即代表同意")withStyle(style = SpanStyle(color = Color(0xFF0E9FF2),fontWeight = FontWeight.Bold)) { append("用户协议") }}ClickableText(text = text, onClick = { offset -> Log.d(TAG, "Hi，你按到了第 $offset 位的文字") })
}

但是...怎么才能检测用户协议这四个字符的点击事件呢？Compose 在 buildAnnotatedString 和 ClickableText 中引入了相应的方法

  • 多了一个 pushStringAnnotation() 方法，它会将给定的注释附加到任何附加的文本上，直到相应的 pop 被调用
  • getStringAnnotations() 方法是查询附加在这个 AnnotatedString 上的字符串注释。注释是附加在 AnnotatedString 上的元数据，例如，在我们的代码中 "tag" 是附加在某个范围上的字符串元数据。注释也与样式一起存储在 Range 中
@Composable
fun TextScreen1() {val annotatedText = buildAnnotatedString {append("勾选即代表同意")pushStringAnnotation(tag = "tag",annotation = "用户协议")withStyle(style = SpanStyle(color = Color(0xFF0E9FF2),fontWeight = FontWeight.Bold)) {append("用户协议")}pop()}ClickableText(text = annotatedText,onClick = { offset ->annotatedText.getStringAnnotations(tag = "tag", start = offset,end = offset).firstOrNull()?.let { annotation ->Log.d(TAG, "你已经点到 ${annotation.item} 啦")}})
}

文字复制

默认情况下 Text 并不能进行复制等操作，我们需要设置 SelectionContainer 来包装 Text

@Composable
fun TextScreen1() {SelectionContainer {Column{Text(text = "你摸鱼",modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Left)Text(text = "我摸鱼",modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center)Text(text = "老板宝马变青桔",modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Right)}}
}

文字强调效果

文字根据不同情况来确定文字的强调程度，以突出重点并体现出视觉上的层次感。

Material Design 建议采用不同的不透明度来传达这些不同的重要程度，你可以通过 LocalContentAlpha 实现此功能。

您可以通过为此 CompositionLocal 提供一个值来为层次结构指定内容 Alpha 值。（CompositionLocal 是一个用于隐式的传递参数的组件）

// 将内部 Text 组件的 alpha 强调程度设置为高
// 注意: MaterialTheme 已经默认将强调程度设置为 high
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high){Text("这里是high强调效果")
}
// 将内部 Text 组件的 alpha 强调程度设置为中
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium){Text("这里是medium强调效果")
}
// 将内部 Text 组件的 alpha 强调程度设置为禁用
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {Text("这里是禁用后的效果")
}

文字水平位置

一般情况下，Text 不会水平居中，如果你在 Row, Column, Box 这些 Composable 里面想要实现居中的效果，你可以在 Text 外围写一个 Box, Row, Column 等, 像这样：

@Composable
fun TextScreen1() {Column {Text("123")Text("456")Box(modifier = Modifier.fillMaxWidth(),contentAlignment = Alignment.Center) {Text("789")}}
}

水平靠左： Alignment.Start

水平靠右： Alignment.End

如果你的 Column 有 Modifier.fillMaxWidth() 的属性或者指定了宽度/大小，那么你可以直接在 Text 里面写 Modifier.align(Alignment.CenterHorizontally) 来让 Text 处于水平居中的位置

Text 的其他用法icon-default.png?t=N7T8https://developer.android.com/jetpack/compose/text

http://www.lryc.cn/news/165998.html

相关文章：

  • 动手学深度学习——Windows下的环境安装流程（一步一步安装，图文并配）
  • 打印日志遇到的问题，logback与zookeeper冲突
  • 【Node.js操作SQLite指南】
  • PyTorch之张量的相关操作大全 -＞（个人学习记录笔记）
  • ChatGPT生成内容很难脱离标准化，不建议用来写留学文书
  • sqlserver @@ROWCOUNT的使用
  • Hbase批量删除数据
  • 飞行动力学 - 第20节-part2-机翼上反及后掠对横向静稳定性的影响 之 基础点摘要
  • 力扣 -- 1218. 最长定差子序列
  • 【程序员装机】在右键菜单中添加Notepad++选项
  • Scrapy的基本介绍、安装及工作流程
  • CMS 三色标记【JVM调优】
  • 使用 CSS 伪类的attr() 展示 tooltip
  • 在命令窗口便捷快速复制输出结果到剪贴板
  • CUDA小白 - NPP(8) 图像处理 Morphological Operations
  • java获取音频,文本准转语音时长
  • 基于串口通讯的多电机控制技术研究
  • 【深入解读Redis系列】（五）Redis中String的认知误区，详解String数据类型
  • 段指导-示例
  • LeetCode 面试题 04.02. 最小高度树
  • 华为云云耀云服务器L实例评测｜初始化centos镜像到安装nginx部署前端vue、react项目
  • python项目制作docker镜像，加装引用模块，部署运行！
  • Redis缓存设计与性能优化
  • 免杀对抗-Python-混淆算法+反序列化-打包生成器-Pyinstall
  • C#__线程池的简单介绍和使用
  • 安全员（岗位职责）
  • unity 使用声网（Agora）实现语音通话
  • vue2.X 中使用 echarts5.4.0实现项目进度甘特图
  • 《PostgreSQL与NoSQL：合作与竞争的关系》
  • 【FAQ】视频监控管理平台/视频汇聚平台EasyCVR安全检查相关问题及解决方法3.0