Android

Introduire Jetpack Compose dans un projet existant

Le 7 février 2022 - 7 minutes de lecture

 

Création d’une vue extensible avec état à l’aide de “se souvenir”.

@Composable
ExpandableListItem() {
Card(...) {   
Row(...) {
TitleAndSubtitle(...)
Icon(...) 
}
}
}
Card(
elevation = 4.dp,
modifier = Modifier
.fillMaxWidth()
.padding(start = 15.dp, top = 15.dp, end = 15.dp)
.clip(RoundedCornerShape(8.dp))
.clickable { // We will deal with the click event later }
)
Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.fillMaxWidth()
) {...}
Row(...) {
TitleAndSubtitle(
title = "Expandable item title",
subtitle = "There are more items below! 👇"
)
Icon(...)
}
@Composable
fun TitleAndSubtitle(
title: String,
subtitle: String
) {
Column(verticalArrangement = Arrangement.Center) {
Text(text = title)
Text(text = subtitle)
}
}
Icon(
imageVector = Icons.Default.ArrowDropDown,
modifier = Modifier
.align(CenterVertically)
.graphicsLayer(...)
)

le graphicsLayer modificateur

Icon(
modifier = Modifier
.graphicsLayer(
rotationZ = animateFloatAsState(
if (expanded) 180f else 0f).value,      )
)
@Composable
ExpandableListItem() {
var expanded by remember { mutableStateOf(false) }  
Card(modifier = Modifier.clickable { expanded = !expanded}) {   
Row(...) {
TitleAndSubtitle(...)
Icon(...) 
}
}
}

mutableStateOf

mutableStateOf est un flux réactif, similaire à LiveDate ou StateFlow et émettra des valeurs booléennes au fur et à mesure que nous modifions le étendu variable.

rappelles toi

@Composable
ExpandableListItem() {
var expanded
Card(...) { 
/// Wrap the row in a Column
Column { 
Row(...) {
TitleAndSubtitle(...)
Icon(...) 
}

// And add the extra items sections      
Column {
ExtraItem(item = Item())
ExtraItem(item = Item())
}
}
}
}data class Item (
val title: String,
val date: String
)
@Composable
fun ExtraItem(item: Item) {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text(text = item.title)
Text(text = item.date)
}
}
//// Extra items sections

Divider(modifier = Modifier.height(1.dp))
Column(modifier = Modifier.padding(…)) {

Spacer(modifier = Modifier.height(10.dp))
ExtraItem(item = Item())

Spacer(modifier = Modifier.height(10.dp))
Divider(modifier = Modifier.height(1.dp))
Spacer(modifier = Modifier.height(10.dp))

ExtraItem(item = Item())

Spacer(modifier = Modifier.height(10.dp))
Divider(modifier = Modifier.height(1.dp))
Spacer(modifier = Modifier.height(10.dp))

ExtraItem(item = Item())

}

 

@Composable
fun ExpandableListItem() {
var expanded by remember { mutableStateOf(false) }
Card() {
Row() {
TitleAndSubtitle()
Icon()
}
AnimatedVisibility(visible = expanded) {
Column {
ExtraItem(item = Item())
ExtraItem(item = Item())
}
}        
}
}
AnimatedVisibility(
visible = expanded,
enter = expandVertically(
animationSpec = tween(
durationMillis = 300, easing = FastOutLinearInEasing)
),
exit = shrinkVertically(
animationSpec = tween(
durationMillis = 300, easing = FastOutLinearInEasing)
)
)

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.