RI разрабатывает приложение для Android, используя компоновку реактивного ранца.

Вот очень простой компонент пользовательского интерфейса:

enter image description here

Я хочу добавить кнопку справа.

Но если имя очень длинное, кнопки нет.

Мой код здесь:

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = rememberImagePainter(data = profileImg),
            contentDescription = null,
            modifier = Modifier
                .size(56.dp)
                .clip(CircleShape)
        )

        Column(
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.weight(1F) // I set the weight in here but it doesn't work.
        ) {
            Text(
                text = "very very very very very very very long name",
                fontWeight = FontWeight.Bold,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
            Text(
                text = "3 minutes ago",
            )
        }
    }

    Row {
        Button()
        Button()
    }
}

Как правильно показать правую кнопку?

0
yoonhok 4 Фев 2022 в 12:24
Отвечает ли это на ваш вопрос? Приоритет макета текста в Jetpack Compose
 – 
Philip Dukhov
4 Фев 2022 в 12:52

3 ответа

Вам нужно фактически предоставить этот вес Row, содержащему ваш Text, и убедиться, что вы не покрываете всю ширину. например, не делайте просто 1f.

Вы можете сделать что-то вроде этого; (Это делается с помощью compose_version = '1.0.1')

@Composable
fun Item() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.weight(0.7f)
        ) {
            Image(
                painter = painterResource(R.drawable.ic_launcher_background),
                contentDescription = null,
                modifier = Modifier
                    .size(56.dp)
                    .clip(CircleShape)
            )

            Column(
                verticalArrangement = Arrangement.Center,
            ) {
                Text(
                    text = "very very very very very very very long name",
                    fontWeight = FontWeight.Bold,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
                Text(
                    text = "3 minutes ago",
                )
            }
        }

        Button(
            onClick = {}, modifier = Modifier
                .wrapContentWidth()
                .weight(0.3f)
        ) {
            Text(text = "Button")
        }
    }
}

Вывод:

compose weight

0
Mayur Gajra 4 Фев 2022 в 12:58

Вот рабочий код (убрал бесполезный Row, так проще)

@Composable
fun Test() {
    Row(
        modifier = Modifier.fillMaxWidth,
        horizontalArrangement = Arrangement.spacedBy(5.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = rememberImagePainter(data = profileImg),
            contentDescription = null,
            modifier = Modifier
                .size(56.dp)
                .clip(CircleShape)
        )

        Column(
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.weight(1f) // I set the weight in here but it doesn't work.
        ) {
            Text(
                text = "very very very very very very very long name",
                fontWeight = FontWeight.Bold,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
            Text(
                text = "3 minutes ago",
            )
        }

        Button(onClick = { }) {
            Text(text = "Btn1")
        }
        Button(onClick = { }) {
            Text(text = "Btn2")
        }
    }
}

rox

0
ptitvinou 4 Фев 2022 в 13:24

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

Итак, вам нужно: Row(), который будет содержать эти 3:

  1. Image
  2. Column
  3. и Row с двумя кнопками

enter image description here

Другими словами что-то вроде:

Row() {
   Image()
   Column(weight:1f)
   Row()
}

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

Итак, если вы просто удалите свой внешний Row и переместите свой Row of buttons так, чтобы он работал:

enter image description here

0
F.Mysir 4 Фев 2022 в 13:58