美文网首页
Compose Text

Compose Text

作者: 侦探小柯南 | 来源:发表于2021-01-31 17:27 被阅读0次

Text

Compose 中的Text ,对标TextView

Text属性列表

属性 作用 示例
text 文本内容 "普通文本"
fontSize 字体大小 20.sp
fontFamily 字体 FontFamily.SasSerif
fontStyle 字体样式 FontStyle.Italic(斜体)
fontWeight 字体粗细 FontWeight.Medium
letterSpacing 字符间距 TextUnit.Sp(10)
textAlign text显示样式 TextAlign.Justify(拉伸填充整个容器)
maxLines 最大显示行数 10
textDecoration 划线样式 TextDecoration.Underline(下划线),TextDecoration.LineThrough(中划线)
style text样式 TextStyle.Default
onTextLayout 文本计算完成回调 {}
overflow 文本溢出样式 TextOverflow.Ellipsis

上述属性中text除了可以直接设置一个字符串,还可以通过AnnotatedString类来进行构建文本内容实现一个Text中显示不同大小字体和不同颜色的文本

AnnotatedString代码示例:

AnnotatedString.Builder().run {
                pushStyle(
                    SpanStyle(
                        color = Color.Blue,
                        fontSize = 30.sp,
                        fontStyle = FontStyle.Italic,
                        fontFamily = FontFamily.Cursive
                    )
                )
                append("四大名著")
                pop()//取消上面修改的样式对下文本的影响
                append("水浒传")
                append("三国演义")
                append("红楼梦")
                append("西游记")
                toAnnotatedString()
            }

Text 代码示例:

class TextActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ShowText()
        }
    }

    @Composable
    fun ShowText() {
        Text(
            fontStyle = FontStyle.Italic,//设置字体 Normal 是正常,Italic 斜体
            text = AnnotatedString.Builder().run {
                pushStyle(
                    SpanStyle(
                        color = Color.Blue,
                        fontSize = 30.sp,
                        fontStyle = FontStyle.Italic,
                        fontFamily = FontFamily.Cursive
                    )
                )
                append("四大名著")
                pop()//取消上面修改的样式对下文本的影响
                append("水浒传")
                append("三国演义")
                append("红楼梦")
                append("西游记")
                toAnnotatedString()
            }, //显示的内容
            color = Color.Yellow,   //text颜色
            modifier = Modifier
                .padding(10.dp)
                .fillMaxWidth()
                .height(100.dp)
                .background(color = Color.Red)
                .alpha(1f)
                .clickable(onClick = {
                    toast("hello")
                }),
            fontSize = 20.sp,//字体大小
            fontFamily = FontFamily.SansSerif,//修改字体
            fontWeight = FontWeight.Medium,//修改字重(字体粗细)
            letterSpacing = TextUnit.Sp(10),//字符间距

            textAlign = TextAlign.Justify,//Justify 拉伸填充整个容器, Start Left 左对齐  End  Right 右对齐
            maxLines = 10,//最大行数
            textDecoration = TextDecoration.Underline,//LineThrough 中间划线 Underline 下划线
            style = TextStyle.Default,//text样式
            onTextLayout = {

            },//计算完成回调

            overflow = TextOverflow.Ellipsis

        )

    }
}

效果展示:

Mi8 屏幕指纹版 MIUI12 稳定版(显示效果符合预期)

device-2021-01-31-172609.png

Mi8 MIUI12 开发版(显示效果FontStyle.Italic,字体倾斜无效)

device-2021-01-31-173046.png

相关文章

  • Compose Text

    Text Compose 中的Text ,对标TextView Text属性列表 属性作用示例text文本内容"普...

  • Compose-Text

    常用属性 属性属性说明text文字内容color文字颜色fontSize文字尺寸fontStyle文字是斜体(It...

  • Compose学习-> Text()

    设置文本:text = xxx 直接设置Text(text = "我是一个Text") 引用资源文件:string...

  • Android Jetpack Compose 之 Text

    官方教程 下载Android Studio Canary版本 环境 添加依赖: androidx.ui.core中...

  • Compose Text文字垂直居中

    需求效果:文本的高度为50dp,并且文字垂直居中 根据需求写出如下代码: Text(text = "你好,世界!"...

  • android Compose 第一个UI DEMO

    Compose UI 尝试 创建一个 demo 效果图 页面主要涉及到的控件Text、BasicTextField...

  • Compose实现一个带复选框的列表

    1、使用compose新建一个列表item布局 item很简单,由复选框Checkbox和文本Text组成,给文本...

  • Android Jetpack Compose 中设置 Text

    在 android 的 Textview 中,可以指定 gravity 属性,以达到如下的效果: 但是在 Comp...

  • Compose开发Text设置斜体没生效

    有时你会发现我明明设置了斜体,怎么没有生效呢?看下可能没生效的代码: 如果你的能斜体,那就不用管了。研究发现fon...

  • charles compose 小坑

    今天第一次使用charles的compose功能,遇到一个小坑,记录一下。 发现报错实际上拷贝以后应该把Text、...

网友评论

      本文标题:Compose Text

      本文链接:https://www.haomeiwen.com/subject/hgsrtltx.html