1. 基础文本组件展示

Text 组件参数与显示效果对照

Text 是 Compose 中最基础的文本显示组件，其核心参数直接决定文本在屏幕上的视觉呈现。下面通过一个可运行的示例，展示 fontSize、color、fontWeight、textAlign 四个参数对显示效果的影响。

完整示例代码

以下代码定义了一个可组合函数，依次展示不同参数组合下的 Text 效果。每个 Text 上方用注释标明当前参数值，便于对照观察。

@Composable
fun BasicTextDemo() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        // 默认参数
        Text(text = "默认样式：16.sp / 黑色 / Normal / Start")

        // 字号对比
        Text(
            text = "字号 28.sp",
            fontSize = 28.sp
        )

        // 颜色 + 字号
        Text(
            text = "蓝色 20.sp",
            fontSize = 20.sp,
            color = Color(0xFF1E88E5)
        )

        // 字体粗细
        Text(
            text = "加粗 Bold 18.sp",
            fontSize = 18.sp,
            fontWeight = FontWeight.Bold
        )

        // 对齐方式：需要容器有明确宽度才能观察到对齐差异
        Text(
            text = "居中对齐 Center",
            fontSize = 16.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )

        Text(
            text = "右对齐 End",
            fontSize = 16.sp,
            textAlign = TextAlign.End,
            modifier = Modifier.fillMaxWidth()
        )

        // 组合参数
        Text(
            text = "组合：24.sp / 紫色 / Bold / Center",
            fontSize = 24.sp,
            color = Color(0xFF7C3AED),
            fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

关键参数说明