一、前言

在传统的Android开发中，我们通常使用XML布局文件来定义UI界面，然后在Activity或Fragment中使用findViewById来获取控件引用，再通过setText()、setOnClickListener()等方法来更新UI和添加交互。这种模式存在几个明显的痛点：

  1. 代码冗余：每个控件都需要在XML和Java/Kotlin中分别定义和引用

  2. 容易出错：类型转换错误、空指针异常是常见问题

  3. 状态管理困难：UI状态分散在各个地方，难以维护

  4. 响应式编程复杂：需要手动同步数据和UI

Jetpack Compose的出现彻底改变了这一现状。作为Android官方推荐的现代UI工具包，Compose采用声明式UI和状态驱动的设计理念，让UI开发变得更加直观和高效。今天，我们就通过一个简单的计数器应用，来体验Compose的魅力。

二、环境搭建

首先确保你的Android Studio版本支持Compose。我使用的是：

  • Android Studio Narwhal 3 Feature Drop | 2025.1.3

  • Kotlin K2模式

  • API 21+（Android 5.0及以上）

2.1 创建新项目

  1. 打开Android Studio，选择"New Project"

  2. 选择"Empty Activity"模板

  3. 确保"Language"选择Kotlin，"Minimum SDK"选择API 21或更高

2.2 添加Compose依赖

打开app/build.gradle.kts，确保有以下配置：

kotlin

android {
    buildFeatures {
        compose = true
    }
    
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.7"
    }
}

dependencies {
    val composeBom = platform("androidx.compose:compose-bom:2023.10.01")
    implementation(composeBom)
    
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    
    // Android Studio Preview支持
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
    
    // Activity Compose集成
    implementation("androidx.activity:activity-compose:1.8.0")
    
    // ViewModel集成（后续扩展用）
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
}

三、传统方式 vs Compose方式对比

3.1 传统XML + Kotlin实现计数器

activity_main.xml:

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    
    <TextView
        android:id="@+id/tvCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="当前计数: 0"
        android:textSize="24sp"/>
    
    <Button
        android:id="@+id/btnIncrement"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="点击加一"/>
</LinearLayout>

MainActivity.kt:

kotlin

class MainActivity : AppCompatActivity() {
    private var count = 0
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val tvCount = findViewById<TextView>(R.id.tvCount)
        val btnIncrement = findViewById<Button>(R.id.btnIncrement)
        
        btnIncrement.setOnClickListener {
            count++
            tvCount.text = "当前计数: $count"
        }
    }
}

问题分析：

  • 需要维护两个文件（XML和Kotlin）

  • 需要手动同步状态和UI

  • 类型转换和空值检查

3.2 Compose方式实现计数器

MainActivity.kt（Compose版本）:

kotlin

package com.example.composecounter

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

@Composable
fun CounterApp() {
    // 状态变量 - 这是Compose的核心！
    var count by remember { mutableStateOf(0) }
    
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 文本显示 - 自动响应count的变化
        Text(
            text = "当前计数: $count",
            style = MaterialTheme.typography.headlineMedium,
            color = MaterialTheme.colorScheme.primary
        )
        
        Spacer(modifier = Modifier.height(24.dp))
        
        // 增加按钮
        Button(
            onClick = { count++ },
            modifier = Modifier.width(150.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = MaterialTheme.colorScheme.primary,
                contentColor = MaterialTheme.colorScheme.onPrimary
            )
        ) {
            Text(text = "点击加一")
        }
        
        Spacer(modifier = Modifier.height(16.dp))
        
        // 减少按钮
        Button(
            onClick = { 
                if (count > 0) count-- 
            },
            modifier = Modifier.width(150.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = MaterialTheme.colorScheme.secondary,
                contentColor = MaterialTheme.colorScheme.onSecondary
            ),
            enabled = count > 0
        ) {
            Text(text = "点击减一")
        }
        
        Spacer(modifier = Modifier.height(24.dp))
        
        // 重置按钮
        OutlinedButton(
            onClick = { count = 0 },
            modifier = Modifier.width(150.dp)
        ) {
            Text(text = "重置")
        }
        
        Spacer(modifier = Modifier.height(32.dp))
        
        // 显示状态信息
        Text(
            text = when {
                count == 0 -> "计数器已重置"
                count > 10 -> "计数超过10了！"
                else -> "继续加油！"
            },
            style = MaterialTheme.typography.bodyLarge,
            color = MaterialTheme.colorScheme.onSurfaceVariant
        )
    }
}

// 主题设置
@Composable
fun ComposeCounterTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colorScheme = LightColorScheme,
        typography = Typography(),
        content = content
    )
}

// 自定义颜色方案
private val LightColorScheme = lightColorScheme(
    primary = androidx.compose.ui.graphics.Color(0xFF6750A4),
    secondary = androidx.compose.ui.graphics.Color(0xFF625B71),
    tertiary = androidx.compose.ui.graphics.Color(0xFF7D5260)
)

3.3 截图操作步骤

  • 应用启动界面

  • 点击增加按钮后的界面（两次）

  • 点击减少按钮后的界面

  • 点击重置后的界面

  • 四、Compose核心概念解析

    4.1 声明式UI

    在Compose中，我们通过函数来声明UI。函数返回的就是UI组件，参数用于控制UI的表现。

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

    4.2 状态管理

    状态是Compose的核心。当状态变化时，Compose会自动重新绘制相关的UI部分。

    // 使用mutableStateOf创建可观察状态
var count by remember { mutableStateOf(0) }

// 或者使用MutableState
val countState = remember { mutableStateOf(0) }
var count by countState

    4.3 remember的作用

    remember用于在重组（recomposition）过程中保存状态。没有remember，每次重组都会重置状态。

    五、进阶示例：带ViewModel的状态管理

    在实际应用中，我们通常使用ViewModel来管理业务逻辑和状态。以下是扩展版本：

    // CounterViewModel.kt
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch

class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()
    
    private val _message = MutableStateFlow("")
    val message: StateFlow<String> = _message.asStateFlow()
    
    fun increment() {
        _count.value++
        updateMessage()
    }
    
    fun decrement() {
        if (_count.value > 0) {
            _count.value--
            updateMessage()
        }
    }
    
    fun reset() {
        _count.value = 0
        updateMessage()
    }
    
    private fun updateMessage() {
        _message.value = when {
            _count.value == 0 -> "计数器已重置"
            _count.value > 10 -> "计数超过10了！"
            else -> "当前计数: ${_count.value}"
        }
    }
}

// MainActivity.kt - 使用ViewModel
@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
    val count by viewModel.count.collectAsState()
    val message by viewModel.message.collectAsState()
    
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "当前计数: $count",
            style = MaterialTheme.typography.headlineMedium
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        // 按钮组
        Row(
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Button(onClick = { viewModel.increment() }) {
                Text("增加")
            }
            
            Button(
                onClick = { viewModel.decrement() },
                enabled = count > 0
            ) {
                Text("减少")
            }
            
            OutlinedButton(onClick = { viewModel.reset() }) {
                Text("重置")
            }
        }
        
        Spacer(modifier = Modifier.height(24.dp))
        
        // 状态信息
        Text(
            text = message,
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

    六、Android Studio预览功能

    Compose的一个强大功能是实时预览。你可以在Android Studio中直接看到UI效果：

    @Preview(showBackground = true)
@Composable
fun CounterAppPreview() {
    ComposeCounterTheme {
        CounterApp()
    }
}

@Preview(showBackground = true, device = "spec:shape=Normal,width=360,height=640")
@Composable
fun CounterAppMobilePreview() {
    ComposeCounterTheme {
        CounterApp()
    }
}

@Preview(showBackground = true, device = "spec:shape=Normal,width=1280,height=800")
@Composable
fun CounterAppTabletPreview() {
    ComposeCounterTheme {
        CounterApp()
    }
}

    七、状态驱动UI的优势总结

  • 自动响应：状态变化自动触发UI更新

  • 代码简洁：UI和逻辑都在同一个地方

  • 类型安全：Kotlin语言特性确保类型安全

  • 实时预览：Android Studio支持实时预览

  • 测试友好：纯函数特性便于单元测试

  • 性能优化：Compose智能地只重组需要变化的部分

八、常见问题解答

Q1: Compose最低支持哪个Android版本？
A: API 21（Android 5.0），覆盖绝大多数设备。

Q2: 可以在现有项目中逐步迁移到Compose吗？
A: 可以！Compose与View系统可以共存，可以通过ComposeView或AndroidView互相嵌入。

Q3: 如何调试Compose应用？
A: Android Studio提供了Compose专用的调试工具，可以查看重组次数、跳过不必要的重组等。

Q4: Compose的性能如何？
A: Compose在性能方面做了大量优化，智能重组机制确保只有必要的UI部分会被更新。

九、完整项目结构

app/
├── src/main/java/com/example/composecounter/
│   ├── MainActivity.kt
│   ├── ui/
│   │   ├── theme/
│   │   │   ├── Color.kt
│   │   │   ├── Theme.kt
│   │   │   └── Type.kt
│   │   ├── components/
│   │   │   └── CounterCard.kt
│   │   └── screen/
│   │       └── CounterScreen.kt
│   └── viewmodel/
│       └── CounterViewModel.kt
└── build.gradle.kts

十、总结

Jetpack Compose代表了Android UI开发的未来方向。通过状态驱动的声明式编程模型，我们能够以更直观、更高效的方式构建UI。本文通过一个简单的计数器应用，展示了Compose的核心概念和优势。建议读者从这个小例子开始，逐步探索Compose的更多功能，如列表、动画、主题、导航等。

# xml # ui # android studio
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

OpenClaw 本地部署完整指南（Windows + Ollama）

本文档基于实际部署经验编写，旨在帮助你在 Windows 系统上从零开始搭建 OpenClaw，并连接本地 Ollama 模型（如 Qwen2.5 或 Qwen3），使其具备完整的智能体能力。文档包含了所有关键步骤以及常见问题的解决方案。

avatar 火山引擎 ADG 社区

OpenClaw 小白安装指南（Windows版）

（类似一个能自动执行任务的AI机器人），不是游戏。API Key只保存在你本地电脑的加密文件里，不会上传到任何地方。访问：https://github.com/miaoxworld/openclaw-manager/releases。: 一键安装脚本会自动安装Node.js 22+，如果失败，手动下载安装：https://nodejs.org/：在PowerShell中，鼠标右键就是粘贴，不需要按

avatar 火山引擎 ADG 社区

飞书 × OpenClaw 接入指南：不用服务器，用长连接把机器人跑起来

这个项目存在的意义，就是把“飞书接 OpenClaw”这件事，整理成一套的配置入口，并把官方文档没覆盖到的坑集中写成排查清单。先说清楚它的角色：OpenClaw 现在已经内置官方飞书插件 @openclaw/feishu，功能更完整、维护也更及时。，说明飞书 + AI 的接入已经走通。另外，仓库也推荐了一个新项目：把 OpenClaw 变成“多 Agent 团队”，用多个 Agent 分工，Sla

avatar 火山引擎 ADG 社区