2. 可组合函数基础

任务说明

本案例要求编写一个自定义可组合函数，该函数能够接收参数，并在界面中展示文本和图片。我们将创建一个简单的个人名片组件，接收姓名和头像资源ID作为参数，在Compose界面中完成展示。

实现代码

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    // 调用自定义可组合函数，传入参数
                    BusinessCard(
                        name = "张三",
                        avatarRes = R.drawable.ic_launcher_background
                    )
                }
            }
        }
    }
}

// 自定义可组合函数：接收姓名和头像资源ID，展示文本和图片
@Composable
fun BusinessCard(name: String, avatarRes: Int) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 展示图片（头像）
        Image(
            painter = painterResource(id = avatarRes),
            contentDescription = "头像",
            modifier = Modifier
                .size(120.dp)
                .padding(8.dp)
        )
        Spacer(modifier = Modifier.height(16.dp))
        // 展示文本（姓名）
        Text(
            text = name,
            fontSize = 28.sp,
            style = MaterialTheme.typography.titleLarge
        )
    }
}

// 预览函数，便于在Android Studio中查看效果
@Preview(showBackground = true)
@Composable
fun BusinessCardPreview() {
    MaterialTheme {
        BusinessCard(
            name = "李四",
            avatarRes = R.drawable.ic_launcher_background
        )
    }
}

关键实现说明

BusinessCard是自定义的可组合函数，它接收两个参数：name（字符串类型）和avatarRes（整型资源ID）。函数内部使用Column布局将图片和文本垂直排列，Image组件通过painterResource加载指定资源ID的图片，Text组件显示传入的姓名文本。在MainActivity中调用该函数并传入实际参数，完成界面展示。

落地与运行方式

1. 在Android Studio中创建新的Compose项目，将上述代码复制到MainActivity.kt文件中。
2. 确保build.gradle.kts（模块级）中包含Compose相关依赖，并启用buildFeatures { compose = true }。
3. 项目默认包含ic_launcher_background资源，可直接使用；如需更换图片，可将自己的图片放入res/drawable目录并替换资源ID。
4. 连接设备或使用模拟器，点击Run运行应用。

验证方法

• 应用启动后，屏幕中央应显示一个圆形（或方形）头像图片，图片下方显示传入的姓名文本“张三”。
• 修改MainActivity中调用BusinessCard时传入的name参数为其他字符串，重新运行，界面文本应同步变化。
• 在Android Studio中打开BusinessCardPreview的预览面板，可看到传入“李四”时的预览效果，验证参数传递正确。

判定标准：界面成功展示传入的图片资源与文本内容，且修改参数后展示内容随之改变，即视为案例通过。