天天看点

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
           
Jetpack Compose——Text(文本)的使用

设置Text行数及文字溢出

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

多样式配置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")
        })
           
Jetpack Compose——Text(文本)的使用

 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")
                }
            }
        })
           
Jetpack Compose——Text(文本)的使用

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")
            }
        }
           
Jetpack Compose——Text(文本)的使用

 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())
        })
           
Jetpack Compose——Text(文本)的使用

 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")})
           
Jetpack Compose——Text(文本)的使用

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

@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)//设置字体样式为Serif
        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")
        })
        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(文本)的使用

继续阅读