如何在Jetpack Compose的ListItem中为headlineContent与trailingContent添加垂直分隔线？

由于Jetpack Compose的ListItem组件没有直接提供在headlineContent和trailingContent之间插入垂直分隔线的参数，我们可以通过自定义布局实现需求，核心思路是将标题、分隔线、右侧内容整合到同一行布局中。

实现代码 #

先定义一个封装好的可复用Composable：

@Composable
fun ListItemWithDivider(
    leadingContent: @Composable () -> Unit,
    headlineContent: @Composable () -> Unit,
    trailingContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dividerColor: Color = Color.Gray.copy(alpha = 0.3f),
    dividerWidth: Dp = 1.dp,
    dividerHeightRatio: Float = 0.7f,
    horizontalPadding: Dp = 16.dp
) {
    ListItem(
        modifier = modifier,
        leadingContent = leadingContent,
        headlineContent = {
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                headlineContent()
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(horizontalPadding)
                ) {
                    // 垂直分隔线
                    Box(
                        modifier = Modifier
                            .width(dividerWidth)
                            .fillMaxHeight(dividerHeightRatio)
                            .background(dividerColor)
                    )
                    trailingContent()
                }
            }
        }
    )
}

使用示例 #

调用这个自定义组件即可实现效果：

ListItemWithDivider(
    leadingContent = {
        Icon(Icons.Default.Person, contentDescription = "用户图标")
    },
    headlineContent = {
        Text("Ryfter")
    },
    trailingContent = {
        Text("编辑资料")
    }
)

参数调整说明 #

• dividerColor：分隔线颜色，默认半透明灰色
• dividerWidth：分隔线宽度，默认1dp
• dividerHeightRatio：分隔线高度占ListItem的比例，默认0.7（和示例图匹配）
• horizontalPadding：分隔线与右侧内容的间距，默认16dp

你可以根据设计需求修改这些参数，适配不同UI风格。

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