Android Jetpack Compose 使用入门(一 可组合函数)

首先我们来个问题是Android Jetpack Compose?

答案:Jetpack Compose 是用于构建原生 Android 界面的新工具包。Jetpack Compose 使用更少的代码、强大的工具和直观的 Kotlin API 简化并加快了 Android 上的界面开发。

环境部署将 Android Studio 与 Jetpack Compose 配合使用

有别与正常Android studio版本,这一版比较特殊需要安装特别版本下载如下:https://developer.android.google.cn/studio/preview

安装之后启动页面大如下: 

创建支持 Jetpack Compose 的新应用

如果您想要创建一个默认支持 Jetpack Compose 的新项目,Android Studio 提供了新项目模板来帮助您入手。如需创建支持 Jetpack Compose 的新项目,请按以下步骤操作:

  1. 如果您位于 Welcome to Android Studio 窗口中,请点击 Start a new Android Studio project。如果您已打开 Android Studio 项目,请从菜单栏中依次选择 File > New > New Project
  2. 在 Select a Project Template 窗口中,选择 Empty Compose Activity,然后点击 Next
  3. 在 Configure your project 窗口中,执行以下操作:
    1. 按照常规方法设置 NamePackage name 和 Save location
    2. 请注意,在 Language 下拉菜单中,Kotlin 是唯一可用的选项,因为 Jetpack Compose 仅适用于使用 Kotlin 编写的类。
    3. 在 Minimum API level dropdown 菜单中,选择 API 级别 21 或更高级别。
  4. 点击 Finish
  5. 根据配置 Gradle 中所述的方法,验证项目的 build.gradle 文件配置是否正确。

开始学习(一)

在本教程中,您将使用声明性的函数构建一个简单的界面组件。您无需修改任何 XML 布局,也不需要直接创建界面微件,而只需要调用 Jetpack Compose 函数来声明您想要的元素,Compose 编译器即会完成后面的所有工作。

第 1 课:可组合函数

Jetpack Compose 是围绕可组合函数构建的。这些函数可让您以编程方式定义应用界面,只需描述应用界面的形状和数据依赖关系,而不必关注界面的构建过程。如需创建可组合函数,只需将 @Composable 注释添加到函数名称中即可。

添加文本元素

首先,按照 Jetpack Compose 设置说明操作,使用 Empty Compose Activity 模板创建一个应用。默认模板已包含一些 Compose 元素,但我们下面要逐步进行构建。首先,删除“Greeting”和“Default Preview”函数,然后从 MainActivity 中删除 setContent 块,将该 Activity 留空。编译并运行您的空白应用。

现在,向空白的 Activity 中添加文本元素。可以通过定义内容块并调用 Text() 函数来实现此目的。

setContent 块定义了 Activity 的布局。我们不使用 XML 文件来定义布局内容,而是调用可组合函数。Jetpack Compose 使用自定义 Kotlin 编译器插件将这些可组合函数转换为应用的界面元素。例如,Compose 界面库定义了 Text() 函数;您可以调用该函数在应用中声明文本元素。

定义可组合函数

可组合函数只能在其他可组合函数的范围内调用。要使函数成为可组合函数,请添加 @Composable 注释。如需尝试此操作,请定义一个 Greeting() 函数并向其传递一个名称,然后该函数就会使用该名称配置文本元素。

在 Android Studio 中预览函数

当前的 Canary 版 Android Studio 允许您在 IDE 中预览可组合函数,而无需将应用下载到 Android 设备或模拟器中。主要限制在于,可组合函数不能接受任何参数。因此,您无法直接预览 Greeting() 函数,而是需要创建另一个名为 PreviewGreeting() 的函数,由该函数使用适当的参数调用 Greeting()。请在 @Composable 上方添加 @Preview 注释。

重新构建您的项目。由于新的 previewGreeting() 函数未在任何位置受到调用,因此应用本身不会更改,但 Android Studio 会添加一个预览窗口。此窗口会显示由标有 @Preview 注释的可组合函数创建的界面元素的预览。任何时候,如需更新预览,请点击预览窗口顶部的刷新按钮。

以上就是入门第一课先试试看吧!先把环境装起来成功了80%,然后安装文中提供内容敲一下代码看看运行效果,感受一下,Google之后技术发展方向和思路;其实和React最新版本很像都是响应式编程或反应式编程;这可能是未来的一种趋势,大家赶紧学习起来;有条件的可以看谷歌官网原地址:https://developer.android.google.cn/jetpack/compose/setup

喜欢的可以关注微信公众号,哪里也会不定期更新 欢迎订阅
这里写图片描述

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值