jetpack compose系列（入门基础案例讲解）

最新推荐文章于 2024-08-03 23:19:11 发布

Android女王

最新推荐文章于 2024-08-03 23:19:11 发布

阅读量423

点赞数

分类专栏： adnroid jetpack jetpack compose 文章标签： android ui java

本文链接：https://blog.csdn.net/m0_56255097/article/details/129283016

版权

adnroid 同时被 3 个专栏收录

39 篇文章 2 订阅

订阅专栏

jetpack

13 篇文章 0 订阅

订阅专栏

jetpack compose

4 篇文章 0 订阅

订阅专栏

前言：

在上一章讲完compose的设计原理和基本概念之后，大家对compose的基本设计应该有了一个大概的了解，Jetpack Compose是在2019Google i/O大会上发布的新的库。Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码，

更强大的功能，能提高开发速度（这一段是谷歌自己说的）。说实话，View/Layout的模式对安卓工程师来说太过于熟悉，对于学习曲线陡峭的Jetpack Compose能不能学会还是有所担心，所以这一篇我们再来讲一些基本案例来为大家加深理解。

1. 教程

1.1 创建新的项目或导入库

Jetpack Compose是从Android Studio 4.2开始支持的，所以需要通过4.2(现在是canary版本)创建新的项目或者添加导入库。这里按照创建新的项目来进行介绍。

根据上图所示，在创建新的项目时需要选择Empty Compose Activity。

此时模块中的build.gradle文件会新增下列的库的依赖。

`dependencies {     ...     implementation 'androidx.ui:ui-layout:"${compose_version}"'     implementation 'androidx.ui:ui-material:"${compose_version}"'     implementation 'androidx.ui:ui-tooling:"${compose_version}"'     ... }`

还有在模块的build.gradle文件中新增下列的设置。

`android {     ...          buildFeatures {         compose true     }          composeOptions {         kotlinCompilerExtensionVersion "${compose_version}"          kotlinCompilerVersion "1.3.70-dev-withExperimentalGoogleExtensions-20200424"     } }`

1.2 UI相关

1.2.1 @Compose

所有关于构建View的方法都必须添加@Compose的注解才可以。并且@Compose跟协程的Suspend的使用方法比较类似,被@Compose的注解的方法只能在同样被@Comopse注解的方法中才能被调用。

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

1.2.2 @Preview

加上@Preview注解的方法可以在不运行App的情况下就可以确认布局的情况。

@Preview的注解中比较常用的参数如下：

name: String: 为该Preview命名，该名字会在布局预览中显示。
showBackground: Boolean: 是否显示背景，true为显示。
backgroundColor: Long: 设置背景的颜色。
showDecoration: Boolean: 是否显示Statusbar和Toolbar，true为显示。
group: String: 为该Preview设置group名字，可以在UI中以group为单位显示。
fontScale: Float: 可以在预览中对字体放大，范围是从0.01。
widthDp: Int: 在Compose中渲染的最大宽度，单位为dp。
heightDp: Int: 在Compose中渲染的最大高度，单位为dp。

上面的参数都是可选参数，还有像背景设置等的参数并不是对实际的App进行设置，只是对Preview中的背景进行设置，为了更容易看清布局。

`@Preview(showBackground = true, name = "Home UI", showDecoration = true) @Composable fun DefaultPreview() {     MyApplicationTheme {         Greeting("Android")     } }`

在IDE的右上角有Code，Split,Design三个选项。分别是只显示代码，同时显示代码和布局和只显示布局。
当更改跟UI相关的代码时，会显示如下图的一个横条通知，点击Build&Refresh即可更新显示所更改代码的UI。

1.2.3 setContent

setContent的作用是和zaiLayout/View中的setContentView是一样的。
setContent的方法也是有@Compose注解的方法。所以，在setContent中写入关于UI的@Compopse方法，即可在Activity中显示。

    `override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContent {             JetpackComposeDemoTheme {                 Greeting("Android")             }         }     }`

上面我们讲了一些@Compose@preview等方法，现在我们再来讲讲一些组件的应用