Jetpack Compose布局中能否实现自定义类式可复用UI组件？

你的需求完全可以实现，这是Jetpack Compose最基础的组件复用场景，不需要额外寻找其他实现方案。Compose的可组合函数本身就支持通过参数自定义内容，是官方推荐的组件复用方式，远比传统View体系的自定义View便捷。

你不需要将布局封装为类，直接给可组合函数添加需要的入参即可，以下是可直接使用的封装示例：

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.dp

@Composable
fun CustomCard(
    // 自定义入参：图片、标题、可选副标题
    avatarPainter: Painter,
    title: String,
    subtitle: String? = null,
    // 传入Modifier是Compose最佳实践，方便外部调整组件样式
    modifier: Modifier = Modifier
) {
    // 外层加Card实现原生CardView的阴影、圆角效果
    Card(
        modifier = modifier.fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        shape = MaterialTheme.shapes.medium
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Start,
            modifier = Modifier.padding(16.dp)
        ) {
            // 头像区域
            Image(
                painter = avatarPainter,
                contentDescription = null,
                modifier = Modifier
                    .size(48.dp)
                    .clip(CircleShape)
            )
            // 文本区域
            Column(
                modifier = Modifier.padding(start = 16.dp)
            ) {
                Text(
                    text = title,
                    style = MaterialTheme.typography.titleMedium
                )
                // 副标题不为空时才渲染
                subtitle?.let {
                    Text(
                        text = it,
                        style = MaterialTheme.typography.bodyMedium,
                        modifier = Modifier.padding(top = 4.dp)
                    )
                }
            }
        }
    }
}

封装后的组件可以直接在LazyColumn等列表容器中传入参数调用，示例如下：

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding

// 列表数据结构示例
data class ListItem(
    val avatar: Painter,
    val title: String,
    val subtitle: String
)

@Composable
fun ItemList(itemList: List<ListItem>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(itemList) { item ->
            // 直接调用封装好的CustomCard传入参数即可
            CustomCard(
                avatarPainter = item.avatar,
                title = item.title,
                subtitle = item.subtitle,
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }
    }
}

• 建议始终将Modifier作为可选参数加入自定义可组合函数的参数列表，方便外部调整组件的边距、大小、点击事件等属性，符合Compose开发最佳实践
• 如果需要更高的灵活度，你还可以将卡片内部的内容区域替换为可组合函数参数，实现完全自定义的内部布局，不需要修改组件本身的代码

内容的提问来源于stack exchange，提问作者S21 Dev