Einführung von Jetpack Compose in das bestehende Projekt von Ziv Kesten | Februar 2022

Zusehen, wie unser Fall abstürzt Kondition Wir können drei Komponenten identifizieren:

• Text, der den Titel des Artikels enthält.
• Text, der den Untertitel des Artikels enthält.
• Rechtspfeil-Symbol (das animiert wird, sich vertikal zu drehen, wenn wir ein Element erweitern).

Als erstes fangen wir wie immer an zu komponieren:

@Composable
ExpandableListItem() {
Card(...) {   
Row(...) {
TitleAndSubtitle(...)
Icon(...) 
}
}
}

Wie wir schon oft gesehen haben, schreiben wir beim Schreiben einer deklarativen Benutzeroberfläche zunächst so wenig wie möglich, nur um das Ergebnis zu beschreiben oder was wir auf dem Bildschirm sehen möchten.

Um unser erweiterbares Element zu beschreiben, schreiben wir also zuerst a Card die enthalten aRow und drinnen richten wir einTitleAndSubtitle ich Icon.

Card ein vom System geliefertes Verbundbauteil ist, kann dies einige Zeit in Anspruch nehmenelevation ich shape als Parameter, und wir können es mit a versorgenmodifier für alles andere, was wir brauchen.
Der Card ist ein Container für unser erweiterbares Listenelement, damit wir es versenden elevation und einigemodifiers :

• fillMaxWidth() – wird unsere Karte genauso über die gesamte Breite des Bildschirms strecken android:layout_width=”match_parent” Bi.
• padding() – Es gibt uns Platz von den Rändern.
• clip(RoundedCornerShape(*.dp)) – wird die Karte der gelieferten beifügen RoundedCornerShape .
• clickable() – ergibt ein Lambda, das wir später zur Abwechslung verwenden können Zustand zusammengesetzt

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 }
)

Bei uns Card wir haben Row (Horizontales Äquivalent LineraLayout), die Titel und ein Symbol enthält.

Der Row wird ein nehmen horizontalArrangment Parameter für den Abstand zwischen dem Symbol und dem Titel.

Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.fillMaxWidth()
) {...}

U Row legen wir fest TitleAndSubtitle ich Icon die horizontal ausgerichtet werden.

Row(...) {
TitleAndSubtitle(
title = "Expandable item title",
subtitle = "There are more items below! 👇"
)
Icon(...)
}

Der TitleAndSubtitle ist eine Zusammensetzung, die wir geschrieben haben, um a zu haben Column (Vertikales Äquivalent LineraLayout) mit zwei Text zusammensetzbar

@Composable
fun TitleAndSubtitle(
title: String,
subtitle: String
) {
Column(verticalArrangement = Arrangement.Center) {
Text(text = title)
Text(text = subtitle)
}
}

Der Icon ist ein zusammenbaubares System, wir geben es ihm imageVector die wir als Teil der kompositorischen Abhängigkeit erhalten, an align Modifikator und etwas Neues, das wir noch nicht gesehen haben … a graphicsLayer.

Icon(
imageVector = Icons.Default.ArrowDropDown,
modifier = Modifier
.align(CenterVertically)
.graphicsLayer(...)
)

Der graphicsLayer Modifikator

GraphicsLayer ist ein Modifikator, der zum Anwenden von Effekten auf Inhalte verwendet wird, z. B. Skalierung, Drehung, Deckkraft, Schatten und Beschneidung.
In unserem Fall möchten wir das Pfeilsymbol so drehen, dass sich der Pfeil nach oben dreht, wenn das Element erweitert wird.

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(...) 
}
}
}

@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)
)
)