手把手教你写第一个Composable - 第4节手把手教你写第一个Composable - 第4节

认识 Composable 函数

📱 Jetpack Compose

✨ 你即将写出人生第一个 @Composable 函数！就像拿起彩色画笔，在屏幕上画出属于你的UI。轻松、有趣、有逻辑。

📖 1. 什么是 Composable 函数？

Composable 函数 是 Jetpack Compose 中最小的UI构建单元。它是一个用 @Composable 注解标记的普通函数，可以直接描述UI层级，不需要继承或XML布局。

🎯 核心特点

函数名以大写字母开头（命名规范）
接受可选参数，描述UI配置
没有返回值，直接发射UI
支持重组 (Recomposition)
可组合、可复用

🧩 类比积木

就像乐高积木——每个Composable函数是一块积木，通过嵌套、拼接，搭出整个屏幕。而且每块积木都可以独立更新。

🏷️ 2. @Composable 注解的作用

方面	说明
🔖 标记	告诉 Compose 编译器：这个函数是一个UI生成器，需要特殊处理（支持重组、协程等）。
⚙️ 编译器服务	编译器会为 @Composable 函数生成额外的代码，使其可以在组合中高效运行。
🧵 上下文切换	只能在另一个 @Composable 函数或 Composable 作用域内调用（不可在普通函数中直接调用）。
🔄 重组能力	当状态变化时，Compose 可以智能地重新执行部分 Composable 函数，更新UI。

💡 小贴士： 你可以把 @Composable 想象成“魔法注解”——它让普通函数获得绘制UI的超能力。没有它，函数就只是一段普通代码。

📛 3. 函数命名规范

✅ 核心规则：首字母大写（PascalCase）

必须以大写字母开头，如 Greeting()、UserProfile()。
命名应 描述UI内容 或组件用途，例如 LoginButton、MessageCard。
避免使用下划线或小写开头（与普通函数区分）。
如果函数接收参数，参数名使用小驼峰 (camelCase)。
建议加上 名词性前缀，让代码更可读。

✅ 正确示范	❌ 错误示范	备注
`UserAvatar()`	`userAvatar()`	小写开头，不符合规范
`ProfileScreen()`	`profile_screen()`	下划线命名，不推荐
`FancyButton()`	`fancyButton()`	首字母必须大写
`TodoListItem()`	`todoListItem()`	首字母大写，且语义清晰

💻 4. 第一个 Composable 函数

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

@Composable
fun Greeting(name: String) {
    Text(text = "你好，$name！欢迎来到Compose世界 🌍")
}

👉 调用时：Greeting("小明") 就会显示 “你好，小明！欢迎来到Compose世界 🌍”

🧭 Composable 在组合中的角色

📌 本节课核心记忆点

Composable 函数 = 带有 @Composable 注解的函数，直接生成UI。
@Composable 让函数获得重组、上下文感知等超能力。
命名规范：首字母大写 (PascalCase)，描述性名词，如 StudentCard()。
Composable 函数可以互相调用，形成组件树。