android compose 常用组件

你想了解 Android Jetpack Compose 中最常用的核心组件，以及它们的基本用法和适用场景，我会按「基础 UI 组件→布局组件→交互组件→容器组件」的分类，结合简洁的代码示例，帮你快速掌握这些常用组件的使用方式。

一、基础 UI 组件（展示内容）

这类组件主要用于显示文本、图片、图标等基础内容，是 Compose 界面的基石。

1. Text（文本）

最核心的文本展示组件，替代传统的 TextView。

kotlin

复制代码

Text(
    text = "Hello Compose", // 显示的文本内容
    fontSize = 20.sp, // 字体大小（sp适配字体缩放）
    color = Color.Black, // 字体颜色
    fontWeight = FontWeight.Bold, // 字体粗细
    textAlign = TextAlign.Center, // 文本对齐方式
    maxLines = 1, // 最大行数
    overflow = TextOverflow.Ellipsis // 文本溢出时显示省略号
)

2. Image（图片）

展示图片的组件，替代传统的 ImageView，支持网络图片（需配合 Coil 等库）、本地资源图片。

kotlin

复制代码

// 加载本地资源图片（res/drawable/ic_launcher.png）
Image(
    painter = painterResource(id = R.drawable.ic_launcher),
    contentDescription = "应用图标", // 无障碍描述（必填）
    modifier = Modifier
        .size(80.dp) // 图片大小
        .clip(CircleShape), // 裁剪为圆形
    contentScale = ContentScale.Crop // 图片缩放模式
)

// 加载网络图片（需添加Coil依赖：implementation "io.coil-kt:coil-compose:2.5.0"）
AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "网络图片",
    modifier = Modifier.size(200.dp)
)

3. Icon（图标）

专门展示矢量图标的组件，替代传统的 IconView。

kotlin

复制代码

Icon(
    imageVector = Icons.Default.Favorite, // Compose内置图标
    contentDescription = "收藏图标",
    tint = Color.Red, // 图标颜色
    modifier = Modifier.size(24.dp)
)

// 加载自定义矢量图标（res/drawable/ic_custom.xml）
Icon(
    painter = painterResource(id = R.drawable.ic_custom),
    contentDescription = "自定义图标",
    modifier = Modifier.size(24.dp)
)

二、布局组件（组织 UI 结构）

这类组件用于排列、嵌套其他 UI 元素，是构建界面布局的核心。

1. Column（垂直列布局）

垂直方向排列子组件，替代传统的 LinearLayout(vertical)。

kotlin

复制代码

Column(
    modifier = Modifier
        .fillMaxWidth() // 填充父布局宽度
        .padding(16.dp), // 内边距
    horizontalAlignment = Alignment.CenterHorizontally, // 子组件水平居中
    verticalArrangement = Arrangement.SpaceBetween // 子组件垂直间距均分
) {
    Text(text = "第一行文本")
    Spacer(modifier = Modifier.height(8.dp)) // 空白间隔
    Image(painter = painterResource(id = R.drawable.ic_launcher), contentDescription = "图标")
    Text(text = "第二行文本")
}

2. Row（水平行布局）

水平方向排列子组件，替代传统的 LinearLayout(horizontal)。

kotlin

复制代码

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically, // 子组件垂直居中
    horizontalArrangement = Arrangement.Start // 子组件靠左排列
) {
    Icon(Icons.Default.Person, contentDescription = "头像图标")
    Spacer(modifier = Modifier.width(8.dp))
    Text(text = "用户名")
}

3. Box（盒子布局）

层叠排列子组件（类似 FrameLayout），可实现 "图片 + 文字覆盖" 等效果。

kotlin

复制代码

Box(
    modifier = Modifier.size(200.dp),
    contentAlignment = Alignment.Center // 子组件居中
) {
    // 底层：背景图
    Image(painterResource(id = R.drawable.bg), contentDescription = "背景", modifier = Modifier.fillMaxSize())
    // 上层：文字
    Text(text = "层叠文本", color = Color.White, fontSize = 18.sp)
}

4. LazyColumn/LazyRow（懒加载列表）

替代传统的 RecyclerView，只渲染可见区域的子组件，性能更优。

kotlin

复制代码

// 垂直懒加载列表
LazyColumn(
    modifier = Modifier.fillMaxSize(),
    contentPadding = PaddingValues(16.dp), // 列表内边距
    verticalArrangement = Arrangement.spacedBy(8.dp) // 列表项间距
) {
    // 添加列表项
    items(100) { index ->
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "列表项 $index", fontSize = 16.sp)
        }
    }
}

三、交互组件（响应用户操作）

这类组件支持点击、输入等用户交互，是构建交互界面的核心。

1. Button（按钮）

基础按钮组件，替代传统的 Button。

kotlin

复制代码

Button(
    onClick = { 
        // 点击事件逻辑
        println("按钮被点击了") 
    },
    modifier = Modifier
        .width(200.dp)
        .height(48.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Blue, // 按钮背景色
        contentColor = Color.White // 按钮文字/图标颜色
    ),
    enabled = true // 是否可用
) {
    Text(text = "确认按钮")
}

// 文本按钮（无背景，只有文字）
TextButton(onClick = { /* 点击逻辑 */ }) {
    Text(text = "取消", color = Color.Gray)
}

// 图标按钮
IconButton(onClick = { /* 点击逻辑 */ }) {
    Icon(Icons.Default.Close, contentDescription = "关闭按钮")
}

2. TextField（输入框）

替代传统的 EditText，支持文本输入、提示、校验等。

kotlin

复制代码

var inputText by remember { mutableStateOf("") } // 状态管理输入文本

TextField(
    value = inputText,
    onValueChange = { inputText = it }, // 文本变化回调
    modifier = Modifier.fillMaxWidth(),
    label = { Text(text = "请输入内容") }, // 输入框标签
    placeholder = { Text(text = "占位提示文字") }, // 占位符
    leadingIcon = { Icon(Icons.Default.Search, contentDescription = "搜索图标") }, // 左侧图标
    trailingIcon = { // 右侧清除按钮
        if (inputText.isNotEmpty()) {
            IconButton(onClick = { inputText = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "清除")
            }
        }
    },
    singleLine = true, // 单行输入
    keyboardOptions = KeyboardOptions.Default.copy(
        keyboardType = KeyboardType.Text, // 键盘类型（文本/数字/邮箱等）
        imeAction = ImeAction.Done // 键盘右下角按钮（完成/搜索等）
    )
)

3. Checkbox/Switch（复选框 / 开关）

用于选择类交互，替代传统的 CheckBox/Switch。

kotlin

复制代码

// 复选框
var isChecked by remember { mutableStateOf(false) }
Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = isChecked,
        onCheckedChange = { isChecked = it }
    )
    Text(text = "同意协议")
}

// 开关
var isSwitched by remember { mutableStateOf(false) }
Row(verticalAlignment = Alignment.CenterVertically) {
    Text(text = "开启通知")
    Switch(
        checked = isSwitched,
        onCheckedChange = { isSwitched = it },
        modifier = Modifier.padding(start = 8.dp)
    )
}

四、容器组件（增强 UI 能力）

1. Card（卡片）

带阴影、圆角的卡片容器，提升界面层次感。

kotlin

复制代码

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(8.dp),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp), // 阴影高度
    shape = RoundedCornerShape(8.dp), // 圆角大小
    colors = CardDefaults.cardColors(containerColor = Color.White) // 卡片背景色
) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "卡片标题", fontSize = 18.sp, fontWeight = FontWeight.Bold)
        Text(text = "卡片内容", fontSize = 14.sp, color = Color.Gray)
    }
}

总结

Compose 常用组件分为基础 UI 组件 （Text/Image/Icon）、布局组件 （Column/Row/Box/LazyColumn）、交互组件 （Button/TextField/Checkbox）、容器组件（Card）四大类，覆盖绝大多数界面开发场景；
所有组件都通过 Modifier 控制尺寸、间距、样式等属性，通过 remember + mutableStateOf 管理交互状态；
懒加载列表（LazyColumn/LazyRow）替代 RecyclerView，Button/TextField 等组件内置了丰富的样式和交互配置，无需大量自定义。