【Compose multiplatform教程08】【组件】Text组件

查看全部组件https://blog.csdn.net/b275518834/article/details/144751353

Text

  • 功能说明:用于在界面上显示文本内容,支持设置字体、大小、颜色、样式(如加粗、斜体、下划线)等属性,满足不同的文本展示需求,可传达各种信息给用户。
Kotlin 复制代码
@Composable
fun TextExample() {
    Column {
        // 基本文本显示,设置字体大小、颜色、字体样式
        Text(
            text = "这是一段普通文本",
            fontSize = 16.sp,
            color = Color.Black,
            fontFamily = FontFamily.Serif,
            modifier = Modifier
        )

        // 加粗文本
        Text(
            text = "这是加粗文本",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            color = Color.DarkGray,
            modifier = Modifier
        )

        // 带有下划线的文本
        Text(
            text = "这是带有下划线的文本",
            textDecoration = TextDecoration.Underline,
            fontSize = 14.sp,
            color = Color.Blue,
            modifier = Modifier
        )

        // 自定义复合样式文本,部分加粗、部分颜色不同
        val annotatedText = buildAnnotatedString {
            append("这段文本中,")
            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
                append("加粗部分")
            }
            append(" 和其他部分有不同样式,")
            withStyle(style = SpanStyle(color = Color.Green)) {
                append("绿色部分")
            }
            append(" 组合展示。")
        }
        Text(
            text = annotatedText,
            fontSize = 16.sp,
            modifier = Modifier
        )

        // 文本对齐方式设置
        Text(
            text = "这是居中对齐的文本",
            textAlign = TextAlign.Center,
            fontSize = 20.sp,
            color = Color.Red,
            modifier = Modifier
        )

        // 动态设置字体大小单位
        val dynamicSize: TextUnit = 22.sp
        Text(
            text = "根据变量设置字体大小的文本",
            fontSize = dynamicSize,
            color = Color.Magenta,
            modifier = Modifier
        )
    }
}
相关推荐
杉氧7 小时前
深入理解 Compose 重组机制:快照系统如何驱动 UI 精准刷新?
android·架构·android jetpack
远航_7 小时前
OpenSpec 完整详细介绍
前端·后端
召钱熏7 小时前
状态枚举正确≠渲染正确:一个语音按钮的状态机边界修复实录
android·前端
SkyWalking中文站7 小时前
认识 Horizon UI · 1/17:SkyWalking 新一代可观测性控制台
运维·前端·监控
cidy_987 小时前
Dify 操作教程:工作流编排 & Chat 对话编排
前端·工作流引擎
tangdou3690986557 小时前
AI真好玩系列-2分钟快速了解DeepAgents | Quick Guide to DeepAgents in 2 Minutes
前端·javascript·后端
小四的小六7 小时前
AI Agent效果评测实战——搭完Agent才是噩梦的开始
前端
梨子同志7 小时前
JavaScript
前端
彭于晏爱编程7 小时前
纯 JS + Node,一个下午手搓了能读懂公司代码的 AI 助手,老板以为我转行了
前端·javascript
像我这样帅的人丶你还8 小时前
Java 后端详解(五):Redis 缓存
java·后端·全栈