Любые идеи в списке с шириной подгонки / переноса на элементе в Jetpack составляют

Question

Мне нужно реализовать следующий элемент пользовательского интерфейса:

• Список строк неизвестного размера
• Любой элемент должен быть Перенос содержимого.
• Если элемент не помещен в строку, он будет в следующем ряду.
• Весь список / сетка центрируется

Answer 1

Вы можете использовать FlowRow для реализации этого. Он визуализирует свои дочерние элементы по горизонтали (например, Row), но также переносит их, перемещая на новую строку, если они не помещаются в существующую строку.

Чтобы красиво обрабатывать очень длинные строки (которые не вписываются в сами по себе) вы можете установить overflow = TextOverflow.Ellipsis и maxLines = 1 на Text.

@Composable
fun HashTagList(hashTags: List<String>) {
    Box(modifier = Modifier.padding(8.dp)) {
        FlowRow(
            mainAxisAlignment = MainAxisAlignment.Center,
            mainAxisSize = SizeMode.Expand,
            crossAxisSpacing = 12.dp,
            mainAxisSpacing = 8.dp
        ) {
            hashTags.forEach { hashTag ->
                Text(
                    text = hashTag,
                    modifier = Modifier.drawBackground(
                        color = colorForHashTag(hashTag),
                        shape = RoundedCornerShape(4.dp)
                    ).padding(8.dp),
                    overflow = TextOverflow.Ellipsis,
                    maxLines = 1
                )
            }
        }
    }
}