预览函数@Preview注解

有些时候，我们希望，不需要真机运行，甚至不需要模拟器运行，就希望直接能在IDE中看到我们的APP页面是怎么样的，这个时候Android studio提供了一个功能给我们，你可以写一个函数，然后增加一个@Preview标注，那么就可以直接在Android Studio中看到你的APP的页面长得怎么样了。不需要运行起来。类似于微软的XAML可视化设计这类语言。

@Preview 注解允许您在  Android Studio 中预览可组合函数，而无需构建并将应用安装到  Android 设备或模拟器上。该注解必须用在不带参数的可组合函数上。

上面是官方解析。

因为预览函数是不能带有参数传入的，因为预览函数是android studio调用的，不是app运行时调用的，它目的是方便程序员开发过程用来看的，真正生产环境是不会执行的，由于是为了给android studio调用，所以就不能有参数了，所以你要显示的预览内容就需要您自己在函数中写好了。

我们上节课的MessageCard 函数是带参数的，因此就不能把它标注为@Preview预览函数了，我们可以复制一个MessageCard 出来，然后标注为@Preview函数的。

先看下面的MessageCard函数，它是由参数的。

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

复制一份MessageCard出来，改名为PreviewMessageCard，然后去掉参数部分name: String，没有参数后，我们可以直接调用MessageCard，然后传入一个我们写死的字符串”Android”，注意哦PreviewMessageCard里面就不需要再调用Text了，可以直接调用生产环境运行的MessageCard函数了。

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}Code language: CSS (css)

复制一个MessageCard 后，要改名为PreviewMessageCard，因为kotlin是不允许同名同参的函数的，这是语言限制。然后在PreviewMessageCard函数里面，我们就不能用name了

相当于PreviewMessageCard是一个预览函数入口，我们在android studio中立即可以看到效果的。

以上界面看到的不是模拟器也不是真机。

PreviewMessageCard 也需要@Composable标注，因为它要调用MessageCard，还记得前面说的，@Composable是一个门派的函数，只有内部可以互相调用。