Jetpack Compose 使用入门

让开发者能够简洁且直观地描述 UI 界面，摆脱了传统命令式开发的繁琐与复杂。通过状态驱动机制，实现了 UI 与数据的紧密关联，数据变化自动引发 UI 高效更新。在布局方面，丰富多样的布局容器如 Column 和 Row 以及灵活的修饰符，能够轻松构建出美观且高效的界面布局，有效解决了传统布局层级过深的困扰。同时，Jetpack Compose 具备强大的实时预览功能，极大地提升了开发效率，并且与其他 Jetpack 库及 Android 架构组件无缝衔接，无论是新应用的开发，还是对现有应用的现代化改造，都提供了便捷、高效且具有前瞻性的解决方案，有力推动了 Android UI 开发向更简洁、灵活与智能的方向迈进。

1.使用Jetpack Compose的好处

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它较于之前的一些使用方法，使用了更少的代码、强大的工具和直观的 Kotlin API，可以帮助我们用户简化并加快 Android 界面开发，编写更精细的应用。同时，对于我们构建 Android 界面也大大提高了速度。

1.1简洁的代码结构

Jetpack Compose 的代码具有很高的可读性和可维护性。因为其采用了声明式语法，UI 的描述也会更加直观，开发者可以快速理解界面的构成和逻辑。同时代码的复用性也得到了极大提升，比如自定义的 UI 组件可以轻松地在不同地方使用，只需传递不同的参数即可。

1.2实时预览

在开发过程中，Jetpack Compose 提供了强大的实时预览功能。开发者可以在 Android Studio 中即时看到代码更改对 UI 界面从而产生的结果效果，无需重新编译和运行整个应用程序。这减少了反复调试的时间，大大提高了开发效率。

1.3减少布局层级

传统的 XML 布局在构建复杂界面时比较容易出现嵌套层级过深的问题，这不仅会影响性能，还会导致代码可读性变差。而Jetpack Compose 通过组合不同的 UI 组件来构建界面，可以有效避免过度嵌套，高效、生成更扁平的 UI 结构。

1.4与现有 Android 框架的集成

Jetpack Compose 不是孤立的，它与其他 Jetpack 库（如 ViewModel、LiveData 等）以及 Android 架构组件无缝集成。这使得开发者可以在熟悉的 Android 开发环境和架构下，逐步引入 Compose 进行 UI 开发，降低了迁移成本和学习。

2.Compose的编程思想

Jetpack Compose 是一个针对 Android 的新型声明式界面工具包，Compose提供声明性 API，使其能够在不采用命令式方法直接操作前端视图的情况下构建应用界面，从而简化了界面的编写与维护过程。

2.1声明性编程范式

Jetpack Compose 采用的是声明式编程风格。在声明式编程中，开发者只需要描述界面应该呈现的状态。

例如，当使用 Jetpack Compose 创建一个文本输入框时，开发者只需要声明这个输入框的属性，如文本内容、提示信息等，而不需要像在传统的 XML 布局中那样通过一系列的步骤来设置和布局这个输入框。这种方式使得代码更加简洁、易读，并且更容易维护。

2.2简单的可组合函数

利用 Compose，我们可以通过定义一系列接收数据并生成界面组件的可组合函数来构建界面。一个基本示例是 Greeting 小部件，它接收一个 String 类型的数据，并生成一个展示问候语的 Text 小部件。

2.3声明性范式转变

在 Compose 编程中，声明性范式转变意味着从传统的命令式界面构建方式转变为声明式界面构建方式。命令式界面构建通常涉及直接操作界面元素（如 widgets）的状态，而声明式界面构建则通过定义一组可组合函数（@Composable 函数）来描述界面，这些函数接收数据并生成相应的界面元素。

简单示例：

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

@Composable
fun App() {
    var name by remember { mutableStateOf("World") }
    Column {
        Greeting(name)
        Button(onClick = { name = "Android" }) {
            Text("Change Name")
        }
    }
}

在这个示例中，Greeting 是一个可组合函数，它接收一个 name 字符串并显示一个问候消息。App 函数是应用的顶级可组合函数，它定义了应用的界面结构。当用户点击按钮时，会触发 onClick 事件，该事件更改 name 变量的值。由于 name 是一个可变状态，因此 Compose 框架将自动重新调用 Greeting 函数来更新界面上的问候消息。

2.4动态内容

由于可组合函数是用 Kotlin 而不是 XML 编写的，因此它们可以像其他任何 Kotlin 代码一样动态。例如，假设我们想要构建一个界面，用来问候一些用户：

@Composable
fun Greeting(names: List<String>) {
    for (name in names) {
        Text("Hello $name")
    }
}

此函数接受名称的列表，并为每个用户生成一句问候语。

2.5重组

重组是指在数据发生变化时，重新运行可组合项（@Composable函数）以更新界面的过程。

重组的触发主要依赖于状态的变化。在Compose中，状态是通过可变对象（如MutableState）或可观察类型（如State、LiveData、Flow等）来表示的。当这些状态的值发生变化时，Compose会检测到这些变化，并触发相关可组合函数的重新调用。

示例：

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

@Composable
fun Demo() {
    var name by remember { mutableStateOf("World") }
    Column {
        Greeting(name = name)
        Button(onClick = { name = "Android" }) {
            Text(text = "Change Name")
        }
    }
}

Greeting函数是一个可组合函数，它接受一个String类型的参数name，并显示一个包含问候语的Text组件。Demo函数则包含了Greeting函数和一个Button组件。当用户点击按钮时，name状态的值会发生变化，从而触发Greeting函数的重新调用和界面的更新。

3.Compose 布局基础知识

Jetpack Compose 可以让我们更轻松地设计和构建应用的界面。

布局系统的 Jetpack Compose 实现有两个主要目标：实现高性能；让开发者能够轻松编写自定义布局。

3.1可组合函数（Composable Functions）

在 Jetpack Compose 中，一切从可组合函数开始。可组合函数是构建 UI 的基本单元，它们使用@Composable注解标记。这些函数接收参数，并返回一个 UI 元素树，用于描述 UI 的一部分。

示例：

import androidx.compose.foundation.layout.Column
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

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

这个Greeting函数就是一个可组合函数，它接受一个name参数，并在Column（垂直排列的布局容器）中显示一个包含问候语的Text组件。

3.2布局容器

Column：用于垂直排列子元素。例如，构建一个简单的登录表单布局可以这样使用Column：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable

@Composable
fun LoginForm() {
    Column {
        TextField(
            value = "",
            onValueChange = { },
            label = { Text("Username") }
        )
        TextField(
            value = "",
            onValueChange = { },
            label = { Text("Password") }
        )
        Button(
            onClick = { /* 登录逻辑 */ },
            content = { Text("Login") }
        )
    }
}

在这个LoginForm函数中，Column按照垂直方向依次排列了两个TextField（用于输入用户名和密码）和一个Button（用于登录操作）。

Row：与Column相反，Row用于水平排列子元素。比如，创建一个包含图标和文本的水平布局：

import androidx.compose.foundation.layout.Row
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.runtime.Composable

@Composable
fun EmailRow() {
    Row {
        Icon(
            imageVector = Icons.Filled.Email,
            contentDescription = "Email Icon"
        )
        Text(text = "example@email.com")
    }
}

这里的Row将Icon（图标）和Text（文本）水平排列在一起。

3.3布局修饰符

大小修饰符：fillMaxWidth和fillMaxHeight用于让元素填充父布局的宽度和高度。例如，让一个按钮占据整个屏幕宽度：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun FullWidthButton() {
    Column {
        Button(
            onClick = { /* 按钮点击逻辑 */ },
            content = { Text("Full Width Button") },
            modifier = fillMaxWidth()
        )
    }
}

还可以使用width和height来指定精确的尺寸。比如，创建一个固定大小的正方形Box（简单的容器）：

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SquareBox() {
    Box(
        modifier = width(100.dp).height(100.dp)
    ) {
        Text(text = "Square")
    }
}

padding用于在元素周围添加间距。例如，给一个文本添加内边距：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp

@Composable
fun PaddedText() {
    Column {
        Text(
            text = "Padded Text",
            modifier = padding(16.dp)
        )
    }
}

3.4嵌套布局

可以在布局容器中嵌套其他布局容器来构建复杂的布局。例如，创建一个带有标题和内容的卡片布局，其中标题和内容都有自己的布局：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp

@Composable
fun CardWithTitleAndContent() {
    Card(
        modifier = fillMaxWidth().padding(8.dp)
    ) {
        Column {
            Text(
                text = "Card Title",
                modifier = fillMaxWidth().padding(8.dp),
                style = TextStyle(fontWeight = FontWeight.Bold)
            )
            Text(
                text = "Card Content",
                modifier = fillMaxWidth().padding(8.dp)
            )
        }
    }
}

在这个例子中，Card作为外层容器，内部有一个Column，Column中又包含了两个Text组件，分别用于显示标题和内容，并且通过padding和fillMaxWidth等修饰符来调整布局和间距。

4.总结

Jetpack Compose 作为 Android 开发领域极具创新性的 UI 工具包，为开发者开启了全新的界面构建之旅。其以可组合函数为基石，借助声明式编程风格，让开发者能够简洁且直观地描述 UI 界面，摆脱了传统命令式开发的繁琐与复杂。通过状态驱动机制，实现了 UI 与数据的紧密关联，数据变化自动引发 UI 高效更新。在布局方面，丰富多样的布局容器如 Column 和 Row 以及灵活的修饰符，能够轻松构建出美观且高效的界面布局，有效解决了传统布局层级过深的困扰。同时，Jetpack Compose 具备强大的实时预览功能，极大地提升了开发效率，并且与其他 Jetpack 库及 Android 架构组件无缝衔接，无论是新应用的开发，还是对现有应用的现代化改造，都提供了便捷、高效且具有前瞻性的解决方案，有力推动了 Android UI 开发向更简洁、灵活与智能的方向迈进。

2022级软工一班——万鸣宏远
https://blog.csdn.net/m0_74444166/article/details/144391403?spm=1001.2014.3001.5501