43. Compose 入门

项目配置

Android Studio（Quail 2 代）创建新项目时，选择「Empty Activity」模板，它会自动配好 Compose。如果你手动配，需要这几步。

模块级 build.gradle.kts

android {
    buildFeatures {
        compose = true  // 开启 Compose
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.15"
    }
}

dependencies {
    val composeBom = platform("androidx.compose:compose-bom:2024.12.01")
    implementation(composeBom)

    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.compose.material3:material3")
    implementation("androidx.activity:activity-compose:1.9.3")

    debugImplementation("androidx.compose.ui:ui-tooling")
}

第一个 Compose 界面

在 Activity 里用 setContent 设置界面，替代传统的 setContentView：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 这里写 Compose 界面
            Text("你好，Compose！")
        }
    }
}

setContent 接收一个 @Composable lambda，里面就是你的界面。运行项目，屏幕上会显示「你好，Compose！」。

Text 显示文本

Text 是最基本的文本组件：

@Composable
fun TextExample() {
    Text(
        text = "这是一段文字",
        color = Color.Blue,
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold
    )
}

常用参数：

参数	作用	示例
text	文本内容	"Hello"
color	文字颜色	Color.Red
fontSize	字号	16.sp
fontWeight	粗细	FontWeight.Bold
maxLines	最大行数	1
overflow	溢出处理	TextOverflow.Ellipsis

Modifier 修饰符

Modifier 是 Compose 里调整组件样式和行为的核心工具。它像一条链，把各种修饰操作串起来：

@Composable
fun ModifierExample() {
    Text(
        text = "带样式的文字",
        modifier = Modifier
            .background(Color.Yellow)
            .padding(16.dp)
            .fillMaxWidth()
    )
}

常用 Modifier 方法：

方法	作用
padding()	内边距
background()	背景
fillMaxWidth()	填满宽度
fillMaxSize()	填满整个空间
size()	指定尺寸
clickable()	点击事件
border()	边框
clip()	圆角裁剪

Modifier 顺序很重要

Modifier 是按顺序应用的，顺序不同效果不同：

// 先 padding 再 background：背景只包住文字外的间距
Modifier.padding(16.dp).background(Color.Red)

// 先 background 再 padding：背景包括间距区域
Modifier.background(Color.Red).padding(16.dp)

Modifier 作为参数传递

自定义可组合函数时，通常第一个参数放 Modifier，让调用方能调整样式：

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "你好，$name",
        modifier = modifier.padding(8.dp)
    )
}

// 调用方可以追加自己的修饰
Greeting(
    name = "小明",
    modifier = Modifier.fillMaxWidth()
)

@Preview 预览

@Preview 注解让你不运行应用就能在 Android Studio 里看到界面效果：

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Greeting("Android")
}

在代码编辑器右上角或分屏视图里会显示预览。改了代码，预览自动刷新。

Preview 常用参数：

参数	作用
showBackground	显示白色背景
showSystemUi	显示状态栏和导航栏
widthDp / heightDp	预览尺寸
name	预览名称

@Preview(name = "浅色模式")
@Preview(name = "深色模式", uiMode = UI_MODE_NIGHT_YES)
@Composable
fun GreetingPreview() {
    MyTheme {
        Greeting("Android")
    }
}

完整的第一个例子

把前面学的组合起来，写一个带样式的问候界面：

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

@Composable
fun GreetingScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFF5F5F5))
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "欢迎来到 Compose",
            fontSize = 28.sp,
            fontWeight = FontWeight.Bold
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(
            text = "这是你的第一个 Compose 界面",
            color = Color.Gray
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingScreenPreview() {
    GreetingScreen()
}

Column 是垂直排列的布局容器（第 44 章详细讲），Spacer 是占位空白。

小结

用 setContent 替代 setContentView 进入 Compose 世界。Text 显示文字，Modifier 链式调整样式，@Preview 实时预览。记住 Modifier 顺序敏感，自定义组件把 Modifier 放第一个参数。下一节我们深入学习布局。