【Android之Compose开发基础】创建首个Android项目

一. 创建首个Android项目

创建Android项目的过程，这边就不在赘述了,可自行参考官网教程.

1.1. 工程代码介绍

打开 MainActivity.kt 文件的 Code 视图。请注意，此代码中有一些自动生成的函数，具体而言就是 onCreate() 和 setContent() 函数。

请记住：函数是程序中用于执行特定任务的部分

kotlin 复制代码

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AndroidSampleDemoTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

onCreate() 函数是此 Android 应用的入口点，并会调用其他函数来构建 UI。在 Kotlin 程序中，main() 函数是执行的入口点/起点。在 Android 应用中，则是由 onCreate() 函数来担任这个角色。

onCreate() 函数中的 setContent() 函数用于通过可组合函数定义布局。任何标有 @Composable 注解的函数都可通过 setContent() 函数或其他可组合函数进行调用。该注解可告知 Kotlin 编译器 Jetpack Compose 使用的这个函数会生成 UI。

请注意：编译器会接受您编写的 Kotlin 代码，并逐行查看，然后将其转换成计算机可以理解的代码。此过程称为代码编译。

接下来，查看 Greeting() 函数。Greeting() 函数是一种可组合函数；请留意它上方的 @Composable 注解。此可组合函数会接受一些输入并生成屏幕上显示的内容。

kotlin 复制代码

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

虽然你前面学习过了函数，但是组合函数可能有些不同之处

需在该函数前面添加 @Composable 注解。
@Composable 函数名称采用首字母大写形式。
@Composable 函数无法返回任何内容。

1.2. 代码预览

我们在开始的过程中，我们需要快速的看到修改之后的UI效果。如果我们运行整个项目，这样感觉会很慢。Compose组件库中给我提供了如下方式进行预览.

GreetingPreview() 函数是一项很酷的功能，让您无需构建整个应用就能查看可组合函数的外观。如需实现可组合函数的预览，您需要添加 @Composable 和 @Preview 注解。@Preview 注解会告知 Android Studio 此可组合函数应显示在此文件的设计视图中。

如您所见，@Preview 注解可以接收名为 showBackground 的参数。如果 showBackground 设置为 true，则会向可组合函数预览添加背景。

showBackground 设置为 true

showBackground 设置为 false

1.3. 显示内容修改

如果我们想修改显示的内容，查看效果，你可以直接修改该函数的传值。

kotlin 复制代码

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    AndroidSampleDemoTheme {
    // 修改方法传递的内容即可
        Greeting("guoweiyong")
    }
}

1.4. 更改背景颜色

若要设置不同的背景颜色，您需要使用 Surface 将文本包围起来。Surface 是一个容器，代表界面的某一部分，您可以在其中更改外观（如背景颜色或边框）。

若要使用 Surface 将文本包围起来，请突出显示该行文本，按下 Alt+Enter (Windows) 或 Option+Enter (Mac)，然后选择 Surround with widget。

选择 Surround with Container。

默认容器为 Box，但您可以将其更改为其他容器类型。

删除 Box，改为输入 Surface()。并向 Surface 容器添加 color 参数，将其设置为 Color。

kotlin 复制代码

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Red) {
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
    }
}

1.5. 增加内边距

现在文本已有了背景颜色，接下来让我们在文本周围添加一些空格（内边距）。

Modifier 用于扩充或修饰可组合项。您可以使用的其中一个修饰符是 padding 修饰符，它会在元素周围添加空格（在本例中，是在文本周围添加空格）。为此，请使用 Modifier.padding() 函数。

每个可组合函数都应具有 Modifier 类型的可选参数。这应是第一个可选参数。

为 modifier 添加尺寸为 24.dp 的内边距。

kotlin 复制代码

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Red) {
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    AndroidSampleDemoTheme {
        Greeting("guoweiyong", modifier = Modifier.padding(24.dp))
    }
}