Выровнять элемент строки в реактивном ранце

Question

Я хочу сделать такой ряд

Ожидаемый результат

И

Я пробовал этот кусок кода

Делитель с элементом

      @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,
        )
    }
}

Бпмоптионслейбелпревью

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

Фактический результат

Единственная проблемаTextиImageпредмет не на своем месте

Answer 1

Вы можете попробовать это, просто добавьте вес к вашему тексту, и изображение будет следовать оставшемуся размеру, который ему нужен, в зависимости от его размера.

      @Preview(showBackground = true)
@Composable
fun TextOverflow(){
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        Text(
            modifier = Modifier.weight(1f),
            text = "This is should be long-long text that ever you see today, I even don't know how far this text will be ended, so just enjoy reading while you code.",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Icon(imageVector = Icons.Rounded.MoreHoriz, contentDescription = "")
    }
}

Результат: