Я хотел бы получить эффект от карт, которые должны быть размещены, чтобы, когда я разворачиваю каждую из них, остальные снова сворачиваются. Мне удалось создать эффект, но у меня есть небольшая визуальная проблема, которую я не могу решить.
[img]https:// i.sstatic.net/E7aA9nZP.png[/img]
Как видите, из-за закругленных углов есть пустое отверстие, и мне бы хотелось, чтобы фон карты был сзади вверху, чтобы заполнить эту дыру, а не выглядеть белой. Мой код такой:
@Composable
fun RecipeScreen() {
Box(modifier = Modifier.fillMaxSize()) {
Column(modifier = Modifier.fillMaxSize()) {
//no-op
}
ExpandableBottomCards(
modifier = Modifier.align(Alignment.BottomCenter)
)
}
}
@Composable
fun ExpandableBottomCards(modifier: Modifier = Modifier) {
var expandedCard by remember { mutableStateOf("Ingredients") }
val cards = listOf("Ingredients", "Direction", "Tools")
LazyColumn(
modifier = modifier
.fillMaxWidth()
.background(Color.Transparent)
) {
itemsIndexed(cards) { index, cardTitle ->
ExpandableBottomCard(
title = cardTitle,
isExpanded = expandedCard == cardTitle,
onCardClick = {
expandedCard = if (expandedCard == cardTitle) "" else cardTitle
},
)
}
}
}
@Composable
fun ExpandableBottomCard(
title: String,
isExpanded: Boolean,
onCardClick: () -> Unit,
) {
val backgroundColor = when (title) {
"Ingredients" -> Color.Red
"Direction" -> Color.Blue
else -> Color.Green
}
Column(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
.background(backgroundColor)
.clickable { onCardClick() }
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.padding(horizontal = 16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(text = title, fontWeight = FontWeight.Bold, color = Color.White)
Icon(
imageVector = Icons.Default.Edit,
contentDescription = "Edit",
tint = Color.White
)
}
if (isExpanded) {
Text(
text = "Contenido expandido para $title",
modifier = Modifier.padding(16.dp),
color = Color.White
)
}
}
}
Подробнее здесь: https://stackoverflow.com/questions/788 ... lazycolumn
Как я могу наложить компонент внутри LazyColumn? ⇐ Android
Форум для тех, кто программирует под Android
-
Anonymous
1722080118
Anonymous
Я хотел бы получить эффект от карт, которые должны быть размещены, чтобы, когда я разворачиваю каждую из них, остальные снова сворачиваются. Мне удалось создать эффект, но у меня есть небольшая визуальная проблема, которую я не могу решить.
[img]https:// i.sstatic.net/E7aA9nZP.png[/img]
Как видите, из-за закругленных углов есть пустое отверстие, и мне бы хотелось, чтобы фон карты был сзади вверху, чтобы заполнить эту дыру, а не выглядеть белой. Мой код такой:
@Composable
fun RecipeScreen() {
Box(modifier = Modifier.fillMaxSize()) {
Column(modifier = Modifier.fillMaxSize()) {
//no-op
}
ExpandableBottomCards(
modifier = Modifier.align(Alignment.BottomCenter)
)
}
}
@Composable
fun ExpandableBottomCards(modifier: Modifier = Modifier) {
var expandedCard by remember { mutableStateOf("Ingredients") }
val cards = listOf("Ingredients", "Direction", "Tools")
LazyColumn(
modifier = modifier
.fillMaxWidth()
.background(Color.Transparent)
) {
itemsIndexed(cards) { index, cardTitle ->
ExpandableBottomCard(
title = cardTitle,
isExpanded = expandedCard == cardTitle,
onCardClick = {
expandedCard = if (expandedCard == cardTitle) "" else cardTitle
},
)
}
}
}
@Composable
fun ExpandableBottomCard(
title: String,
isExpanded: Boolean,
onCardClick: () -> Unit,
) {
val backgroundColor = when (title) {
"Ingredients" -> Color.Red
"Direction" -> Color.Blue
else -> Color.Green
}
Column(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
.background(backgroundColor)
.clickable { onCardClick() }
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.padding(horizontal = 16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(text = title, fontWeight = FontWeight.Bold, color = Color.White)
Icon(
imageVector = Icons.Default.Edit,
contentDescription = "Edit",
tint = Color.White
)
}
if (isExpanded) {
Text(
text = "Contenido expandido para $title",
modifier = Modifier.padding(16.dp),
color = Color.White
)
}
}
}
Подробнее здесь: [url]https://stackoverflow.com/questions/78801262/how-can-i-overlay-a-component-inside-a-lazycolumn[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия