Jetpack Compose 第 1 课：可组合函数

点击查看：Jetpack Compose 教程

点击查看：Composetutorial 代码

简介

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。

在本教程中，您将使用声明性的函数构建一个简单的界面组件。您无需修改任何 XML 布局，也不需要使用布局编辑器。相反，您只需调用可组合函数来定义所需的元素，Compose 编译器即会完成后面的所有工作。

可组合函数

Jetpack Compose 是围绕可组合函数构建的。这些函数可让您以程序化方式定义应用的界面，只需描述应用界面的外观并提供数据依赖项，而不必关注界面的构建过程（初始化元素、将其附加到父项等）。如需创建可组合函数，只需将 @Composable 注解添加到函数名称中即可。

效果图

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTutorialTheme {
        Greeting("Android")
    }
}

添加文本元素

首先，下载最新版本的 Android Studio，然后通过以下方法创建应用：选择 New Project，然后在 Phone and Tablet 类别下，选择 Empty Activity。 将应用命名为 ComposeTutorial，然后点击 Finish。默认模板已包含一些 Compose 元素，但在此教程中，您要逐步进行构建。

首先，通过在 onCreate 方法内添加文本元素，让系统显示“Hello world!”文本。可以通过定义内容块并调用 Text 可组合函数来实现此目的。setContent 块定义了 activity 的布局，我们会在其中调用可组合函数。可组合函数只能从其他可组合函数调用。

Jetpack Compose 使用 Kotlin 编译器插件将这些可组合函数转换为应用的界面元素。例如，由 Compose 界面库定义的 Text 可组合函数会在屏幕上显示一个文本标签。

效果图

class Base01 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            Text(text = "hello world")
//            ComposeTutorialTheme {
//                // A surface container using the 'background' color from the theme
//                Surface(
//                    modifier = Modifier.fillMaxSize(),
//                    color = MaterialTheme.colors.background
//                ) {
//                    Greeting("Android")
//                }
//            }
        }
    }
}

定义可组合函数

如需使函数成为可组合函数，请添加 @Composable 注解。如需尝试此操作，请定义一个 MessageCard 函数并向其传递一个名称，然后该函数就会使用该名称配置文本元素。

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

在 Android Studio 中预览函数

借助 @Preview 注解，您可以在 Android Studio 中预览可组合函数，而无需构建应用并将其安装到 Android 设备或模拟器中。该注解必须用于不接受参数的可组合函数。因此，您无法直接预览 MessageCard 函数，而是需要创建另一个名为 PreviewMessageCard01 的函数，由该函数使用适当的参数调用 MessageCard。请在 @Composable 上方添加 @Preview 注解。

效果图

Base01.kt代码

package com.example.composetutorial.activity

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.example.composetutorial.ui.theme.ComposeTutorialTheme
/*

Jetpack Compose 教程
https://developer.android.google.cn/jetpack/compose/tutorial

 */
class Base01 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            Text(text = "hello world")
//            ComposeTutorialTheme {
//                // A surface container using the 'background' color from the theme
//                Surface(
//                    modifier = Modifier.fillMaxSize(),
//                    color = MaterialTheme.colors.background
//                ) {
//                    Greeting("Android")
//                }
//            }
        }
    }
}

/*
第 1 课：可组合函数
Jetpack Compose 是围绕可组合函数构建的。这些函数可让您以程序化方式定义应用的界面，只需描述应用界面的外观并提供数据依赖项，
而不必关注界面的构建过程（初始化元素，将其附加到父项等）。如需创建可组合函数，只需将 @Composable 注解添加到函数名称中即可。


添加文本元素
开始前，请下载最新版本的 Android Studio，然后通过以下方法创建应用：选择 New Project，然后在 Phone and Tablet 类别下，选择 Empty Compose Activity。 将应用命名为 ComposeTutorial，然后点击 Finish。默认模板已包含一些 Compose 元素，但在此教程中，您要逐步进行构建。

首先，通过在 onCreate 方法内添加文本元素，让系统显示“Hello world!”文本。可以通过定义内容块并调用 Text 可组合函数来实现此目的。setContent 块定义了 activity 的布局，我们会在其中调用可组合函数。可组合函数只能从其他可组合函数调用。

Jetpack Compose 使用 Kotlin 编译器插件将这些可组合函数转换为应用的界面元素。例如，由 Compose 界面库定义的 Text 可组合函数会在屏幕上显示一个文本标签。


定义可组合函数
如需使函数成为可组合函数，请添加 @Composable 注解。如需尝试此操作，请定义一个 MessageCard 函数并向其传递一个名称，然后该函数就会使用该名称配置文本元素。
 */

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

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

/*
借助 @Preview 注解，您可以在 Android Studio 中预览可组合函数，而无需构建应用并将其安装到
Android 设备或模拟器中。该注解必须用于不接受参数的可组合函数。因此，您无法直接预览 MessageCard 函数，
而是需要创建另一个名为 PreviewMessageCard 的函数，由该函数使用适当的参数调用 MessageCard。请在 @Composable 上方添加 @Preview 注解。

 */
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTutorialTheme {
        Greeting("Android")
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewMessageCard01() {
    ComposeTutorialTheme {
        MessageCard("Android 来自 MessageCard 函数")
    }
}

欢迎关注我的公众号，不定期推送优质的文章，
微信扫一扫下方二维码即可关注。