安卓中的声明式与命令式UI

每个应用程序背后都有一个UI框架。这些框架在应用程序的创建和性能方面发挥着巨大作用。它们也有不同的操作方式，但可以归纳为两种：declarative 和imperative 。

本文旨在帮助你了解这两种框架，并对Jetpack compose作一个简短的介绍。

命令式用户界面这是最常见的范式。它涉及到应用程序的用户界面有一个单独的原型/模型。这种设计的重点是how ，而不是what 。一个很好的例子是Android的XML布局。我们设计小部件和组件，然后将其渲染给用户看并与之交互。
声明式UI这种模式是一种新兴的趋势，它允许开发者根据收到的数据来设计用户界面。另一方面，这种模式的重点是what 。这种设计模式利用一种编程语言来创建整个应用程序。

有几个声明式UI框架，如Flutter、React native、SwiftUI和Jetpack compose。

Jetpack compose是一个UI工具包，利用声明式UI范式来创建Android应用程序的UI。

让我们来看看Jetpack compose和旧的XML布局系统之间的一些区别。

在命令式的UI系统中，我们有XML文件和Java/Kotlin文件一起工作来实现整个应用程序。然而，在Jetpack compose中，只有一种语言用于一切：Kotlin 。业务逻辑和用户界面是在Kotlin类和文件中创建的。*如果你问我，这很好！*😉

在Jetpack compose之前，主题是在manifest文件中设置的。各种风格属性也是在资源文件夹的XML文件中声明的。你也有Material design类的主题。

Jetpack compose也有一个预先配置的Material设计主题。你可以用更简单的方式来定制这个主题，以满足你自己的需求。它提供了形状、排版和颜色等属性，在MaterialTheme composable。

在命令式UI中，状态管理并不像声明式UI那样容易。由于用户界面是用小部件树来创建的，随着树的增长，它变得更容易出错。为了反映数据的变化，你必须通过widget树来找到要更新的特定widget。每个小部件都为我们提供了获取器和设置器来操作视图。这将最终改变树的状态。

然而，有了Jetpack compose，因为我们更关注数据，所以更容易做出改变。该框架检查需要改变的任何元素，并通过recompositon 来应用所需的效果。这导致了一种更好的状态管理方式。

由于Jetpack compose使用了Kotlin，它可以使用它的强大的功能库。你可以利用控制结构来操纵用户界面的绘制。这使得你的用户界面与使用XML布局的用户界面相比更加动态。

注意：在写这篇文章的时候，Jetpack compose只能在Android Studio Canary版本中使用。这是因为Jetpack compose仍处于测试阶段。

在Jetpack compose中，我们在很大程度上依靠composables来创建用户界面。一个可组合的函数是一个普通的kotlin函数，它被注解为@Composable 注解。这个函数没有一个返回值。它的内容在渲染时被添加到屏幕上。

你可以创建你自己的可组合函数，并利用所提供的可组合函数来创建各种UI组件。我们将看一下一些最常见的组件。

首先，我们的活动类必须扩展ComponentActivity ，因为从版本beta-01 。然后，我们使用setContent 函数来开始创建我们的可组合物并将它们加载到屏幕上。

我已经创建了一个名为EatsTheme 的自定义主题，它重写了一些Material主题的属性，为应用程序提供了它自己的特殊主题。

component

然后，我们创建了一个名为Screen 的可组合物，它将容纳这个屏幕的所有其他可组合物。

composable

可组合：这个注解表示该函数被用来创建一个UI元素，即一个可组合。
列和行：列是一个可组合的元素，用于以垂直方式排列项目。它的行为与LinearLayout ，但在垂直方向上是一样的。Row 与Column 相反。它以水平方向安排项目。
修改器：这个对象被用来为我们的可组合物定义属性。它利用构建器模式来设置属性。这意味着变化是按照它们在修改器对象中设置的顺序来应用的。这应该是使用修改器类时的一个重要考虑。
文本：就像它的名字一样，它被用来添加一个基于文本的UI元素。
样式：Jetpack compose允许我们为整个应用程序设置自定义主题和样式。我们可以通过覆盖默认的MaterialTheme 样式来改变样式。
LazyColumn & LazyRow：这些组件相当于Jetpack compose中的recyclerView。它们是可滚动的，并且只在项目在屏幕上可见时才构成视图。

有了这一小段代码，产生的用户界面如下所示。

layout

一个更复杂的用户界面就像下面这个。

complex

这就是老式的命令式编程和声明式UI之间的区别。你现在应该更深入地学习如何使用声明式格式，因为它更灵活，更容易使用。

学习安卓中的声明式与命令式UI