In diesem Abschnitt lernen Sie, wie Sie Ihrem Design
Interaktionen hinzufügen, indem Sie
Interaktions-Handler.
Mit Interaktions-Handlern kann angegeben werden, wo sich eine Komponente
mit denen interagiert hat (z. B. durch Tippen oder Doppeltippen). Interaktions-Handler können hinzugefügt werden,
auf jede Schicht innerhalb
eines Designs anwenden.
Handler hinzufügen
Jeder Ebene können Interaktions-Handler hinzugefügt werden. So können Designschaffende angeben,
welche Teile der Komponente
interaktiv sind.
Wählen Sie die Hero-Artikel-Variante (den Rahmen) aus und klicken Sie auf + neben dem
Parameter und wählen Sie tap-handler aus, um einen Interaktions-Handler hinzuzufügen. Dieses
können Entwickler Code schreiben, der darauf reagiert, wenn ein Nutzer auf die Karte tippt.
Wiederholen Sie den vorherigen Schritt mit der Menü-Symbolebene im audio-item.
Variante. So können Entwickler ein Menü anzeigen, wenn Nutzende auf das Menü tippen.
.
Wenn Sie den Handler auf das Menü getippt auswählen, werden Sie feststellen, dass er nur
gilt für die Variante audio-item, da die anderen Varianten keine
ein Menüsymbol. Auf NewsCard angetippt gilt jedoch für alle drei
Varianten. Das bedeutet, dass Sie einen Handler (im Code) angeben können, der ausgeführt wird, wenn
wird eine der drei Varianten angetippt.
Parameter. Wie dies funktioniert, erfahren wir im folgenden Update
Komponente im Android Studio.
Benannte Version speichern
Markieren wir nun diese Version als bereit für den Import in Code.
Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.
Klicken Sie unten rechts im Dialogfeld auf „Share with developer“ (Für Entwickler freigeben).
Geben Sie auf dem Bildschirm Für Entwickler freigeben einen Namen und eine Beschreibung für den
Version.
Beispieltitel: Hinzugefügte Interaktionen
Beispielbeschreibung: Zwei Interaktions-Handler zu Karten hinzugefügt
Klicken Sie auf Speichern.
Drücken Sie Cmd + L (Mac) und Strg + L (Windows), um den Komponentenlink zu kopieren
in die Zwischenablage.
Komponente in Android Studio aktualisieren
Aktualisieren wir jetzt die NewsCard-Komponente:
Öffnen Sie in Android Studio das Fenster des Projekttools in der Ansicht Android.
Klicken Sie dann mit der rechten Maustaste auf app/ui-packages/news_card/
Klicken Sie im Kontextmenü auf Update UI Package (UI-Paket aktualisieren).
Klicken Sie auf , um Ihr Projekt zu erstellen. Damit werden das aktualisierte UI-Paket
eine aktualisierte Version des zusammensetzbaren Codes generiert.
<ph type="x-smartling-placeholder"></ph>
Sieh dir app/java/com/example/hellonews/newscard/NewsCard.kt an
Die Interaktions-Handler werden NewsCard als Parameter hinzugefügt.
(onNewsCardTapped, onMenuTapped)
// Design to select for NewsCard
enum class View {
HeroItem, ArticleItem, AudioItem
}
/**
* Displays a summary of a news article.
*
* This composable was generated from the UI package 'news_card'.
* Generated code; do not edit directly
*/
@Composable
fun NewsCard(
modifier: Modifier = Modifier,
view: View = View.HeroItem,
thumbnail: Painter = EmptyPainter(),
headline: String = "",
author: String = "",
date: String = "",
onNewsCardTapped: () -> Unit = {},
onMenuTapped: () -> Unit = {}
) {
...
In die App einbinden
Jetzt fügen wir unseren Interaktionen einige Handler hinzu.
Scrollen Sie in app/java/com/example/hellonews/ui/home/HomeScreen.kt nach unten zu
PostListArticleStories, um Zeile 175.
...
@Composable
fun HomeScreen(...)
@Composable
private fun PostList(...)
@Composable
private fun PostListArticleStoriesSection(...)
@Composable
private fun SearchArticlesSection(...)
@Composable
private fun PostListArticleStories(
postTop: Post,
posts: List<Post>,
createOnTapped: (String, String) -> () -> Unit
) {...}
@Composable
private fun AudioStoriesTitle(...)
@Composable
private fun PostListAudioStories(...)
@Composable
fun Dialog(...)
...
Fügen Sie für postTop Handler für onNewsCardTapped hinzu. createOnTapped öffnet eine
mit seinen Parametern als Titel und Textkörper.
In HomeScreen.kt nach unten scrollen bis PostListAudioStories, um die Zeile
260.
...
@Composable
fun HomeScreen(...)
@Composable
private fun PostList(...)
@Composable
private fun PostListArticleStoriesSection(...)
@Composable
private fun SearchArticlesSection(...)
@Composable
private fun PostListArticleStories(...)
@Composable
private fun AudioStoriesTitle(...)
@Composable
private fun PostListAudioStories(
posts: List<Post>,
createOnTapped: (String, String) -> () -> Unit
) {...}
@Composable
fun Dialog(...)
...
Fügen Sie jedem Post Handler für onNewsCardTapped hinzu. Da die Audiovariante
über ein Menü verfügt, weisen Sie createOnTapped zu onMenuTapped zu.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.