Android 在 Jetpack Compose 中对齐行项目

我想像这样吵架

Expected Output个

和

我试过这段代码

DividerWithItem个

@Composable
fun DividerWithItem(
    modifier: Modifier = Modifier,
    index: () -> Int,
    itemName: String,
    lastIndex: () -> Int,
    moreRowContent: @Composable RowScope.() -> Unit,
) {
    Column {
        if (index() == 0) {
            Divider(color = Cloudy, thickness = dimensionResource(R.dimen.separator_height_width))
        }
        Row(
            modifier = modifier,
            horizontalArrangement = Arrangement.spacedBy(4.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text(
                text = itemName,
                modifier = Modifier.padding(vertical = 12.dp),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
            moreRowContent()
        }
        if (index() <= lastIndex()) {
            Divider(color = Cloudy, thickness = 1.dp)
        }
    }
}

BpmOptionsLabel个

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyItemScope.BpmOptionsLabel(
    index: () -> Int,
    optionName: String,
    lastIndex: () -> Int
) {
    DividerWithItem(
        modifier = Modifier
            .fillMaxSize()
            .animateItemPlacement(),
        index = index,
        itemName = optionName,
        lastIndex = lastIndex
    ) {
        Image(
            modifier = Modifier.weight(.3f),
            painter = painterResource(R.drawable.ic_menu),
            contentDescription = null,
        )
    }
}

BpmOptionsLabelPreview个

@Preview(showBackground = true)
@Composable
fun BpmOptionsLabelPreview() {
    LazyColumn {
        item {
            BpmOptionsLabel(
                index = { 0 },
                "Item item item item item m 1",
                lastIndex = { 1 }
            )
        }
    }
}

Actual Output个

唯一的问题是Text和Image项不在适当的位置