当前位置：首页 > news >正文

Android-Jetpack Compose的简单运用

news 来源：原创 2024/4/25 20:19:21

一.初步认识Jetpack Compose

1.什么是Jetpack Compose

Jetpack Compose 是一个用于构建原生Android UI 的现代化工具包，它基于声明式的编程模型，因此你可以简单地描述UI的外观，而Compose则负责其余的工作-当状态发生改变时，你的UI将自动更新。由于Compose基于Kotlin构建，因此可以与Java编程语言完全互操作，并且可以直接访问所有Android和Jetpack API。

2.它与传统写UI的方式有什么区别

①传统写UI的方式：就是先在建立一个xml文件，在里面写好布局好，再回到Java文件（或者是Kotlin文件）里去把控件实例化出来后，再去调用。

②Compose这个库：或者说它是一个框架，它重新定义了Android UI的写法，不再使用xml文件了，而是直接在Kotlin文件（只支持Kotlin）里，写布局的代码。官方对Compose的评价是“让困难的事情变简单，让不可能的事情变得有可能”。

3.Compose相对于传统的UI写法，它有哪些优势

①它是声明式UI
大家都会把我们以前传统的UI方法，叫做是“命令式UI”，而把compose叫做是“声明式UI”。
compose的优势就在于，它是一个完全的声明式UI，我们只管把界面声明出来后，当数据变化时，我们不用手动去更新，它会自己帮我们更新数据，并显示最新的数据，省去了我们去做界面更新的工作。
传统 UI 能做到的事，Compose 都是可以做到的：比如自定义绘制、自定义布局、自定义触摸，还有动画，Compose 都是可以做到的。

②去掉了xml
这是compose的第二个优势，它抛弃了 xml 的同时还保持了写法的简单，完全解除了混合写法（xml+Java、kotlin）所带来的局限性，让我们写Ui更快速。

4.如何创建一个支持Jetpack Compose的新应用

创建一个支持Jetpack Compose 的应用，如下几个步骤就可以了：

1.如果你在Android Studio的欢迎窗口，点击Start a new Android Studio project，如果你已经打开了Android Studio 项目，则在顶部菜单栏选择File > New > New Project

2.在Select a Project Template 窗口，选择Empty Compose Activity并且点击下一步
在Configure your project 窗口，做如下几步：

a. 设置项目名称, 包名和保存位置

b. 注意，在语言下来菜单中，Kotlin 是唯一一个可选项，因为Jetpack Compose 只能用Kotlin来写的才能运行。

c. Minimum API level 下拉菜单中，选择21或者更高

d.点击Finish

现在，你就可以使用Jetpack Compose 来编写你的应用了。

二.一个Jetpack Compose的简单运用

1.首先创建一个项目

2.使用modifier设置样式，使其填充整个屏幕，然后使用mutableStateOf对状态进行监听，状态变化时触发,初始状态设为false即不显示

 Column(
                    modifier = Modifier.fillMaxSize()
                ) {
                    var isVisible by remember {
                        mutableStateOf(false)
                    }

3.创建一个botton并设置其点击事件

Button(onClick = {
                        isVisible = !isVisible
                    }) {
                        Text(text = "Toggle")
                    }

4.接下来设置淡入的动画，并创建一个红色的box让它单击按钮后填充整一个的屏幕

AnimatedVisibility(
                        visible = isVisible,
                        enter= slideInHorizontally()+ fadeIn(),
                        modifier = Modifier.fillMaxWidth().weight(1f)

                    ) {
                        Box(modifier = Modifier.background(Color.Red))
                    }