Как создать в Jetpack Compose фишки категорий с горизонтальной прокруткой, подобные этому пользовательскому интерфейсу? ⇐ Android

[Anonymous]

Я пытаюсь создать горизонтально прокручиваемый список фишек категорий в Jetpack Compose, похожий на этот дизайн:
Я хочу, чтобы категории:

• прокручивались горизонтально
• выглядели как закругленные фишки
• выделяли выбранную фишку другим цветом фона
• обновляли выбор при нажатии

Ожидаемый результат
Горизонтально прокручиваемый список закругленных фишек, в котором одновременно выбирается только одна фишка.
Мой текущий код:

Код: Выделить всё

@Composable
fun MeditationCategory() {
val categories = listOf(
"Meditations",
"Quick Meditations",
"Yoga for Health",
"Trending Today",
"Sounds and Music",
"Yoga",
"Sleep Stories",
"Breathing"
)

var selectedCategory by remember { mutableStateOf("Meditations") }

Column(
modifier = Modifier
.padding(horizontal = 16.dp, vertical = 12.dp)
) {
Text(
"Categories",
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
color = Color.Black
)

Spacer(modifier = Modifier.height(12.dp))

FlowRow(
mainAxisSpacing = 10.dp,
crossAxisSpacing = 10.dp
) {
categories.forEach { category ->
CategoryChip(
text = category,
selected = selectedCategory == category,
onClick = { selectedCategory = category }
)
}
}
}
}

Компонуемый чип

Код: Выделить всё

@Composable
fun CategoryChip(
text: String,
selected: Boolean,
onClick: () -> Unit
) {
Box(
modifier = Modifier
.wrapContentWidth()
.clickable { onClick() }
.background(
color = if (selected) Color(0xFFFF8A80) else Color.White,
shape = RoundedCornerShape(50)
)
.border(
width = if (selected) 0.dp else 1.dp,
color = Color(0xFFE0E0E0),
shape = RoundedCornerShape(50)
)
.padding(horizontal = 16.dp, vertical = 10.dp)
) {
Text(
text = text,
color = if (selected) Color.White else Color.Black,
fontSize = 14.sp,
fontWeight = FontWeight.Medium
)
}
}

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

Подробнее здесь: https://stackoverflow.com/questions/798 ... -like-this