Android Jetpack Compose 可组合函数 @Composable

更新日期: 2021-01-17 阅读次数: 5587 字数: 287 分类: Android

Android Jetpack Compose 里可组合函数这个名字太唬人,一眼看上去,一头雾水。

Composable 的英文翻译

可组合函数,英文原文为 Composable Function。

我一直以为 Compose 只有“写作”的意思,原来其还有“组成”的意思。所以,Composable 可以翻译为“可组合”。

可组合函数的功能

代码中定义 APP 的 UI。

可组合函数的定义

函数前,加上注解 @Composable。例如,使用 Android Studio 中自带的 Empty Compose Activity template 创建的 App,自带一个可组合函数 Greeting。

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

其定义了一个文本组件。

如何预览

Android Jetpack Compose 一个吸引我的地方是,可以不用启动模拟器就能预览 UI 组件。

方法是,在需要预览的 Composable Function 前加上注解 @Preview。

注意,对于需要传递参数的 Composable Function,需要封装一层,改成无参数化之后,才能预览。例如:

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Zhongwei Sun")
}

添加 @Preview 之后,代码编辑区域右侧会自动出现预览区域。如图:

Android Jetpack Compose Preview

点击刷新图标,可以更新改动。

参考

  • https://developer.android.com/jetpack/compose/tutorial

tags: Jetpack Compose

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

谈笑风生

Android Jetpack Compose 的简单入门使用方法,或指南有吗?谢谢

大象

看官方的示例就可以 :)