Kotlin Compose教程：从零开始创建你的第一个UI – wiki大全

作者： /

Kotlin Compose 教程：从零开始创建你的第一个 UI

Jetpack Compose 是 Google 为 Android 开发打造的现代化声明式 UI 工具包。它彻底改变了我们构建用户界面的方式，让开发者可以用更少的代码、更强大的工具和直观的 Kotlin API 来创建美观、响应迅速的应用。

本教程将带你走过从创建项目到构建一个简单交互式界面的完整过程。读完本文，你将掌握 Compose 的核心概念，并能亲手创建你的第一个 UI 元素。

为什么选择 Jetpack Compose？

在开始之前，让我们简单了解一下为什么 Compose 如此受欢迎：

  1. 声明式 UI：你只需描述你想要的 UI 样式，Compose 会负责在数据状态改变时自动更新界面。这与传统的命令式 XML 布局方式截然不同。
  2. 更少的代码：相比 XML 布局，Compose 能用更少的代码实现同样甚至更复杂的界面，代码逻辑也更集中。
  3. 直观的 Kotlin API：UI 和逻辑都用 Kotlin 编写，无需在 Kotlin 和 XML 之间来回切换，开发体验更加流畅。
  4. 强大的预览功能：Android Studio 提供了强大的实时预览功能，让你在编码时就能立即看到 UI 效果，极大提升了开发效率。

先决条件

在开始本教程之前，请确保你已经准备好以下环境：

  • Android Studio：建议使用最新稳定版（如 Electric Eel | 2022.1.1 或更高版本）。
  • Kotlin 基础：对 Kotlin 语言的基本语法有一定了解。

第一步：创建你的第一个 Compose 项目

让我们从创建一个支持 Jetpack Compose 的新项目开始。

  1. 打开 Android Studio，选择 File > New > New Project…。
  2. 在左侧模板列表中，选择 Phone and Tablet，然后选择 Empty Activity 模板。
    选择模板
  3. 点击 Next，进入项目配置页面。
  4. 为你的应用命名（例如，“MyFirstComposeApp”），并确保 Language 选择的是 Kotlin。最重要的一步是，在 Build configuration 中，选择 Kotlin DSL。
  5. 点击 Finish。Android Studio 会自动为你配置好一个包含 Compose 依赖的基础项目。

项目创建成功后，打开 app/src/main/java/.../MainActivity.kt 文件。你会看到一些自动生成的代码，这便是我们开始的地方。

第二步：理解核心概念：@Composable 函数

在 Compose 中，UI 元素是由可组合函数 (Composable Function) 构建的。这些函数被 @Composable 注解标记，它们是构成界面的基本单位。

让我们看一下 MainActivity.kt 中的默认代码：

“`kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyFirstComposeAppTheme {
// A surface container using the ‘background’ color from the theme
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
Greeting(“Android”)
}
}
}
}
}

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
MyFirstComposeAppTheme {
Greeting(“Android”)
}
}
“`

这里有几个关键点：

  • setContent：这个函数是 Compose 的入口，它定义了 Activity 的布局。我们所有的 UI 代码都将写在这里。
  • @Composable：这个注解告诉 Compose 编译器，这个函数是用来转换数据为 UI 的。
  • Text：这是一个内置的可组合函数，用于在屏幕上显示文本。
  • @Preview：这个强大的注解让你可以在 Android Studio 的设计视图中实时预览你的 Composable 函数，而无需运行整个应用。

第三步：构建一个简单的用户界面

现在，让我们清理掉默认代码，创建我们自己的简单界面。这个界面将包含一个标题和两个文本段落。

我们将使用 Column 这个布局组件，它可以让其内部的 UI 元素垂直排列。

修改 MainActivity.kt 如下：

“`kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
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.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myfirstcomposeapp.ui.theme.MyFirstComposeAppTheme // 替换为你的项目包名

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

@Composable
fun SimpleArticle() {
Column(modifier = Modifier.padding(16.dp)) {
Text(
text = “Welcome to Jetpack Compose”,
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
color = MaterialTheme.colorScheme.primary
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = “Jetpack Compose is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android.”,
fontSize = 16.sp,
lineHeight = 24.sp
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = “Let’s start building!”,
fontSize = 16.sp
)
}
}

@Preview(showBackground = true, name = “Article Preview”)
@Composable
fun DefaultPreview() {
MyFirstComposeAppTheme {
SimpleArticle()
}
}
“`

在上面的代码中：

  • Column：像一个垂直的线性布局，将子元素一个接一个地垂直排列。
  • Modifier：几乎每个 Composable 函数都有一个 modifier 参数。它用于“修饰”或“配置”UI 元素，例如设置边距 (padding)、大小 (size)、背景颜色等。
  • Spacer：用于在元素之间创建空间，这里我们用它来创建垂直间距。
  • fontSize、fontWeight、color：这些是 Text 函数的参数，用于定制文本样式。
  • dp 和 sp：这是 Compose 中表示尺寸的单位。dp (密度无关像素) 用于布局尺寸，sp (缩放无关像素) 用于字体大小，它会随用户的系统字体大小设置而缩放。

此时，你应该可以在 Android Studio 的预览窗口看到你的 UI 效果了。

预览效果

第四步：添加交互与状态管理

静态的 UI 是不够的，应用需要响应用户的操作。现在，我们来添加一个按钮，并通过点击按钮来改变屏幕上的文本。这是理解 Compose 状态 (State) 管理的关键一步。

在 Compose 中，当一个 UI 元素的数据发生变化时，Compose 会自动“重组”（Recomposition），也就是重新绘制与该数据相关的部分。为了实现这一点，我们需要使用 remember 和 mutableStateOf。

  • mutableStateOf(initialValue)：创建一个可观察的、可变的状态对象。当它的 .value 改变时，所有读取该值的 Composable 都会被重组。
  • remember：它会“记住” mutableStateOf 创建的状态，确保在重组过程中状态不会丢失。

让我们创建一个新的 Composable 来演示这一点：

“`kotlin
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.material3.Button

// … 其他 import …

// … 在 MainActivity.kt 文件中添加以下函数 …

@Composable
fun InteractiveUI() {
// 1. 创建一个可以被 Compose “记住” 的状态
var textValue by remember { mutableStateOf(“Click the button!”) }

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally // 水平居中
) {
    Text(
        text = textValue,
        fontSize = 20.sp,
        fontWeight = FontWeight.Medium
    )
    Spacer(modifier = Modifier.height(20.dp))
    Button(onClick = {
        // 2. 当按钮被点击时，更新状态
        textValue = "You did it! Compose is amazing."
    }) {
        Text("Change Text")
    }
}

}

// … 别忘了在 MainActivity 的 setContent 和 Preview 中调用它 …
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyFirstComposeAppTheme {
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
InteractiveUI() // <— 调用新的 Composable
}
}
}
}
}

@Preview(showBackground = true)
@Composable
fun InteractivePreview() {
MyFirstComposeAppTheme {
InteractiveUI()
}
}
“`

在这个例子中：

  1. 我们用 remember { mutableStateOf(...) } 创建了一个 textValue 变量。by 关键字是 Kotlin 的属性委托，它让我们可以直接读写 textValue 的值，而不是通过 .value 属性。
  2. Button 的 onClick lambda 表达式中，我们改变了 textValue 的值。
  3. 当 textValue 改变时，Compose 会检测到这个变化，并自动重新调用读取了 textValue 的 Text Composable，从而更新屏幕上的文本。这个过程对开发者是透明的。

总结与下一步

恭喜你！你已经成功创建了你的第一个 Jetpack Compose 应用，并学习了几个最核心的概念：

  • @Composable 函数：构建 UI 的基本单位。
  • 布局：使用 Column 等布局组件来组织 UI 元素。
  • Modifier：定制 UI 元素的外观和行为。
  • 状态管理：使用 remember 和 mutableStateOf 来创建和管理动态数据，实现交互式 UI。

这仅仅是 Compose 世界的开始。接下来，你可以继续探索更多有趣的功能：

  • 更多布局组件：如 Row (水平排列) 和 Box (堆叠排列)。
  • 列表：使用 LazyColumn 和 LazyRow 高效地显示长列表。
  • 动画：为你的 UI 添加平滑的过渡动画。
  • 主题和样式：自定义应用的外观，实现深色模式。

建议查阅 Jetpack Compose 官方文档 和 Compose Pathway 教程，它们是深入学习的最佳资源。祝你在 Compose 的世界里探索愉快！

滚动至顶部