可组合函数

先看如下代码，我们接着上节课的例子，改造成如下代码

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard("Android")
        }
    }
}

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

  

我们上节课是直接在setContent 中调用Text函数的，但是这节课，我们自定义了一个全局函数，MessageCard这个函数我们标记它为@Composable，那么它就是可组合函数，如果不增加这个标注，则是无法被setContent 调用的， 只有这样，才可以在setContent 里面调用 这个函数传入一个字符串name然后显示一行文本，显示hello xxxx。

理解不难，就是把界面的呈现放到了一个自定义的函数MessageCard里面了。

1. MessageCard 上加 @Composable

@Composable 
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}
Code language: JavaScript (javascript)

这是可组合函数，只有标记 @Composable，才能在其他 @Composable 代码块里调用它。

如果去掉 @Composable，在 setContent {} 里面调用它会直接编译报错。

2. setContent 的 lambda 代码块本身，自带隐式 @Composable 上下文 只要你写在 setContent{} 大括号内，这个代码域就是 Compose 的可组合上下文，可以调用所有 @Composable 函数。

// 没有 @Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!") // 这里直接报错！Text是@Composable，普通函数不能调用它
}Code language: JavaScript (javascript)

规则：只有在 @Composable 函数内部，才能调用另一个 @Composable 函数。这是 Compose 编译器强制检查。

此外，@Composable 函数只能在另一个 @Composable 函数内调用，不能在普通函数（比如 onCreate）直接调用！

也就是@Composable标注的函数，是独立的一个门派，它们只能内部调用其他的@Composable函数，同时他们自己也只能被其他的@Composable调用。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    MessageCard("Android") // 报错！onCreate不是@Composable函数，不能直接调用
    setContent {
        MessageCard("Android") // 可以，大括号内是@Composable上下文
    }
}
Code language: JavaScript (javascript)