Как правильно расположить два Text-а в Row, чтобы при увеличении кол-ва букв у текста слева, он не вытеснял текст справа?

Question

Есть необходимость расположить два Text() разной ширины, в одном Row(). Левый текст может занимать какую необходимо ширину, но не мешая правому тексту. Правый текст занимает всю оставшуюся ширину, также не мешая левому тексту.

Столкнулся с проблемой в виде того, что если левый текст становится длинным, то он начинает выдавливать правый текст.

Имею в виду такой случай:

val textLeft = "some text text text text text text text text text"
val textRight = "some text text"

Сам я хочу добиться таких результатов:  

1. Обычное состояние, когда оба текста небольшого размера и не сталкиваются друг с другом. Левый текст занимает ровно столько места, сколько ему нужно. Правый текст занимает все оставшееся место.

val textLeft = "some text"
val textRight = "some text text"

2. Текст слева уходит в троеточие, когда его ширина становится настолько большой, что доходит до правого текста и прижимает его к правому краю контейнера, не заставляя уходить в троеточие правый текст.

val textLeft = "some text text text text text text text text text"
val textRight = "some text text"

3. Правый текст настолько большой, что доходит до края левого текста и сам уходит в троеточие.

val textLeft = "some text"
val textRight = "some text text text text text text text text text text"

4. Оба текста настолько большие, что встречаются, примерно, на середине и оба уходят в троеточие.

val textLeft = "some text text text text text"
val textRight = "some text text text text text"

Вот сам код, в котором я пытался реализовать нужные для меня кейсы:

@Composable
fun TwoTextsRow(textLeft: String, textRight: String) {
    Box(
        modifier = Modifier.height(40.dp),
        contentAlignment = Alignment.Center
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween,
        ) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .fillMaxHeight()
                    .background(Color.Gray)
            ) {
                Text(
                    modifier = Modifier
                        .wrapContentWidth()
                        .padding(horizontal = 4.dp),
                    textAlign = TextAlign.Center,
                    maxLines = 1,
                    text = textLeft,
                    color = Color.White
                )
            }
            Divider(
                color = Color.Red,
                modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )
            Text(
                modifier = Modifier
                    .padding(horizontal = 4.dp)
                    .fillMaxWidth(),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                textAlign = TextAlign.Center,
                text = textRight,
                color = Color.White
            )
        }
    }
}

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

Answer 1

можно попробовать поиграть с весами, отталкиваясь от параметра "влез ли текст?"

@Composable
@Preview
fun Test(
    modifier: Modifier = Modifier,
    text1: String = "",
    text2: String = ""
) {
    var isText1OverFlow by remember { mutableStateOf(false) }
    var isText2OverFlow by remember { mutableStateOf(false) }
    Row(
        modifier = modifier
            .width(IntrinsicSize.Max)
            .height(IntrinsicSize.Max),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            modifier = Modifier
                .let {
                    when {
                        (isText1OverFlow && isText2OverFlow) ||
                                (isText1OverFlow.not() && isText2OverFlow.not()) ||
                                (isText1OverFlow) -> it.weight(1f)

                        else -> it
                    }
                }
                .background(Color.Green),
            text = text1,
            fontSize = 20.sp,
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            onTextLayout = {
                isText1OverFlow = it.hasVisualOverflow
            }
        )
        Text(
            modifier = Modifier
                .let {
                    when {
                        (isText1OverFlow && isText2OverFlow) ||
                                (isText1OverFlow.not() && isText2OverFlow.not()) ||
                                (isText2OverFlow) -> it.weight(1f)

                        else -> it
                    }
                }
                .background(Color.Red),
            text = text2,
            fontSize = 20.sp,
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            onTextLayout = {
                isText2OverFlow = it.hasVisualOverflow
            }
        )
    }
}

@Composable
@Preview
fun TestPreview() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.White)
    ) {
        Test(
            modifier = Modifier.fillMaxWidth(),
            text1 = "123",
            text2 = "asd"
        )

        Test(
            modifier = Modifier.fillMaxWidth(),
            text1 = "12345678901234567890345234234234324",
            text2 = "asd"
        )

        Test(
            modifier = Modifier.fillMaxWidth(),
            text1 = "123",
            text2 = "gsdfhsdhdfhdgfhdhjdgjdgfhdgfhdhdgfhdgh"
        )

        Test(
            modifier = Modifier.fillMaxWidth(),
            text1 = "12345678901234567890345234234234324",
            text2 = "gsdfhsdhdfhdgfhdhjdgjdgfhdgfhdhdgfhdgh"
        )
    }
}

БЛОГ НА HUSL

Как правильно расположить два Text-а в Row, чтобы при увеличении кол-ва букв у текста слева, он не вытеснял текст справа?

Ответы (1 шт):