开始使用Jetpack Compose

DebugUsery
241 阅读9分钟

在靠近用户的地方部署容器

本工程教育（EngEd）计划由科支持。

在全球范围内即时部署容器。Section是经济实惠、简单而强大的。

免费开始使用。

开始使用Jetpack Compose

2021年7月2日

Jetpack Compose是一个当代的Android工具包，使UI开发更容易。本文将引导你了解你需要的基本概念，以便开始使用这种新的快速开发范式。

Jetpack Compose简介

在写这篇文章的时候，Android的强制性UI设计范式已经超过11年了😱。在这段时间里，人们提出了很多关于其整体性能的问题。Android开发者希望旧的视图系统和XML 布局不再是一个问题。

Jetpack Compose是完全声明式的，这意味着你可以通过调用一组可组合的东西来描述你的用户界面。

为什么要学习Jetpack Compose？

Jetpack Compose有以下好处。

  1. 它的速度非常快，并提供流畅的性能。
  2. 它简单易学。
  3. 可以与命令式方法互通有无。
  4. 提供了一个更好的方式来实现松散耦合原则。
  5. 它是100%由Kotlin制作的，这使得它成为Android开发中的一种现代方法。

先决条件

要完成本教程，你需要具备以下条件。

  • 对Kotlin 编程语言的良好理解。
  • 在你的机器上安装Android StudioCanary 或Beta 版本。

**注意：**在写这篇文章的时候，Compose仍然在Beta ，这意味着它还不能在Android Studio的Stable 频道上使用。

出于这个原因，我们要安装Android Studio 2020.3.1 Beta 4（或更高版本）。Beta版和Canary版都有对Compose的支持。然而，我建议你使用Beta版（来自Arctic Fox发行版），而不是Canary版（Bumblebee），因为我个人使用它时遇到了一些奇怪的错误。

安装Android Studio Beta

(假设你是在Linux或Mac上运行）。

前往官方网站，抓取最新版本的IDE。下载后，解压文件并运行位于/android-studio/bin/studio.sh 的studio.sh 文件。把一切都保持为默认状态，等待它完成。

在Mac上，将解压后的文件~/android-studio 拖到应用程序文件夹中并启动它。对于其他操作系统的用户，请参考本指南以获得进一步指导。

创建一个Compos项目

启动IDE，在新项目面板中选择Empty Compose Activity 模板。给你的项目取任何名字，然后点击下一步/完成。

New Compose Project

新项目结构

一旦构建完成，MainActivity 文件就会打开。这就是我们的应用程序的入口。

解释自动生成的代码

在我们继续之前，最好先了解一下Compose模板所附带的代码。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeTheme {
                Surface(color = MaterialTheme.colors.background) {
                    // Composables are called here
                }
            }
        }
    }
}

MainActivity 类继承自ComponentActivity() ，它是Jetpack Compose组件的一个构建模块。setContent lambda决定了在运行时屏幕上会显示什么。它在调用Composable函数时使用了Material主题（下面讨论）。

可组合函数

可组合函数是一个将数据转换为UI层次的工具。它就像一个普通的Kotlin函数，只是它被注解为@Composable 注解。

语法。

@Composable
fun FunctionName(){
    
}

例子。

@Composable
fun HelloWorld() {
    // body
}

如果需要的话，一个可组合函数可以接受任何类型的参数。注意，该函数的名字是以大写字母开头的。否则，IDE会对你大喊大叫！对同样的情况提出警告。

注意：一个可组合的函数不能在一个不可组合的函数中调用。

当使用接受参数的可合成函数时，建议使用命名参数策略，让编译器知道哪些属性正在被实现，因为我们可能不会使用所有可用的属性。

显示预览

预览给开发者提供了一个线索，让他们了解应用程序在运行时的样子。在compose中，预览是通过用@Preview 注释来创建一个可组合的函数。你可以有你想要的许多预览，特别是当你想在不同的可组合函数中同时测试不同的用户界面组件时。

创建可组合的用户界面元素

UI元素在一个应用程序中起着至关重要的作用。在大多数情况下，用户会根据用户界面的外观给出他们的反馈。Compose有不同的技术来更简洁地创建这些元素。

文本

这是一个内置的可组合函数，可以显示其参数中提供的字符串。

@Composable
fun TextExample(){
    Text(text = "Hello Android")
}

在这里我们可以设置文本属性，如color,font style,fontsize,alignment 等。

Text(text = "Hello Android", color = Color.Blue, textAlign = TextAlign.Center)

除了一个普通的字符串，Text还接受一个经过装饰的字符串，也就是注释的字符串。如下图所示，这是用一个注释生成器完成的。

@Composable
fun AnnotatedString() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Red)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Blue)) {
                append("A")
            }
            append("ndroid")
        }
    )
}

这将产生一个彩色的文本。

重复函数可以用来复制一个文本，而不是创建多个独立的文本。

@Composable
fun RepeatText() {
    Text("Android ".repeat(30), maxLines = 3)
}

这创建了一个文本 "Android "并重复了30次。maxLines 属性决定了一个文本的最大行数，无论重复多少次。

按钮

这是一个可组合的函数，在屏幕上显示一个按钮。遇到一个没有任何按钮的应用程序是很不寻常的!

@Composable
fun ButtonExample(){
    Button(text = “Next”, onClick = {
    // handle a click event here
})
}

一个按钮可以通过添加一个样式作为参数来提升。

Button(style = TextButtonStyle(contentColor = Color.White))

图像

图片是使一个应用程序吸引人的组成部分之一。Compose使用Image 功能和painter （实际的图像资源）来显示图像。

@Composable
fun ImageExample(){
    val painter = painterResource(R.drawable.your_drawable)
    Image(
    painter = painter,
    contentDescription = "image description")
}

DeepL 内容是可选的，但它非常重要，特别是对视障用户。同样，我们可以通过提供参数，如contentScale、modifier等，对图片进行样式设计。点击Command (⌘) +P 来查看所有可能的参数。

文本字段

一个文本字段是用来接受用户输入的。这个输入可以是数字、密码或普通字符串。

@Composable
fun TextFieldExample() {
        var textState by remember { mutableStateOf(TextFieldValue()) }
        TextField(
                value = textState.value,
                onValueChange = { textState.value = it }
        )
}

textState变量是一个记忆状态，意味着它的值在重组过程中被保持。没有它，输入时就不会出现字符。

OutlinedTextField

这是一个高级的TextField，一旦用户开始输入，其标签就会 "跳 "到字段的轮廓上。

@Composable
fun OutlinedTextFieldExample() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

视觉转换决定了TextField的输入类型。例如，为了要求密码输入，我们会使用。

TextField(
    visualTransformation = PasswordVisualTransformation()
    )
    // the same applies to an OutlinedTextField

修改器

一个可组合的外观可以用一个被称为 "修改器 "的属性函数来装饰。任何内置的可组合物都可以使用修改器进行修改。当使用一系列的修改器时，前一个修改器的结果会成为下一个修改器的输入。由于这个原因，我们应该非常重视修改器的顺序。

让我们以一张图片为例。

fun ModifiedImage{
    Image(
        painter = painterResource(R.drawable.your_drawable)
        modifier = Modifier
            .border(3.pd, color = Color.Cyan, shape = CircleShape)
            .padding(2.dp)
            .clip(shape = CircleShape)
    )
}

重复使用修改器

一个修改器可以应用于多个元素的类似修改。这可以通过以下方式实现。

i).将一个修改器作为参数传递给一个可组合的函数

@Composable
fun Example(modifier: Modifier = Modifier){
    // multiple components can use `modifier` argument as their base Modifier
    Image(
        ...
        modifier = modifier
    )
    // a modifier can also be expanded
    Text(
        ...
        modifier = modifier.//a modifying property
    )
}

ii).声明一个修改器变量

@Composable
fun Example(){
    val modifier: Modifier = Modifier
    // 
    Image(
        ...
        modifier = modifier
    )
}

重用可组合函数

一个接受可组合函数作为参数的高阶函数可以用来重复使用其他可组合函数。这有助于使你的代码保持干燥。

调用我们的函数并在其lambda中传递一个可组合函数。

@Composable
fun CallFun(){
    HighOrder{
        ReuseDemo()
    }
}

创建一个高阶函数。

@Composable
fun HighOrder(composeFun: @Composable () -> Unit){

}

创建一个要被重用的函数。

@Composable
fun ReuseDemo(){

}

你可能已经意识到，Compose是建立在这种方法之上的。例如，一个按钮接受onClick lambda，其值是一个函数。

表面

一个表面是一个范围，组件在屏幕上铺设。

@Composable
fun SurfaceDemo(){
    Surface(color = Color.Blue){ // decorate a surface
        // call composable functions here
    }
}

金合欢布局

你可能已经注意到，当你使用一个以上的可组合的用户界面时，这些元素是相互堆叠的组成布局允许我们安排组件相互之间的关系。

行

行是水平放置项目的。一个项目的出现顺序是由它在代码块中的位置决定的。

@Composable
fun RowExample(){
    Row{
        Text(text = "Hello ")
        Text(text = " Jetpack ")
        Text(text = "Compose")
    }
}

列

一列垂直地排列项目。

@Composable
fun RowExample(){
    Column{
        Text(text = "Hello")
        Text(text = "Jetpack")
        Text(text = "Compose")
    }
}
// A layout is also a composable function, so, it can have a modifier that
// applies to all its children.

框

这类似于帝国设计中的框架布局。

@Composable
fun BoxExample(){
    Box{
        // put items here
    }
}

如果你的项目离开了视野，你可以使用Modifier.horizontalScroll 或Modifier.verticalScroll 修改器来启用相应的滚动模式。

状态和智能重构

一个state 是一个有可能随时间变化的值。在构图中，用户界面是不可改变的，因为它只能被完全绘制/构图一次。然而，当用户界面的某些部分的状态发生变化时，compose会重新创建它们。这被称为智能recomposition 。在这个过程中，我们需要持久化我们的状态以使更新有效。这就是remember 的作用。Remember是一个属性委托，用于持久化不可变和可变的对象。

...
var myState by remember{mutableStateOf("Hello")}

我们使用这个状态来观察事件或在任何时候获得它们的值。

状态提升

状态提升涉及到使有状态的可组合物成为无状态，这意味着可组合物本身不能改变任何状态。状态提升提高了代码的可读性，促进了数据在一个方向上的单元定向流动。这样一来，调试就变得更容易了。你可以在这里了解更多关于状态悬挂的信息。

结语

在这篇文章中，我们已经涵盖了Android中声明式范式的核心概念。Jetpack Compose还很年轻，现在有很多更新正在上传。出于这个原因，我建议你定期检查发布说明以保持更新。

然而，Compose已经准备好了，它的稳定版version 1.0 ，将于2021年7月10日发布。在2021年谷歌I/O大会上，谷歌宣布其框架正在为被称为Material You的新设计语言做准备。

你可以在我的Github Repo上获得本教程中使用的源代码。

创作愉快！😊

同行评议贡献者：。Peter Kayere

avatar
文章
阅读
粉丝