Jetpack Compose 是 Android 开发中用于构建原生 UI 的现代化工具包。它使 UI 开发更加直观,并允许您以声明性方式构建 UI。以下是一些关于 Jetpack Compose 的基本教程内容。

基础概念

  • 声明式 UI: 与传统的基于事件的 UI 相比,声明式 UI 允许您通过描述 UI 的最终状态来构建 UI,而不是通过编写事件处理程序来控制 UI 的行为。
  • 组件: Jetpack Compose 使用组件来构建 UI。每个组件负责渲染自己的内容并处理用户交互。

快速开始

  1. 添加依赖: 在您的 build.gradle 文件中添加以下依赖:
dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0'
    // 其他必要的依赖
}
  1. 创建一个简单的组件
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleText() {
    Box {
        Text(text = "Hello, Jetpack Compose!")
    }
}
  1. 在 Activity 中使用 Compose
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(ComposeView(this).apply {
            setContent {
                MyScreen()
            }
        })
    }
}

@Composable
fun MyScreen() {
    Box(modifier = Modifier.fillMaxSize()) {
        Text(text = "Hello, Jetpack Compose!", modifier = Modifier.size(200.dp))
    }
}

@Preview
@Composable
fun PreviewMyScreen() {
    MyScreen()
}

资源

Android Compose Logo