Android compose入门demo

Android Compose 是 Android 的一个新 UI 工具包，用于构建原生 Android 应用。它基于 Kotlin 语言，并使用了现代化的声明式 UI 编程模型。Compose 的目标是提供一种更简洁、更灵活的方式来构建 Android UI，同时保持高性能。

下面是一个简单的 Android Compose 入门示例，演示了如何使用 Compose 构建一个基本的 Android 应用界面：

设置项目:

打开 Android Studio 并创建一个新的 Android 项目。
在项目的 build.gradle 文件中添加 Compose 的依赖：
复制
gradle`dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0'
    implementation 'androidx.compose.material:material:1.0.0'
    implementation 'androidx.compose.ui:ui-tooling-preview:1.0.0'
    implementation 'androidx.activity:activity-compose:1.3.0'
}`

创建 Compose UI:

在你的 Activity 或 Fragment 中，使用 setContent 方法来设置 Compose UI。
创建一个 Kotlin 文件（例如 MainScreen.kt），并定义你的 Compose UI。
kotlin
复制
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun MainScreen() {
    MaterialTheme {
        Surface {
            Column(modifier = Modifier.fillMaxSize()) {
                TextField(
                    value = "",
                    onValueChange = {},
                    label = { Text("Username") },
                    modifier = Modifier.fillMaxWidth()
                )
                TextField(
                    value = "",
                    onValueChange = {},
                    label = { Text("Password") },
                    visualTransformation = PasswordVisualTransformation(),
                    keyboardOptions = KeyboardOptions.Default.copy(password = true),
                    modifier = Modifier.fillMaxWidth()
                )
                Button(
                    onClick = {},
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("Login")
                }
            }
        }
    }
}

在 Activity 或 Fragment 中设置 Compose UI:

在你的 Activity 或 Fragment 的 onCreate 方法中，使用 setContent 方法来设置你的 Compose UI。
kotlin
复制
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.setContent
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.os.Bundle

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainScreen()
        }
    }
}

运行应用:

在 Android Studio 中点击运行按钮，你的应用应该会启动并显示一个简单的登录界面，其中包含两个文本字段和一个登录按钮。

这只是一个非常基本的示例，用于演示如何在 Android 应用中使用 Compose。Compose 还提供了许多其他功能和组件，如列表、网格、卡片等，你可以根据自己的需求进行探索和扩展。