jaqxues
09/07/2020, 2:10 PMRandom.nextInt(0, 3)
for testing purposes)
As you can see in the screenshots below (1 -> 2), when having the content in the "extendedContent" changed, the card doesnt expand more to fit the contents. Now, when the Card is collapsed and expanded again (3), it resizes and looks how it should. However, if now the message disappears, it is again not resizing, meaning we have a lot of empty space (4)@Composable
fun AppScreen() {
Scaffold {
ScrollableColumn {
for (idx in 1..20) {
var savingResult by remember { mutableStateOf(0)}
ExpandableCardLayout(content = {
Text("Element: $idx, Shaped Icon")
Text("Article Headline")
Text("Authors and Sources")
}, extendedContent = {
Column {
Divider(Modifier.padding(vertical = 8.dp, horizontal = 40.dp))
Text("Detailed Description with a summary of the main article. This Description should be about 2 sentences long, and contain the keywords.")
when (savingResult) {
0 -> Spacer(Modifier.padding(8.dp))
1 -> Text("Saved Article")
2 -> {
Divider(
Modifier.padding(
vertical = 8.dp,
horizontal = 30.dp
)
)
Card(Modifier.clip(RoundedCornerShape(8.dp)), backgroundColor = Color(0xFFFFAAAA)) {
Column {
Text("An Error occurred while saving article")
Text("Please try again")
}
}
}
}
}
}, onLongPress = { savingResult = Random.nextInt(0, 3) })
}
}
}
}
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ExpandableCardLayout(
onLongPress: ((Offset) -> Unit)? = null,
content: @Composable() ColumnScope.() -> Unit,
extendedContent: @Composable() () -> Unit
) {
var extended by remember { mutableStateOf(false) }
ListCardElement(onClick = { extended = !extended }, onLongPress = onLongPress) {
Column(Modifier.padding(16.dp)) {
content()
AnimatedVisibility(extended) {
extendedContent()
}
}
}
}
@Composable
fun ListCardElement(onClick: (() -> Unit)? = null, onLongPress: ((Offset) -> Unit)? = null, content: @Composable () -> Unit) {
Card(
Modifier
.padding(horizontal = 16.dp)
.clip(RoundedCornerShape(8.dp))
.fillMaxWidth()
.padding(4.dp)
.run { onClick?.let { clickable(onClick = it) } ?: this }
.run { onLongPress?.let { longPressGestureFilter(it) } ?: this }, elevation = 4.dp
) {
content()
}
}