Jetpack Compose——Text(文本)的使用

首先来看一些基础的参数：

        Text(text = "hello world", fontSize = 30.sp)//设置字体大小Text(text = stringResource(id = R.string.hello_world),//设置为资源中的文字color = colorResource(id = R.color.purple_500)//设置字体颜色)Text(text = "HelloWorld", fontStyle = FontStyle.Italic)//设置文字斜体Text(text = "Hello World", fontWeight = FontWeight.Bold)//文字粗体Text(text = "Hello World",textAlign = TextAlign.Center,//文字居中对齐modifier = Modifier.width(150.dp)//控件总宽度.background(color = colorResource(id = R.color.teal_200))//控件背景色)Text(text = "HelloWorld", fontFamily = FontFamily.Serif)//设置字体样式为Serif

设置Text行数及文字溢出

        Text("Hello".repeat(50), maxLines = 1)//设置行数上线，超出直接截断Text("Hello".repeat(50),maxLines = 1,//设置最大行数color = colorResource(id = R.color.purple_200),overflow = TextOverflow.Ellipsis//文字溢出，文末显示...)

多样式配置Text：

1,Text中个别文字字体及颜色设置

         Text(buildAnnotatedString {//设置多样式字体withStyle(style = SpanStyle(color = Color.Blue)) {append("H")}append("ello ")withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {append("W")}append("orld")})

2,Text段落样式显示

         Text(buildAnnotatedString {//设置段落样式withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {withStyle(style = SpanStyle(color = Color.Blue)) {append("Hello \n")}withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {append("World")}}})

Text用户精细化互动（长按选择复制）

        SelectionContainer {//用户精细化互动，可以选择复制Text(text = "This text is selectable")}SelectionContainer {//用户精细化互动，可以部分选择复制Column {Text("This text is selectable")Text("This one too")Text("This one as well")DisableSelection {//该部分停用选择功能，无法复制Text("But not this one")Text("Neither this one")}Text("But again, you can select this one")Text("And this one too")}}

Text字符添加点击响应

        val annotatedText = buildAnnotatedString {append("Click ")//设置存放的数据和标签，此处定义的tag要和后面调用的tag保持一致pushStringAnnotation(tag = "URL", annotation = "https://baidu.com")withStyle(style = SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold)) {append("here")}append("--------------------->")//代表设置标签结束，与pushStringAnnotation结合使用pop()}ClickableText(text = annotatedText, onClick = { offset ->//点击文字的下标annotatedText.getStringAnnotations(tag = "URL", start = offset, end = offset)//firstOrNull是找List中的第一个对象,找不到则则返回null.firstOrNull()?.let { annotation ->Log.d("Click URL", annotation.item)}Log.d("Click offset", offset.toString())})

Text修改文字

        var text by remember { mutableStateOf("Hello") }//默认填充样式修改文字TextField(value = text, onValueChange = {text = it},label = { Text("Lable")})//轮廓样式修改文字OutlinedTextField(value = text, onValueChange = {text = it},label = {Text("Lable")})

到这里基本属性就写完了，下面来个大合集：

@Composable
fun testText() {Column(Modifier.padding(20.dp)) {Text(text = "hello world", fontSize = 30.sp)//设置字体大小Text(text = stringResource(id = R.string.hello_world),//设置为资源中的文字color = colorResource(id = R.color.purple_500)//设置字体颜色)Text(text = "HelloWorld", fontStyle = FontStyle.Italic)//设置文字斜体Text(text = "Hello World", fontWeight = FontWeight.Bold)//文字粗体Text(text = "Hello World",textAlign = TextAlign.Center,//文字居中对齐modifier = Modifier.width(150.dp)//控件总宽度.background(color = colorResource(id = R.color.teal_200))//控件背景色)Text(text = "HelloWorld", fontFamily = FontFamily.Serif)//设置字体样式为SerifText(buildAnnotatedString {//设置多样式字体withStyle(style = SpanStyle(color = Color.Blue)) {append("H")}append("ello ")withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {append("W")}append("orld")})Text(buildAnnotatedString {//设置段落样式withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {withStyle(style = SpanStyle(color = Color.Blue)) {append("Hello \n")}withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {append("World")}}})Text("Hello".repeat(50), maxLines = 1)//设置行数上线，超出直接截断Text("Hello".repeat(50),maxLines = 1,//设置最大行数color = colorResource(id = R.color.purple_200),overflow = TextOverflow.Ellipsis//文字溢出，文末显示...)SelectionContainer {//用户精细化互动，可以选择复制Text(text = "This text is selectable")}SelectionContainer {//用户精细化互动，可以部分选择复制Column {Text("This text is selectable")Text("This one too")Text("This one as well")DisableSelection {//该部分停用选择功能，无法复制Text("But not this one")Text("Neither this one")}Text("But again, you can select this one")Text("And this one too")}}val annotatedText = buildAnnotatedString {append("Click ")//设置存放的数据和标签，此处定义的tag要和后面调用的tag保持一致pushStringAnnotation(tag = "URL", annotation = "https://baidu.com")withStyle(style = SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold)) {append("here")}append("--------------------->")//代表设置标签结束，与pushStringAnnotation结合使用pop()}ClickableText(text = annotatedText, onClick = { offset ->//点击文字的下标annotatedText.getStringAnnotations(tag = "URL", start = offset, end = offset)//firstOrNull是找List中的第一个对象,找不到则则返回null.firstOrNull()?.let { annotation ->Log.d("Click URL", annotation.item)}Log.d("Click offset", offset.toString())})var text by remember { mutableStateOf("Hello") }//默认填充样式修改文字TextField(value = text, onValueChange = {text = it},label = { Text("Lable")})//轮廓样式修改文字OutlinedTextField(value = text, onValueChange = {text = it},label = {Text("Lable")})}}

Jetpack Compose——Text(文本)的使用相关推荐

42. Compose1.4 如何在Jetpack Compose中为文本应用描边效果（OpenAi翻译）
探索Jetpack Compose中文本笔画效果的DrawStyle API Jetpack Compose最近为TextStyle增加了很多新的自定义选项,TextStyle.drawStyle就是 ...
Jetpack Compose（一）：Text
前言自从去年参加 Android 官方发起了 Jetpack Compose 的推广活动:Jetpack Compose 开发者挑战赛以后,再未系统的学习过 Jetpack Compose 的内容, ...
安卓开发： Jetpack compose + kotlin 实现俄罗斯方块游戏
文章目录前言俄罗斯方块开发文档 1.摘要 2.开发工具选取 2.1.Compose 的自身优点 2.2.数据驱动界面 3.设计需求 3.1.功能需求 3.1.1.基本游戏功能 3.1.2.拓展功能 ...
详解Jetpack Compose中的Modifier修饰符
前言本文将会介绍Jetpack Compose中的Modifier.在谷歌官方文档中它的描述是这么一句话:Modifier元素是一个有序.不可变的集合,它可以往Jetpack Compose UI元 ...
深入理解 Jetpack Compose 内核：SlotTable 系统
引言 Compose 的绘制有三个阶段,组合 > 布局 > 绘制.后两个过程与传统视图的渲染过程相近,唯独组合是 Compose 所特有的.Compose 通过组合生成渲染树,这是 Com ...
(转)Android Jetpack Compose 最全上手指南
在今年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose是一个声明式的U ...
原创_Android Jetpack Compose 最全上手指南，互联网寒冬公司倒闭后
声明式 UI 框架近年来飞速发展,并且被 Web 开发带向高潮.React 更是为声明式 UI 奠定了坚实基础并一直引领其未来的发展.随后 Flutter 的发布也将声明式 UI 的思想成功带到移动端 ...
原创|Android Jetpack Compose 最全上手指南
在今年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose是一个声明式的U ...
Android Jetpack Compose 最全上手指南 | 开发者说·DTalk
本文原作者: 码农西哥,原文发布于微信公众号: Android 技术杂货铺 https://mp.weixin.qq.com/s/7tKv_RamfW0rG8tZHXH_rg 在 2019 年的 G ...

Jetpack Compose——Text(文本)的使用

Jetpack Compose——Text(文本)的使用相关推荐

最新文章

热门文章