Einführung
Jetpack Compose ist eine neue Methode zum Erstellen einer nativen Benutzeroberfläche. Die Schreibmethode ist Flutter sehr ähnlich. Schüler, die Flutter kennen, können schnell loslegen.
Offizielle Website: https://developer.android.com/jetpack/compose
offizielle Demo: https://github.com/android/compose-samples
offizielle Einführung: https://developer.android.com/jetpack/compose/setup
Umgebung und Version
Die Mindestunterstützung ist Android API 21, Version 5.0, die die Kotlin-Sprache verwenden muss, und die Mindestversion ist Android Studio 4.0.
Jetpack Compose befindet sich derzeit in der experimentellen Phase, jetzt ist es 0.1-dev2, und es wird geschätzt, dass es ein weiteres Jahr vor der offiziellen Version von 1.0 sein wird.
Nachfolgende Versionen können weitere Kotlin-Funktionen hinzufügen, Animationen und andere Leistungsprobleme bereichern.
Informationen zur Verwendung in vorhandenen Projekten:
https://developer.android.com/jetpack/compose/setup#add-compose
Wie man es benutzt
Arrangieren Sie ein neues leeres Projekt direkt im AS 4.0, gibt es ein Codebeispiel:
hinzugefügt , bevor die Funktion @ComposeAnmerkungen, Sie zu einem ähnlichen Flutter in den Widget UI zurückkehren können
Add @ComposeAnnotation Funktionen können sich gegenseitig anrufen, werden diese Funktionen zusammengestellt Plug-in der Verarbeitung werden Wenn eine Funktion keine Benutzeroberfläche generiert, verwenden Sie diese Anmerkung nicht.
@PreviewDie Vorschau kann rechts in Echtzeit in der Vorschau angezeigt werden. Aktualisieren Sie nach dem Ändern der Funktion eine Vorschau. Die äußere Funktion, zu der die Annotation hinzugefügt wird, kann keine Parameter enthalten, aber eine Funktion mit Parametern kann zur Vorschau verschachtelt werden. Sie können @Previeweinen Namen auf der Rückseite hinzufügen, z.@Preview("Text preview")
Die Konzepte von Spalte und Zeile sind dieselben wie in Flutter, einschließlich der Konzeptgröße mainAxisSizeund Ausrichtung der Hauptachse und der Nebenachse crossAxisAlignmentsowie eines Codebeispiels:
@Composable
fun MyScreenContent(
names: List<String> = listOf("Android", "there"),
counterState: CounterState = CounterState()
) {
Column(crossAxisAlignment = CrossAxisAlignment.Center
crossAxisSize = LayoutSize.Expand,
mainAxisSize = LayoutSize.Expand) {
for (name in names) {
Greeting(name = name)
Divider(color = Color.Black)
}
Divider(color = Color.Transparent, height = 32.dp)
Counter(counterState)
}
}
@Preview("MyScreen preview")
@Composable
fun DefaultPreview() {
MyApp {
MyScreenContent()
}
}
Sie können ein Intervall für Breite und Höhe verwenden HeightSpacer(24.dp)oder WeightSpacer(24.dp)direkt hinzufügen
Nach offiziellen Vorschlägen können wir die Benutzeroberfläche in mehrere kleine Compose-Funktionen aufteilen. Jede Funktion wird schließlich vom Plugin kompiliert, um eine Ansicht zu generieren, und diese Compose-Funktionen können dann wiederverwendet werden.
@Composable
fun MyScreenContent(
names: List<String> = listOf("Android", "there"),
counterState: CounterState = CounterState()
) {
Column(modifier = ExpandedHeight, crossAxisAlignment = CrossAxisAlignment.Center) {
Column(modifier = Flexible(1f), crossAxisAlignment = CrossAxisAlignment.Center) {
for (name in names) {
Greeting(name = name)
Divider(color = Color.Black)
}
}
Counter(counterState)
}
}
In Column können Sie ExpandedHeight für den Parametermodifikator festlegen, ähnlich wie beim Festlegen der Höhe match_parent. Die Breite ist dieselbe.
Informationen zur Verwendung des Themas und zum Anpassen des Themas
In MaterialTheme gibt es viele Farben und Schriftstile. Nachdem Sie MaterialTheme in die äußere Ebene eingewickelt haben, können Sie die Themendaten in der internen Compose-Funktion verwenden, z.style = +themeTextStyle { h1 }
@Composable
fun Greeting(name: String) {
Text (
text = "Hello $name!",
modifier = Spacing(24.dp),
style = +themeTextStyle { h1 }
color = +themeColor { surface }
)
}
Sie können einen bestimmten Attributwert für ein vorhandenes Thema mithilfe der Kopierfunktion ändern, z. B.:
textStyle = (+themeTextStyle { body1 }).copy(color = Color.Yellow)
Benutzerdefiniertes Thema
import androidx.compose.Composable
@Composable
fun CustomTheme(children: @Composable() () -> Unit) {
// TODO
}
import androidx.compose.Composable
import androidx.ui.core.CurrentTextStyleProvider
import androidx.ui.graphics.Color
import androidx.ui.material.MaterialColors
import androidx.ui.material.MaterialTheme
import androidx.ui.text.TextStyle
val green = Color(0xFF1EB980.toInt())
val grey = Color(0xFF26282F.toInt())
private val themeColors = MaterialColors(
primary = green,
surface = grey,
onSurface = Color.White
)
@Composable
fun CustomTheme(children: @Composable() () -> Unit) {
MaterialTheme(colors = themeColors) {
val textStyle = TextStyle(color = Color.Red)
CurrentTextStyleProvider(value = textStyle) {
children()
}
}
}
Effekte und Memo
Die Rolle des Memos:
1. Wenn Neuzusammenstellungen (dh wenn sich die Modelldaten in der UI-Komponente ändern, wird die UI-Komponente neu erstellt), speichern Sie den Statuswert wie folgt:
@Composable
fun MyScreenContent(
names: List<String> = listOf("Android", "there"),
counterState: CounterState = CounterState()
) { ... }
Es liegt ein Problem mit dem obigen Code vor. Beim erneuten Erstellen geht der ursprüngliche counterState-Wert jedes Mal verloren, wenn ein neues counterState-Objekt erstellt wird.
Sie können das Problem lösen, nachdem Sie es mithilfe von Memo wie folgt geändert haben:
@Composable
fun MyScreenContent(
names: List<String> = listOf("Android", "there"),
counterState: CounterState = +memo { CounterState() }
) { ... }
2. Denken Sie bei der Reorganisation an einige interne Berechnungsergebnisse, um Mehrfachberechnungen zu vermeiden
Wenn Sie Berechnungen in der Mitte der Komposition ausführen müssen, aber nicht jedes Mal Berechnungen durchführen möchten, wenn Sie die Funktion neu kombinieren, können Sie sich an die Berechnung erinnern, auch wenn die zusammensetzbare Funktion neu kombiniert wird, wird die Berechnung nicht erneut ausgeführt.
@Composable
fun Greeting(name: String) {
val formattedName = +memo { name.substringBefore(" ").toUpperCase() }
Text (
text = "Hello $formattedName!",
modifier = Spacing(24.dp),
style = +themeTextStyle { h3 }
)
}
@Preview
@Composable
fun DefaultPreview() {
MaterialTheme {
Greeting("Android 10")
}
}
Beispielsweise wird der Berechnungsprozess für formatierte Namen hier nach der Verwendung von memo nicht wiederholt, es liegt jedoch ein Fehler vor, der auf diese Weise geschrieben wurde. Wenn beim zweiten Aufruf ein anderer Parameter übergeben wird, wird das ursprüngliche Ergebnis von memo wiederverwendet Verursacht einen Fehler. Für die Parameter, die geändert werden müssen, kann Memo folgendermaßen verwendet werden:
@Composable
fun Greeting(name: String) {
val formattedName = +memo(name) { name.substringBefore(" ").toUpperCase() }
Text (
text = "Hello $formattedName!",
modifier = Spacing(24.dp),
style = +themeTextStyle { h3 }
)
}
@ Modell kommentiert
Nachdem die Modellanmerkung eine Datenklasse markiert hat, können Sie die Datenänderungen in der Compose-Funktion direkt überwachen und die Anzeige automatisch aktualisieren,
z. B.:
Definition:
@Model
class CounterState(var count: Int = 0)
Verwendung:
@Composable
fun Counter(state: CounterState) {
Button(
text = "I've been clicked ${state.count} times",
onClick = {
state.count++
}
)
}
Statusförderung, Datenfluss nach unten, Ereignisfluss nach oben
@Model
class FormState(var optionChecked: Boolean)
@Composable
fun Form(formState: FormState) {
Checkbox(
checked = formState.optionChecked,
onCheckedChange = { newState -> formState.optionChecked = newState })
}
在上面代码中，Checkbox的选中状态，在Checkbox和Form中都不保存，而改为由外部传入，原因是此时外部可能需要使用当前的状态值，那么由外部来创建并传递该参数到Compose函数中，这使得外部调用者提升了状态
⚠️ Hinweis: In zusammensetzbaren Funktionen sollte der Status angegeben werden, der zum Aufrufen der Funktion nützlich sein kann, da dies die einzige Methode ist, die verwendet oder gesteuert werden kann, die als Statusförderung bezeichnet wird.
Das Konzept der staatlichen Förderung ist das gleiche wie bei Flutter. In Zukunft sollten auch verwandte staatliche Verwaltungsbibliotheken wie Provider, BLOC oder Redux in Flutter eingeführt werden, da die Art der Annotation von Compose + Model eine MVVM-Idee ist und eine Bequemlichkeit erfordert. Eine dreigliedrige Bibliothek zur Verwaltung des Datenstatus erledigt dies.
In Bezug auf den Datenfluss: Die übergeordnete Composable-Funktion kann ihre untergeordneten Daten steuern. Die Benutzeroberfläche von Sub Compose sollte nicht aus globalen Variablen oder dem globalen Datenspeicher gelesen werden. Composable-Funktionen sollten nur die erforderlichen Informationen erhalten, damit sie so einfach wie möglich sind, anstatt alles aufzurufen, was die übergeordnete Composable-Funktion bieten kann.
@Composable
fun MultipleGreetings(user: User = +memo { User("name", "surname") }) {
Column {
Greeting("${user.firstName} ${user.lastName}")
Greeting("Android 10")
Button(text = "Change name", onClick = {
user.firstName = "Changed"
user.lastName = "New surname"
})
}
}
@Composable
fun Greeting(name: String) {
val formattedName = +memo(name) { name.substringBefore(" ").toUpperCase() }
Text (
text = "Hello $formattedName!",
modifier = Spacing(24.dp),
style = +themeTextStyle { h3 }
)
}
比如上面代码中，Greeting从调用方Compose函数（MultipleGreetings）获取数据，作为参数传入，且Greeting只接收一个String，并不是整个User对象。
Ereignis vergeht
Das Ereignis wird durch den Lambda-Rückruf fortgesetzt. Wenn die untergeordnete Composable-Funktion ein Ereignis empfängt, sollte die Änderung an das Composable zurückgegeben werden, das sich um die Informationen kümmert.
In unserem Beispiel können wir die Begrüßung anklickbar machen, indem wir den Inhalt der Begrüßung in eine anklickbare Funktion (in der Bibliothek verfügbar) einschließen, die einen onClick-Listener als Parameter verwendet. Begrüßung ist jedoch eine wiederverwendbare Funktion. Sie weiß nicht, wie sie mit Benutzerinteraktionen umgehen soll. Sie sollten Lambda verwenden, um diese Informationen vom unteren Rand der Hierarchie (Clickable Composable in Greeting) an die Composable-Funktionen oben weiterzugeben, die wissen, wie mit diesen Informationen umgegangen wird, wie im folgenden Beispiel gezeigt:
@Composable
fun MultipleGreetings(user: User = +memo { User("name", "surname") }) {
val onClick = {
user.firstName = "Changed"
}
Column {
Greeting("${user.firstName} ${user.lastName}", onClick)
Greeting("Android 10", onClick)
Button(text = "Change name", onClick = onClick)
}
}
@Composable
fun Greeting(name: String, onClick: () -> Unit) {
val formattedName = +memo(name) { name.substringBefore(" ").toUpperCase() }
Clickable(onClick = onClick) {
Text (
text = "Hello $formattedName!",
modifier = Spacing(24.dp),
style = +themeTextStyle { h3 }
)
}
}
Die Begrüßung teilt MultipleGreetings mit, dass darauf geklickt wurde, indem das vom übergeordneten Element als Parameter übergebene Lambda aufgerufen wurde. Wenn Sie die Anwendung ausführen, können Sie sehen, dass durch Klicken auf einen Begrüßungstext die Änderungen weitergegeben werden und die Begrüßungsinstanz oben neu gruppiert wird.
Datenfluss in Compose-Apps. Daten fließen mit Parametern nach unten, Ereignisse mit Lambdas nach oben.
Zusammenstellung und vorhandene View-Interoperabilität
: Compose Schreibfunktion kann in XML verwendet werden, Android kann auch mit vorhandenen View Compose Art und Weise zu schreiben, wie verwendet werden
Zusammenfassung: Compose stützt sich auf die Präsentation von Flutter und Swift UI ist der Code einfach, Echtzeit - Vorschau, ab 2019 Am 19. November war die aktuelle Version nur 0.1. Es wird erwartet, dass es nach der offiziellen Veröffentlichung von 1.0 weitere Funktionsupdates geben wird. Eine tägliche kleine Demo kann mit Compose vertraut gemacht werden.
Referenz:
https://codelabs.developers.google.com/codelabs/jetpack-compose-basics/#0
Diese neuen Funktionen sind die neuesten Fortschritte von Android Studio 4.0 und erstaunlich!
