Jetpack Compose Academy · 课时

编写 @Composable 函数

定义自己的可复用用户界面函数。

编写 @Composable 函数 是 CoddyKit 上的免费 Jetpack Compose Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Jetpack Compose Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Jetpack Compose Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

What You Will Build

In this lesson you will write your own Composable from scratch. By the end, you can describe a piece of UI with a single Kotlin function. 🚀

It Starts With @Composable

A Composable is just a function marked with the @Composable annotation. That tag tells Compose this function emits UI instead of returning a value.

@Composable
fun Greeting() {
    Text("Hello!")
}

Name It Like a Type

Composables that emit UI use PascalCase names, like a class. So you write Greeting, not greeting, to signal it is a UI building block.

They Return Unit

Your Composable does not return a value. It emits UI by calling other Composables inside it, so its return type is simply Unit.

@Composable
fun Welcome() {
    Text("Welcome aboard")
}

Pass Data With Parameters

Make a Composable reusable by adding parameters. Pass in a name and the same function can greet anyone you like.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name)
}

Default Values Help

Give parameters defaults so callers can skip them. Here name defaults to World, so Greeting() still works on its own.

@Composable
fun Greeting(name: String = "World") {
    Text("Hello, " + name)
}

Built-in Composables

You rarely start from nothing. Compose ships ready-made pieces like Text, Button, and Image that you call from inside your own function.

Import What You Use

When you call Text, Android Studio adds an import for androidx.compose.material3.Text. Let the IDE auto-import so you never guess the package.

Keep Functions Small

Each Composable should describe one clear thing. A small focused function is easier to read, reuse, and preview than a giant one.

No Return, Just Calls

Inside a Composable you do not build and return a widget. You simply call other Composables top to bottom, and Compose draws them in order.

@Composable
fun Card() {
    Text("Title")
    Text("Subtitle")
}

It Is Still Kotlin

A Composable is normal Kotlin underneath. You can use variables, conditions, and loops inside it just like any other function.

@Composable
fun Status(online: Boolean) {
    if (online) Text("Online")
    else Text("Offline")
}

Quick Check

Time for a quick check on what defines a Composable.

Recap

You can now write a Composable: tag it with @Composable, name it in PascalCase, take parameters, and call other Composables to emit UI. 🎉

常见问题解答

「编写 @Composable 函数」课时是免费的吗？

是的 — 「编写 @Composable 函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Jetpack Compose Academy 课程的其余内容，请升级到 CoddyKit PRO。 Jetpack Compose Academy 课程共包含 4 节课。

「编写 @Composable 函数」这节课中我会学到什么？

定义自己的可复用用户界面函数。你通过在浏览器中直接运行的动手代码来练习 Jetpack Compose Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Jetpack Compose Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Jetpack Compose Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「编写 @Composable 函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Jetpack Compose Academy 课中编写并运行代码吗？

能。每节 Jetpack Compose Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Jetpack Compose Academy