Андроид. Как правильно расположить элементы в строке?

Question

Я пытаюсь позиционировать элементы в своемRowвот так: сначала текст, сразу за ним значок и второй значок, который нужно прибить к концу (правый край). Вот наглядный пример того, как это должно выглядеть:

И когда текст очень длинный, мне нужно:

Вот мой код:

       Row(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Row(modifier = Modifier.weight(1f)) {
            Text(
                text,
                modifier = Modifier
                    .align(Alignment.Top)
            )

                Icon(
                    modifier = Modifier.padding(start = 12.dp),
                    painter = painterResource(R.drawable.ic_circle),
                    contentDescription = ""
                )
        }

        Box(
            modifier = Modifier
                .size(26.dp)
                .align(Alignment.CenterVertically),
        ) {
            Image(
                modifier = Modifier.align(Alignment.Center),
                painter = painterResource(R.drawable.ic_square),
                contentDescription = null,
            )
        }
    }

Проблема в том, что текст может быть очень длинным, и в этом случае мой первый значок (круг) не отображается. Помогите, пожалуйста, как это исправить?

Answer 1

Вы можете использоватьModifier.weight(1f, fill = false)наTextтакImageвсегда измеряется по собственной ширине, в то время как текст продолжает расти. Строка и столбец сначала измеряют составные элементы без Modifier.weight, а затем делят пространство между компонентами с Modifier.weight.

      Text(
    text,
    modifier = Modifier
        .align(Alignment.Top)
        .weight(1f, fill = false)
)

И это можно проверить вот так

      @Preview
@Composable
private fun RowTest() {
    var text by remember {
        mutableStateOf("Text text")
    }

    Column {
        SampleComposable(text = text)
        TextField(value = text, onValueChange = { text = it })
    }
}

@Composable
private fun SampleComposable(text: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Row(modifier = Modifier.weight(1f)) {
Text(
    text,
    modifier = Modifier
        .align(Alignment.Top)
        .weight(1f, fill = false)
)

            Icon(
                modifier = Modifier.padding(start = 12.dp),
                imageVector = Icons.Default.Circle,
                contentDescription = ""
            )
        }

        Box(
            modifier = Modifier
                .size(26.dp)
                .align(Alignment.Top),
        ) {
            Image(
                modifier = Modifier.align(Alignment.Center),
                imageVector = Icons.Default.Square,
                contentDescription = null,
            )
        }
    }
}