Jetpack Compose: Hello Android

news2024/11/18 1:27:53

Jetpack Compose 是一个现代化的工具包，用于使用声明式方法构建原生 Android UI。在本博文中，我们将深入了解一个基本的 “Hello Android” 示例，以帮助您开始使用 Jetpack Compose。我们将探讨所提供代码片段中使用的函数和注解。

入门

在深入代码之前，请确保您已经准备好使用 Jetpack Compose 进行工作。您应该安装了 Android Studio，并使用最新版本的 Android Gradle 插件。创建项目。
在这里插入图片描述

代码解析

让我们逐步查看所提供的代码：

MainActivity

package com.minos

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import com.minos.ui.theme.HelloComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloComposeTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

MainActivity 是一个标准的 Android 活动类。
在 onCreate 方法中，我们使用 setContent 设置内容视图，其中包含一个可组合函数 HelloComposeTheme。
在 HelloComposeTheme 中，我们有一个 Surface 可组合，它使用 Material 主题中定义的背景颜色填充整个可用空间（Modifier.fillMaxSize()）。
在 Surface 中，我们调用 Greeting 可组合，传递 “Android” 作为 name 参数。

Greeting 可组合

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

Greeting 是一个可组合函数，它接受一个 String 类型的 name 参数和一个可选的 Modifier 类型的 modifier 参数。
在 Greeting 内部，我们使用 Text 可组合来显示问候消息 “Hello $name!”。

GreetingPreview

@Preview(showBackground = true, backgroundColor = 0xFF00FF00, showSystemUi = true, device = Devices.PIXEL)
@Composable
fun GreetingPreview() {
    HelloComposeTheme {
        Greeting("Android")
    }
}

GreetingPreview 是一个带有 @Preview 注解的可组合函数。它允许我们在 Android Studio 中预览 UI 布局。
@Preview 注解的参数：
- showBackground：指示是否显示背景。
- backgroundColor：设置背景颜色。
- showSystemUi：指示是否显示系统 UI。
- device：指定用于预览的设备。
在 GreetingPreview 中，我们将 Greeting 可组合包装在 HelloComposeTheme 中，以提供适当的主题。