Transkripte
1. Einführung in den Kurs: Wenn Sie noch nicht in der
Anwendungsentwicklung sind und nach einem Job suchen, um
einen angemessenen Geldbetrag zu verdienen, werden
Sie es nicht bereuen, an diesem Kurs
teilzunehmen. Wie jeder weiß, ist
Florida eine
Trendtechnologie und hat die
Art und Weise, wie wir Anwendungen erstellen, verändert. Es ist ein plattformübergreifendes
Tool zum Erstellen von Apps für Android iOS Webdeckstopp
mit nur einer Codebasis. In diesem Kurs lernen wir
alles von Grund auf neu. Es ist für absolute Anfänger. Wir werden
über Widgets verstehen, wie man
Statusnavigationskonzepte verwaltet, Benutzereingaben
behandelt und
die Rest-API integriert. All diese Konzepte reichen aus , um Ihnen
als Entwickler Vertrauen zu geben. Hast du also für
deinen Traumjob geblutet? Ohne mehr zu verschwenden
als das Objektiv wird gestartet.
2. Ein neues Projekt erstellen und Dateistruktur verstehen: Jetzt ist es an der Zeit, dass wir unser allererstes
Florida-Projekt
erstellen. Um sicherzustellen, dass Flutter ordnungsgemäß installiert
wird, können
wir einfach einen Befehl
wie Flutter Version verwenden. Öffnen Sie zuerst Ihre
Eingabeaufforderung wählen
Sie einfach diesen
Befehl aus und drücken Sie die Eingabet Wenn Sie keine Version sehen können, haben
Sie
sie korrekt installiert. Und wenn es auch
neuere Versionen gibt, dann können Sie auch sehen wie eine neue Version von
Florida verfügbar ist. Aber im Moment
werden wir später
mit Flutter
2.2 arbeiten , wenn nötig, und mehrdeutig, wir werden ein Upgrade durchführen, aber es nicht wissen. Crf-Daten sind ordnungsgemäß in Ihrem System
installiert. Jetzt gibt es zwei Möglichkeiten, das
Florida-Projekt direkt
an meine Kinder zu erstellen . Zuerst wird Android Studio verwendet. Wenn Sie Android Studio-Los
verwenden, können Sie einfach
Android Studio anhängen und die erforderlichen
Erweiterungen weit flattern, da es
in Android Studio
ein Erweiterungstool geben wird als gut. Sie müssen einfach die Data Tools herunterladen
oder installieren. Aber ich bevorzuge keine angereicherte
Studie, weil
es zuallererst sehr, es ist, dass es
viele Ihrer PCD-Quellen verwendet. Es macht es langsamer, ich denke, weil ich ein Modus
eines VS-Code-Benutzers bin oder texturell
sterbe, bevorzuge ich uns Code. Das ist also Wave. Wir werden VS-Code verwenden. Stellen Sie sicher, dass Sie
es in Ihrem System installieren. Es ist sehr einfach. Du kannst es einfach runterholen. Um nun zuerst
ein Projekt zu erarbeiten, gehen Sie in den Ordner, in dem Sie Ihr erstes Projekt haben
möchten. Dann füge einfach eine gemeinsame Eingabeaufforderung und schreibe einfach,
Flutter, create. Dies ist der Code. Oder Sie können sagen, warten Sie, bis Sie ein neues Projekt erstellen. Und nach dem Erstellen wird
jeder Name, den Sie angeben ein Projektname
sein, der Ihr App-Name
ist. Sie können offensichtlich sagen, dass
Sie es später ändern können. Es ist kein Problem. Wir werden einfach
ein Flattern-Tutorial machen. Tutorial, okay, klicken Sie auf Enter. Es wird also einfach dein
aufgestelltes Projekt heruntergeladen und erstellt. Wenn du siehst, dass
alles erledigt ist, dann ist es das. Du hast es richtig gemacht. In, Inside Definitiv Projekt. Möglicherweise sehen Sie viele
Dateien, die wir nur jetzt besprechen
werden. Aber vorher
hängen wir einfach Yard VS-Code an, gehen zur Datei und hängen einfach an. Und hier
musst du dein
Projekt einfach so anhängen. Sie sehen also Ordner und
Dateien, die vorhanden waren. Sie haben erfolgreich VS Code
verwendet. Jetzt. Was wir jetzt tun werden, werden
wir mehr über
diese beiden Ordnerstruktur sehen. Es gibt verschiedene Ordner. Das ist Android, iOS Live, Test von Spec Dot YAML als Web, Lord of Thing Ordner und Dateien. Wir müssen uns nur daran erinnern, dass im Android-Ordner gelöschte
Android-Dateien gespeichert werden. Wir ändern es nicht sehr. Wir werden
es nur für einige Dinge verwenden wie das
Symbol Ihrer Anwendung, Android-Gerät, wie heißt
die Anwendung? Sind nur sehr wenige Dinge spezifisch
für Android sind Plugins, aber nicht den ganzen Kurs. Gleich mit dem iOS
gefalteten iOS-Ordner haben alle Dateien , die zum
Erstellen einer iOS-Anwendung verwendet werden. Aber wir werden nur
diese Änderungen vornehmen, kleine, kleine Änderungen, die Knoten erworben
haben, nicht dunklen Farbcode. Jetzt, da dieses Blatt fällt, das ist die Hauptsache, dies ist der Ordner, in dem wir ihn immer wieder benutzen
werden. Hier werden wir die meiste Zeit
arbeiten. Standardmäßig
enthält es Main.Jack. Dies ist der Einstiegspunkt
der Fotoanwendung, wie ich bereits in diesem Datenabschnitt
gesehen habe. Und dieser Hauptpunkt, Punkt oder die Hauptfunktion, ist der Einstiegspunkt. Wenn du gehst und auf sie klickst. Diese Hauptfunktion hier, speichern. Und auf jeden Fall
wird es auch andere Zitate geben. Und Sie könnten derzeit
überwältigt werden. Also sieh dir diesen Code nicht an. Denken Sie einfach an diese
Hauptfunktion. Danach. Es gibt einen
Test, testen Sie dies, wo Sie
den Unit-Testcode
für die Anwendung ablegen . Wenn Sie bereit sind Ihre Anwendung
produktionsbereit ist, müssen
Sie
sie viel Zeit testen. Testen ist ein ganz
anderes Thema, das wir nicht behandeln werden, denn
bevor Sie zum Test gehen, müssen
Sie über eine sehr saubere, strukturierte
Flattern-Anwendung verfügen. Und dann ist die nächste und sehr wichtige Datei
Pub Spec Dot YAML-Datei. Diese Datei definiert die Versions - und Build-Nummer Ihrer App. Wenn Sie sehen, sehen wir diese Version
nur
und diese wird verwendet, wenn Sie Ihre
Anwendung an einem beliebigen Ort, an einem
Torr oder einem iOS Store veröffentlichen . Zuerst wird dies
und dann diese Abhängigkeiten verwendet . Und Sie fragen sich vielleicht,
was sind Abhängigkeiten? Wir werden es auch
im nächsten Video sehen und verstehen. Weil Abhängigkeiten bedeuten, dass Ihre Anwendung
definitiv von Software
oder Bibliothek oder Plugins von Drittanbietern abhängt. Dies ist auch sehr wichtig. Es sollte ein separates
Video zu besprechen haben. Aber denken Sie daran, dass ich andere Ordner und
Dateien
übersprungen habe , weil wir sie meistens nicht wirklich berühren
müssen. Wir müssen nur an Leap,
Pub Spec Dot YAML und wenig
weiter im Android-
und iOS-Ordner arbeiten Pub Spec Dot YAML und wenig . Jetzt haben Sie Ihre
Flatter-Applikation in Betrieb. Es ist Zeit, es auf einem Gerät auszuführen. Für das Gerät hängen Sie einfach Android Studio an, da Sie einen Emulator haben
sollten. Wenn Sie den Emulator nicht haben, können
Sie auch Ihr physisches
Android-Gerät verwenden. Sie müssen nur sicherstellen, dass
Sie den Debugging-Modus
in den Einstellungen Ihres Android-Geräts aktiviert haben . Hier. Ja, klicke
auf, konfiguriere es. Hier habe ich ein Gerät. Sie können auch Ihr
virtuelles Gerät erstellen. Es ist sehr einfach, aber ich habe diese große Zelle drei
APH wäre 8 sein. Ich lasse es einfach laufen. Es kann ein bisschen dauern. Sehen Sie, Ihr Emulator ist hier, es heißt Android-Gerät. Jetzt
müssen Sie einfach tun, wenn Ihr VS-Code zum Hauptpunktpunkt
geht. Und klicken Sie in ihrem Lauf einfach auf Debuggen starten. Und jetzt
musst du eine Weile warten, denn zum ersten Mal wird
es einige Zeit dauern,
aber du kannst bleiben. Es startet unseren Hauptpunkt
auf diesem Emulat, dass
der Debug-Modus. Das ist also gut. Das funktioniert. Ich möchte nur sagen, dass überflutet ein sehr großartiges Werkzeug
ist. Es ist, als wäre es sehr einfach zu verstehen und einfach zu arbeiten. Sie haben auch verstanden, dass
die grundlegenden Konzepte in jeder Programmiersprache
dieselben sind wie in der dunklen Sprache. Denken Sie
daran, dass
Ihr System möglicherweise verzögert ist, wenn Sie Android Studio verwenden . Sind, kann es hängen, weil
es in Ihrem RAM verwendet wird. Sie können also
keine andere Sache verwenden oder tun , während
Sie
an einem Android-Emulator arbeiten , da Ihr
System dadurch sehr hart funktioniert. Und Sie möchten nicht abstürzen, weil Sie das System aktualisieren konnte damit nicht umgehen. Ja. Es zeigt
Build-Ausgänge flattern, APK, App Debug Dot APK. Ich hoffe, Sie wissen
, dass APKs Erweiterung oft
Android-Geräteanwendung. Jetzt okay. Siehst du, du wirst diese Bildschirmbreiten wie
Flutter Demo-Homepage haben. Und in ihrem Mittelohr wird es sein, du hast den Knopf
so oft gedrückt und ein Knopf ist da. Wenn ich darauf klicke, siehe 1, 2, 3, 4, 5, es nimmt zu. Also haben wir endlich unsere Fluttern-Anwendung in unserem Emulator
laufen. Im nächsten Video werden
wir mehr über die Konzepte wie
Widgets und andere Dinge sprechen. Vorerst. Ich hoffe,
du hast es genossen.
3. Was sind Widgets: Heute werden wir
über Widgets sprechen. Wenn wir in flirted arbeiten. Sie werden diesem
Wort viel Zeit begegnen,
weil ich im Rahmen des Aufwands geschrieben habe Antrag ist ein Budget. Von einem einfachen Text zwei Schaltflächen bis hin zu Bildschirmlayouts. Ich gebe dir einfach ein Beispiel. Wenn Sie kommen, wenn Sie Erfahrung
mit der Webentwicklung haben, werden
Sie verstehen, dass es Navbar,
Textfeld, div, Tabellen
in Bootstrap oder in HTML gibt. Im Flattern. All das, was andere UI-Elemente als Widgets bezeichnet
werden. Das war's. Es ist also kein sehr
schwieriges Konzept. Ich sage nicht, dass Widgets es sind,
es sei denn, Sie schreiben auf Leader, aber aus Grund des grundlegenden Verständnisses müssen
Sie daran denken, müssen
Sie daran denken dass
es sich um ein Widget handelt, wenn Sie etwas
auf diesem Bildschirm sehen . Das war's. Jetzt hat jedes Widget
Eigenschaften oder Sie können Argumente sagen
, die wir übergeben müssen. Wenn Sie sich also an
das Konzept der benannten Argumente
aus dem früheren Dark-Programm erinnern das Konzept der benannten Argumente , zweifeln Sie Tutorials,
haben wir es bereits getan. die gleiche Weise. Das hätte ich getan. Widget ist auch eine
Funktion, die Sie speichern können da
es auf der Rückseite
des Flutter-Kerncodes wie ein
benanntes Argument erwähnt wird. Ich gebe dir nur ein Beispiel. Hier. Definitiv diesen Code, den
du nicht anfassen solltest. Du wirst einfach sehen, wovon
ich rede. Dieses Zentrum ist ein Widget. Also ist es Eigentum
akzeptiert ist 11. Eigentum heißt Kind. Stell dir mal vor. Ja, ich bin nur, ich schreibe es nur hier. Wir haben ein Function Callcenter. Und hier könnte es etwas
als
benanntes Argument akzeptieren. Angenommen, String-Name. Hier ist es dasselbe,
aber es ist starre
Eigenschaft, die Kind genannt wird. diesem Grund nennen wir dieses zentrierte Widget untergeordnete Eigenschaft
neu indizieren. Wir senden erneut ein
anderes Widget, diese Spalte. In den kommenden Videos werden
wir tief in
alle budgetstabilen
Mittenspaltentexte eintauchen , was auch immer sie sind, Widgets, die wir jedes
und alles verstehen
werden. Aber im Moment
möchte ich nur einen grundlegenden Überblick geben. Zumindest solltest du wissen was das Wort Widget bedeutet
. Jetzt können Sie strahlen, das hören, und diese Eigenschaft wird meistens das
Widget als Wert akzeptiert, wie ich Ihnen gesagt habe,
wie ich Ihnen gezeigt habe, dass
in dieser untergeordneten Eigenschaft, Es akzeptiert eine Spalte
was ist wieder Abhijit. Und das Letzte ist, dass
jedes Widget
mit seinem Namen beginnt ,
gefolgt von Klammern. Also nochmal werde
ich Schläger und nehme an, das ist ein starrer Text,
dann Klammer. Und in sich selbst
haben Sie andere Eigenschaften. Angenommen, ein Kind wie dieses
und das, wieder ausgenommen, schätzt es, aber in einem
Text ist es kein Kind, ich denke, es ist anders, aber ich gebe
Ihnen nur ein grundlegendes Beispiel. Jetzt. Sieh dir dieses Bild an. Dies ist ein Weg, dies ist eine Anwendung, die mit Flutter
erstellt wurde. Wenn Sie also
diesen Button von Verde sehen können, sind dieses Bild oder dieser Pfeil, all das, unsere Budgets. Dieser Text ist wieder ein Widget. Dieser Navigationsbalken ist wieder durchschnittlich. Ein Beispiel. Es ist eine sehr einfache Anwendung für die Lieferung von
Lebensmitteln, aber sie sieht so gut aus, weil
sie mit Flutter gebaut wurde. Diese Kategorien
sind also auch ein Widget namens row, da es von
links nach rechts und horizontal ist. Dann in diesem kreisförmigen
Ding oder was auch immer, oder das Suchsymbol
ist auch ein Widget. Dasselbe ist dieses Beispiel. Diese Suchleiste ist
wieder ein Widget. Diese Navigationsschaltfläche
ist wieder ein Widget. Dieses Bild ist wieder ein Widget. Was das Widget
gibt es das Bild. Das war's. Sie werden
es im späteren Video sehen. Ich möchte
Ihnen nur zeigen, dass alles, was Sie
gerade auf dem Bildschirm sehen, alle unterschiedlich sind, verschiedene Widgets. Das war's. Wir tun es nicht, wenn du überwältigt
bist, dann ist es auch okay,
weil es in Ordnung ist. Du hast unsere Arbeit nicht
gemacht, so etwas gemacht, aber es ist sehr einfach. Okay, bis jetzt reicht
das mit dem Thema Widgets. Danke.
4. Arbeiten mit Assets und Pubspec Datei: In der heutigen Sitzung werden
wir uns mit
einem sehr grundlegenden Thema der Vermögenswerte befassen . Vielleicht fragen Sie sich,
was sind Vermögenswerte? Stellen Sie sich vor, Sie
haben eine Anwendung, und auf jeden Fall werden
Sie in
dieser Anwendung einige Bilder haben, einige verschiedene Bilder. Sie sind das Logo eines Unternehmens, sind einige verschiedene Schriftdateien, sind einige Animationen,
was auch immer Sie sehen, Sie haben einige verschiedene
Dateien für Ihre Anwendung. Zu dieser Zeit. Du musst
sicherstellen, dass du es getan hast. Sie haben für Ihr
Flutter-Projekt mitgeteilt , dass dies
die Vermögenswerte sind , die ich in
meine Bewerbung aufnehmen möchte. Das war's. Bisher müssen Sie
in Ihren
Filterprojektordner gehen. Sie werden hier verschiedene
Ordner sehen. Sie müssen nur
einen neuen Asset-Ordner erstellen. Oder was meinst du damit, dass
du geben willst? Normalerweise gebe ich IT-Assets
, weil es für mich bequem ist. In den Assets, welche Assets
Sie möchten, wenn Sie nur möchten, können
Sie auch
alle Ihre Dateien hier ablegen ,
die wahlweise. Aber ich bevorzuge es. Auch hier können Sie einen Ordner
mit Bildern erstellen, wenn Sie möchten. Entschuldigung. Wenn du willst. Wenn Sie möchten, können Sie auch
verschiedene Ordner haben, z. B. Auf diese Weise haben Sie Ihre ältere
Ordnerstruktur richtig. Jetzt in den Bildern, kopiere
einfach jedes gewünschte Bild und füge es
einfach ein. Ich habe das, wenn wir das Bild sehen wollten
. Was Sie tun müssen, ist, dass Sie Ihren
Ordner richtig hier haben. Aber jetzt ist es soweit. Wir implementieren unsere Wir sagen
unserem Florida-Projekt, Dies ist der Assets-Ordner. Dafür. Du musst zu dieser KML-Datei gehen. Denken Sie daran, dass
diese
YAML-Datei für Pub Spec Dot sehr
sensibel ist, in Ordnung, denn wenn Sie
einen zusätzlichen Tab oder zusätzlichen
Speicherplatz haben oder was auch immer, stürzt
Ihre gesamte Anwendung ab. Denken Sie also daran und
seien Sie sehr vorsichtig. Fass nichts an. Denk einfach daran hier. Dennoch können Sie
diese Vermögens-Sache sehen , die im Kommentar enthalten ist. Gehen Sie also einfach zu einem und vor einem und stapeln Sie einfach zwei Mal
den Abstand zurück. Das war's. Und wieder hier, zwei Mal
Rücktaste. Nicht mehr als das, denn wenn Sie ein Knie
sehen, denken Sie
daran, rückgängig zu machen und es erneut zu versuchen. Jetzt werden diese Assets
dieser Assets-Code nur dort gemacht, um diese Ordnernamen zu
erwähnen. Hier. Ich schreibe
es einfach von Anfang an. Es ist wie Vermögenswerte
und dann Bilder, und dann leg, das war's. Das bedeutet einfach
diesen Assets-Ordner. In diesem Ordner ist gerade
ein Bilderordner hochgeladen. Ich werde meine
Florida-Debug-Sitzung beenden. Seit Sie einen
Wechsel gemacht haben Coach Scharniere. Und einfach, wenn Sie Schriften hier einschließen
möchten, Sie die Schriftart müssen Sie die Schriftart
nur rückgängig
machen und den Speicherort Ihrer
Schriftdatei erwähnen. Im Moment haben wir es nicht
mit Schriftarten zu tun, weil es nicht das Wichtigste in Ihrer Anwendung
für Anfänger ist. Jetzt mehr über diese
Pub-Spezifikationsdatei. Denken Sie daran, das erste
Wichtigste ist diese Version. Und im Moment werden wir es nicht benutzen. Sie verwenden es nur,
wenn Sie
Ihre Anwendung in einem Android
- oder App Store, Apple App Store, veröffentlichen Ihre Anwendung in einem Android . Zweitens ist der Ordner „
Abhängigkeiten“. Jetzt fragst du mich vielleicht, was ist diese Abhängigkeit? Wenn Sie ein
externes Paket haben, unser Plugin in
Year Flood Anwendung zu implementieren, verwenden
wir diese Abhängigkeiten Sache. Und wenn ich
Ihnen ein externes Paket erzähle , haben Sie
dafür eine
Website namens Pub Deaf. Sie können einfach sehen, dass
ein Paketmanager für die
Flutter-Anwendung ist. Hier bekommst du viele
Pakete und alles. Siehe Parser-Teil, Google-Anmeldenummernauswahl und ich nehme teil. Dies wird Ihnen also helfen,
die Anwendung sehr schnell zu erstellen, und Sie
müssen sie definitiv verwenden. Also gehe ich einfach auf die Suche. Angenommen, HTTP. Dann haben Sie diese STDP-Bibliothek. Geh einfach. Und ihre Abhängigkeiten müssen
Sie
es einfach so kopieren und unten und speichern. Aber im Moment machen wir
es nicht, weil das davon abhängt. Dann verwenden wir derzeit eine Untereinheit, die wir derzeit verwenden, zumindest
zeigen, was
diese Assets und Pub
Spec Dot YAML-Datei ist . Und was sind externe
Abhängigkeiten , die Sie später
ausgiebig verwenden werden , wenn wir eine
Zwischendatenanwendung
erstellen. Ich hoffe, Sie haben die Konzepte
verstanden. Danke.
5. Text und Gerüst: Jetzt ist es an der Zeit
in dieser Sitzung, wir werden direkt auf
das Konzept der Flattern eingehen. Das heißt, wir müssen
uns die Hände schmutzig machen, indem wir selbst Code
schreiben. Bringen Sie Ihren VS-Code heraus und gehen Sie
einfach zu Main.Jack. Was Sie tun müssen, ist, dass Sie
einfach den
ganzen Code außer
der Hauptfunktion entfernen müssen einfach den
ganzen Code außer
der Hauptfunktion entfernen . Genau so
entfernen wir einfach den gesamten Code. Und in der Datei main.js, die der Einstiegspunkt ist, musst
du einfach meine App und meine
materielle App schreiben und dann meine erste App
titeln. Und dann nach Hause. Das war's. Also haben wir das
Materialpaket
ganz oben importiert , weil wir sie verwenden
werden
Material Design Rich, entwickelt von Google, dem Materialdesign von
Android. Für iOS haben Sie ein
Cupertino-Paket, das
Sie auch verwenden können, aber es funktioniert nur auf Mac-System. Werden Sie sagen, dass Sie
ein iOS-Gerät benötigen ,
damit es gut aussieht? Aber die meiste Zeit verwenden
Sie
das Materialdesign und verwenden
einfach ein paar iOS. Buttons sind auch Elemente
, wenn Sie in Zukunft möchten. Und Sie können auch sehen, dass
wir Schulden im
Materialdesign umsetzen. Warum verwenden wir hier die
Metadaten-App. Und die materielle App ist eine Jungfrau. Wie gesagt, es sind der Name
und dann Klammern, die zwei Eigenschaften akzeptieren. Das ist der schnellste Titel
und der zweite ist ganz. Titel ist der Name
Ihrer Anwendung, der in diesem Text angezeigt
wird, aber es ist Austragungsort. Gehen Sie aus Ihrer Bewerbung heraus , wenn sich Ihre Bewerbung im Hintergrund
befindet. Aber und dieses Zuhause ist das Hauptlayout, das für den Benutzer sichtbar
sein wird. KV hat also unsere erste
Flutter-Anwendung. Sie haben bisher verstanden, dass die Hauptfunktion der Einstiegspunkt
ist. Danach fragst du mich
vielleicht, was ist diese Run-Up-Ran-App? Ist das die Schuld? Was Sie sagen werden, es ist die Standardansicht des
Flatterns beim Ausführen unserer Anwendung. Man muss sich also nur daran erinnern, weil
es vordefiniert ist. Vordefiniert können wir das nicht
oder wir können es nicht ändern. Aber wir können
mehr über Widgets wissen, was das Kernkonzept ist. Zunächst werden
wir also über dieses Text-Widget sprechen. In jeder Anwendung. Auf jeden Fall müssen Sie
etwas ausgeben , das der Benutzer lesen kann. Ich dass es sein Benutzername oder was sind
einfache Basisdaten. Dazu
müssen Sie auch zuerst wissen, welches Widget Sie verwenden müssen,
um auf dem Bildschirm zu drucken. Früher haben wir einfach
Druck in diesen dunklen Code geschrieben. Denn zu dieser Zeit
haben wir gerade in
dieser Debug-Konsole gedruckt ,
was nichts war. Es war nur noch weiter, dass
Entwickler Bequemlichkeit haben. Aber jetzt werden wir
etwas schreiben , das dem Benutzer
angezeigt wird , der eine Anwendung
ist. Text ist also dieses Widget als Toluolname und
dann Klammern. Und in diesem ist es außer dem
ersten als String, was ein Positionsargument ist. Man muss sich
auswendig an
diese dunklen Konzepte erinnern , um sicherzustellen, dass man
nicht verwirrt wird. Fragen Sie was ist das, warum dieser Parameter so
gesendet wird und nicht als benanntes Argument? Ich komme auch zum
Namensargument zurück. Aber jetzt müssten Sie
einfach nur speichern, dann Ihren Emulator aufrufen
und Ihre Anwendung ausführen. Und Sie können auch sehen
, dass Testdatei
ihr gehört , weil wir die Gerichte
entfernt haben. Wenn Sie möchten, können
Sie
diesen starren Test einfach entfernen. Vorerst. Weil wir es nicht brauchen. Führen Sie jetzt einfach
Ihre Anwendung aus. Du musst es wieder tun, es kann eine Weile dauern. In der letzten Sitzung haben
wir auch verstanden, wie Vermögenswerte importiert werden. Deshalb müssen
wir Debugging-Sitzung dieses Mal verkaufen müssen. Wenn wir grundlegende
Änderungen in der App vornehmen, müssen
wir das Debuggen beenden
und
es dann neu starten , damit dies weiß, welche
Änderungen der Druck vorgenommen hat. Ich möchte nur, dass
ihr euch vertraut macht. Gewöhnen Sie sich an dieses
Widget-Konzept des Schreibens, das Vorname,
dann Klammern,
dann innerhalb der Klammern I ist , dann wird es ein Namensparameter
wie dieser Titel oder Name auf einem nationalen Parameter
wie dieses Textfeld. Auch hier wird es ein
bisschen dauern, bis du warten musst. Es dauert ein bisschen länger. Es sind zumindest unsere
Debug-APKs gebaut. Es ist ein sehr
zeitaufwändiger Prozess. Aber damit
etwas Gutes passiert, müssen
wir warten. Ignoriere einfach, was sie in
der Debug-Konsole angezeigt
wurden. müssen wir uns
keine Sorgen machen. Aber sehen Sie, jetzt
wird die Ausgabe hier sein. Und wir haben eine sehr häßlich aussehende erste
Predator-Anwendung. Aber sehen Sie nur,
dass wir erfolgreich Texte auf
dem App-Bildschirm
ausgegeben haben. Das heißt,
wenn Sie diese Anwendung
bitte an alle
Benutzer veröffentlicht haben , werden diese Anwendung bei
jedem
Anhängen diesen Text meiner
ersten Flutter-Anwendung sehen. Nun denkst du vielleicht, das sieht sehr hässlich aus. Dieser Text bleibt an der Spitze und dass diese Weiß
ihn schön machen, wir werden
unsere nächste Region verwenden. Das ist Gerüst-Widget. Was ist ein Gerüst? Um die Farbe der
gesamten Anwendung zu ändern oder die
AB-Leistenschaltflächen zu verwenden , ist
alles wie Navigieren, unteres Blatt oder irgendetwas. Wir verwenden dieses Gerüst-Widget. Es gibt Ihrer Bewerbung ein gutes Aussehen
. Es hat alle
notwendigen Elemente. Jetzt
gehen wir einfach zu unserem Code. Einfach im Haus entfernen und
schreiben Sie Gerüste. Dies ist auch ein Widget, das akzeptiert und nicht weiß, welche
Eigenschaften akzeptiert werden. Du kannst einfach steuern
und Raum und siehst es hier zuerst mein Labor stützen. Dies sind alle
Eigenschaften, die es akzeptiert. Zuerst wirst du es tun, du
kannst APA wählen. Dieser Teil ist wieder
außer einem App-Widget. Die Seite, die das Bart-Widget hat. Klicken Sie erneut auf Typ
Control plus Space. Hier werden viele Immobilien geben
, die wir von zwei brauchten. Dann akzeptiert dieser Titel den Text, flatterte Steine. Und jetzt startest du neu. 21 kann einfach S kontrollieren
und jetzt diese Änderung sehen. Siehst du, es sieht sehr
schön aus als zuvor. Nur weil wir ein Gerüst-Widget
benutzt haben. Das hier, was auch immer Sie
sehen, ist diese AB-Leiste oder dieses weiße Ding ist wegen
dieser Kappe für das Widget
drinnen. Jetzt ist dieser weiße Teil der Körper, in dem
Sie alles ausgeben,
was Sie
dem Benutzer in den
ersten Eigenschaften des Gerüsts zeigen möchten . Dann folgen Sie einfach
diesem Komma-Steuerelement und dem Raum und dem rechten Körper. Im Körper haben Sie
einen weiteren Text, der uns die Anwendung klären
lässt. Und wieder kontrolliere S. Also denkst du vielleicht, dass
nichts gezeigt wird. Und dieser Grund liegt daran , dass diese Farbe dieses Textes und der Farbregisterkarte
Hintergrund zwei sind. Um nun die
Hintergrundfarbe zu ändern, würde
ich einfach
jedes Licht ins Gerüst gehen . Hintergrundfarbe. Du musst nicht verstehen,
was ich gerade mache. Hintergrund, schätze ich. Mal sehen, ob ich
die Anwendung neu gestartet habe. Es zeigt meine erste
Ebenenabscheidung , weil es keine Farbe hatte. In den kommenden Videos werden
wir verstehen, wie man Farben so
ändert. Ich habe es jetzt getan, nur um
dir die Leistung des Körpers zu zeigen. Dieses rote Ding ist also Stub
Body Ihrer Anwendung. Sie müssen sich nur noch daran
erinnern , dass APA und Körper Eigentum
des Gerüst-Widgets sind. Apa hat Titel als Eigenschaft, die jetzt
Text-Widget weit akzeptiert, da Titel
berechtigt ist, können Sie
jedes Widget haben , das wir einzeln
besprechen werden. Wenn wir eine andere
Eigenschaft der AB-Leiste sehen möchten, können
Sie einfach unter Titel gehen
und rechts, zentrieren Sie sich. Und dann stimmt es. Dies ist eine Eigenschaft, die selbst besagt, dass
sie diesen Titel zentrieren wird. Dieser Titel der App-Leiste. Wir gehen in den Mittelpunkt
Ihrer Bewerbung. Ich hoffe also, dass Sie
gerne gelernt haben , weil Sie in
der Lage sind , eine grundlegende
Buchstabenanwendung zu erstellen. Zumindest hast du gerade etwas
auf dem Bildschirm, was sehr cool ist. Im nächsten Video
werden wir mehr über Widgets
für Erwachsene erfahren, denn wie
ich immer wieder sagte, sich bei
Flattern alles um Budgets. Danke.
6. Mitten und Floating: Wir werden also weiterhin andere Haushalte
erforschen. Da Flint nicht wusste, ob Sie eine sehr einfach
aussehende Anwendung
haben, verwendet
es nicht nur
eine UA mit etwas Text darin. Das nächste Widget, über
das wir
sprechen werden , ist, dass der Besuch des
Zentrums
sehr einfach ist und tut,
was sein Name sagt. Es zentriert jeden starren. Wenn wir also
den Text im Körper zentrieren
möchten, können wir diesen Text
in einen Zentrumsbesuch umwickeln. Sie können das also sehen, meine flache Replikation befindet
sich ganz oben links. Wenn Sie es in die
Mitte des Körpers haben wollen, dass die Mitte des Bildschirms. Wir müssen es einfach einpacken. Und was meinst du, was
meinst du mit „rapt“? Wenn du gehst, kannst du
einfach
dieses materielle Ding darin sehen ,
dann ist es Gerüst. Dieser App-Teil ist
Wrap unters Gerüst. Dieser Text ist
in die AB-Leiste eingeschlossen. Wenn ich es jetzt verwenden möchte, Textcenter Budget, können
Sie einfach gehen. Ein Schritt besteht darin, die Pflege einfach zu
kopieren oder zu schneiden. Dann zentriert Chai starr. Das ist starr. Dann gehen wir rein, wir haben ein Kindereigentum und wir haben uns einfach verdreht. Dies wird also von einem anderen
Widget umwickelt, das zentriert ist. Und als Kasse unsere App. Siehst du, wir haben diesen Text in
der Mitte des Bildschirms. Denk dran, ich habe dir
gesagt, dass dies
ein erster Weg war und der zweite
war, dass ich es einfach rückgängig machen werde. Der zweite Weg ist einfach Cu, klicke auf diese Glühbirne. Denk so Fixes. Und hier kannst du ein Widget erstellen
und einfach nur ein Zentrum. Dies ist auch eine andere
Möglichkeit, dasselbe zu tun. Denn wenn wir
eine größere Anwendung haben, ist
es unmöglich, dass
wir ständig einfach ausschneiden und einfügen , da es viele Kommas gibt
, sie sind keine Klammern, die an unserer Anwendung
beteiligt sind. Jetzt. Denken Sie also daran, dass wir die Zeichenfolge
nicht direkt in
dieser Mitte
drucken können, als würde ich sie einfach ausschneiden und sehen, dass Sie hier
einfach direkt eine
Zeichenfolge schreiben können . Nein, Sie müssen
Kindereigentum in diesem Kind verwenden. Sie haben, und Sie
müssen ein anderes Widget verwenden, nämlich das Text-Widget. Im Moment verwenden wir, aber da Child ein
Datentyp von Widget ist, können
Sie hier sehen, ob ich den Mauszeiger darüber fahre, bedeutet
das, dass es jede Region
akzeptiert. Das Gesetz, das wir nicht
über andere Widgets erfahren haben. Deshalb verwende ich nur
das grundlegende Text-Widget. Ich hoffe also, dass Sie
das Center-Widget verstanden haben. Es ist ein sehr einfaches Widget. Das nächste Widget,
über das
wir sprechen werden , ist die schwebende Aktionsschaltfläche. Also gehe ich davon aus, dass
du die WhatsApp-Anwendung bereits kennst. In deiner WhatsApp-Anwendung unten rechts
siehst du ein
Symbol auf unserer Schaltfläche. Das ist der schwebende
Action-Button. So können wir
die schwebende
Aktionsschaltfläche durch die Eigenschaft mit dem gleichen Namen
implementieren , der eine schwebende
Aktionsschaltfläche zum Gerüstbesuch ist . Was ich damit meine. Du hast dein Gerüst. Wir haben es hier gemacht. Als erstes Objekt haben wir ihm gerade
eine Hintergrundfarbe gegeben , da
wir es rot machen müssen. Zweite Unterkunft war die AB-Bar. Drittes Eigentum war Leiche. Jetzt haben wir dieses Komma drin. Wenn ich ein C kontrolliere, gibt es so viele andere
Eigenschaften, die ausgenommen sind. Aber wir werden den
schwebenden Action-Button benutzen. Diese schwebende Aktionsschaltfläche
akzeptiert also den Widget-Namen. Schaltfläche „Schwebende Aktion“. So. Sie können sehen, dass es jetzt eine
schwebende Aktionsschaltfläche hat. Und es muss
dies unterstützen, was obligatorisch ist. Zuerst dieses Kind, und das
zweite ist gedrückt. Also Kind, wir werden nur eine einfache Textanzeige
haben. Ich werde unsere Anwendung
speichern neu starten , damit die Änderungen in der Benutzeroberfläche angezeigt
werden. Auf der rechten Seite sehen Sie diese Schaltfläche „Hinzufügen“. Dies ist also eine schwebende
Aktionsschaltfläche. Im Moment, wenn wir darauf klicken, glaubt
es nicht, ob Sie es sehen
möchten, Sie können einfach weitermachen, drücken und einfach schreiben, drucken, hallo und speichern. Wenn ich jetzt gehe und rechts klicke, wenn ich gehe und klicke
auf unseren Button Hinzufügen. Im Debug kannst du
sehen, dass es diesen
Hallo-Print gibt , der ausdruckt. Aber die Hauptsache ist, dass
Sie verstehen müssen , dass dies die
Art ist , Code einer
Flutter-Anwendung zu schreiben. Gear-Eigenschaften, es gibt
Widgets innerhalb von Widgets. Auch hier Dateneigenschaften. Diese Eigenschaft wird wieder
mit Ausnahme eines Widgets angezeigt. Und dann ist dies unkomprimiert wieder die Eigenschaft der
schwebenden Aktionsschaltfläche. Sie müssen sich daran erinnern,
wo es beginnt, wo es endet, welche
Eigenschaft welche starr ist. Und wenn Sie immer noch Länder
bekommen, möchte
ich nur sagen, dass sie Ihnen , dass dies eine Funktion ist. Wir rufen eine Funktion der
schwebenden Aktionsschaltfläche auf und senden
dann zwei Argumente, die Menschen
nennen. Das ist das erste
außer dem Widget speichern. Und die zweite
akzeptiert eine Funktion. Das ist wieder für jeden starren dämlichen ersten Buchstaben
immer großgeschrieben. Sie können dies sehen f, dieses t, sein Zentrum, das Gerüst S. Also hat jedes Widget
Großbuchstaben Phosphor, und jede Eigenschaft akzeptiert ein anderes
Widget als Wert. Dies ist also ein eigenschaftliches Kind, es akzeptiert Text und alle diese Eigenschaften haben eine Statistik
mit diesen kleinen Buchstaben a,
B, a , einem Balken,
einer schwebenden Aktionsschaltfläche. Dieses f, das
ist die Eigenschaft, dieses f ist Kleinbuchstabe. Und in
den meisten Widgets wird diese untergeordnete
Eigenschaft. Und hier kann man Kind sehen, das ist auch Kind. Das Kindereigentum
wird also üblich sein. Viele zweistellige Ziffern. Wenn Sie
immer noch verwirrt sind, werde
ich Sie nur bitten für einige Zeit
innezuhalten
und es einfach
alleine zu machen und
einige Fehler zu machen
, damit Sie es richtig
verstehen. Aber ich hoffe, dass dieses Video
gelöscht wurde und Ihnen
die Informationen von
zwei oder mehr Widgets gegeben hat. erste ist der Besuch im Zentrum, und der zweite ist der
schwebende Action-Button, dem wir in den kommenden Videos mehr
Dinge besprechen werden.
7. Farbe und Styling ändern: Hey, willkommen zurück. In dieser Sitzung lernen wir
, wie man die
Farbe ändert und unseren Elementen Styling
verleiht. Nun, um die Farbe von
Elementen wie
der AB bar v zu ändern , haben
bestimmte Eigenschaften. Wie in einer App-Leiste gibt es eine Eigenschaft
namens background-color. Jetzt haben wir
es normalerweise freundlich und haben es mit anderen Immobilien zu tun. Wir hatten den Wert von string
oder integer oder ein Widget. Aber jetzt
ist ein anderer Fall etwas anders. Der Wert einer Farbe wird über die Tastatur
beibehalten. Lassen Sie uns punkten und
gefolgt vom Namen der Farbe. Jetzt machen wir es praktisch. Wir werden jetzt die
Farbe unserer App-Leiste ändern, gehen und sehen jetzt
andere Eigenschaften hier. Und einer von ihnen ist
Hintergrundfarbe ist nur gerade
Farben, dunkel, bernsteinfarben. Es ist eine der Farben. Prüfen Sie jetzt unsere Bewerbung. Dieses Blau, ändert es sich? Ja, es hat sich geändert. Jetzt ist es in gelber Farbe. Gelbliche Farbe. Sie können sich trennen, aber es ist definitiv ein
anderer Farbton. Ich hoffe also, dass Sie
verstanden haben, dass es sehr einfach ist, Unvorsichtiges zu
geben. Diese Farben punkten und wenn dieses Widget eine
Eigenschaft hat, die hier ist, seine Hintergrundfarbe,
in anderen Grenzen, kann
es anders sein. Um nun die Farbe
der schwebenden
Aktionsschaltfläche zu ändern , müssen
wir erneut prüfen,
ob es eine Eigenschaft gibt. Jetzt können Sie sehen, dass es eine Eigenschaft namens
Hintergrundfarbe gibt, und wir schreiben nur Farben. Dot früher. Diese Farbe war blau. Ich mache es einfach grün. Mal sehen. Funktioniert es? Ich hoffe, ja. Ja, es hat sich geändert. Wenn Sie also eine reale
Anwendung
erstellen, haben
Sie natürlich eine reale
Anwendung
erstellen, verschiedene
Farbkombinationen für Ihre App. Es ist also notwendig, das
zu verstehen, welche Farbe zu verwenden ist und wie
der Farbcode implementiert wird. Als Nächstes,
was wir haben, was wir tun werden, ist, wie
wir dieses Textelement stylen. Ändern Sie also die Farbe, unsere Geschenke, das Styling zu einem Text. Wir müssen dem Text-Widget eine Eigenschaft
des Stils geben. Jetzt können Sie einfach lesen, es eine Eigenschaft
namens style gibt. Gehen wir zum Textelement. Dieses erste ist ein
Positionsargument, das bei 0 liegt. Als Nächstes sehen wir uns hier. Ja, ein Stil text-ausrichten
Textrichtung. Ich werde Style-Eigenschaft verwenden. Nun, wie ich bereits erwähnt habe, akzeptieren wir auch
verschiedene Argumente. Aber dies denken Sie daran, dass die
erste Eigenschaft Positionsvektor v den tatsächlichen Text
erwähnt hat. Und andere Eigenschaften
sind Nim-Argumente, wie eines von ihnen ist eng. Jetzt akzeptiert die Style-Eigenschaft ein anderes Widget als Wert, nämlich das
Stil-Text-Schwanz-Widget. Also hier
müssen wir nur Textstil schreiben. Und an diesem Wochenende erwähnen , dass sich die
Eigenschaften ändern, die wir wollen. Zum Beispiel
möchte ich diese Farbe ändern. Farben, dunkelblau. Mal sehen Mal sehen wir es hier. Ändert es sich? Ja. Außerdem möchte ich
diesen roten Hintergrund entfernen. Es sieht nicht gut aus. Also ist es fertig. Okay. Jetzt ist die nächste Eigenschaft,
die wir verwenden werden, Schriftgröße. Ändern wir nun unsere
Schriftgröße auf 30. Sorry, Schriftgröße,
es sollte Spaß machen. Sagt ja, es
akzeptiert eine ganze Zahl, wir können den W-Wert sagen. Sehen Sie also, die
Schriftgröße hat sich geändert. Die nächste Eigenschaft, die wir
verwenden werden, ist ihr Schriftstil. Und es wird font-style,
kursiv und normal geben. Also was ist das kursiv? Ich hoffe, du weißt
, dass es nur eine geneigte Position gibt. Hier. Siehst du das? Und kein Staling, das
wir benutzt haben, ist Font-Gewicht. Schrift mit Punkt-Umfrage. Es wird nur einen
mutigen Blick darauf werfen. Sieh mal. So stylen wir also
zu unserem Textelement. Ja, denken Sie daran, es gibt auch
ihre Eigenschaften. Hier können
Sie einfach Hintergrund,
Hintergrund, Farbe,
Dekoration, Schriftart, Familie, Höhe, Buchstabenabstand,
Wortabstand, Schatten überprüfen. Wenn du willst,
kannst du all diese benutzen. Aber es ist sehr US-Pazifik, ob
wir es benutzen wollen oder nicht. In der Regel verwenden Sie jedoch in den meisten anderen
Verpflichtungen farbige Schriftgröße
und Schriftgewicht. Wenn Sie sicherstellen möchten, dass Text hervorgehoben ist, können
Sie dies sagen. Also. Ich hoffe, Sie haben
dieses Konzept verstanden ,
Farbe und Styling zu ändern. Das ist alles für diese Sitzung, wir werden in den kommenden Videos mehr über
Widgets erfahren.
8. Was sind Stateless Widget: Hallo, diese Sitzung
ist sehr wichtig weil wir darüber diskutieren werden,
was Staatenlose sind. Bis jetzt haben wir Code nur in unserer
Hauptfunktion
geschrieben. Dies ist jedoch nicht der Fall
, wenn wir der Verpflichtung
glauben, wagen,
wir müssen
unseren Code definitiv in kleinere Teile aufteilen und
sie dort verwenden, wo immer dies erforderlich ist. Wir können unser eigenes Widget erstellen, das mit
den anderen darin enthaltenen Widgets fortgesetzt wird. Welche Arten von benutzerdefinierten Build-Widgets sind staatenlose
und stateful Region? Im Moment müssen Sie sich nur auf den Zustand
konzentrieren, der weniger starr ist. Auf jeden Fall
werden wir uns in
den späteren Videos um
die andere Region sorgen . Hier können Sie also
sehen, dass wir
eine staatenlose Region schaffen können , indem wir
unsere Klasse auf staatenlose Regionen ausdehnen unsere Klasse auf staatenlose Regionen und eine solche
Mindestumsetzung für Bier haben. Dies ist also ein sehr grundlegender
Code eines zustandslosen Widgets. Gehen wir in die gemeine Datei, lasst uns eine neue Datei
namens Home Dot Dot haben. Jetzt können Sie einfach
zuerst ein
Materialpaket importieren müssen. Dann können Sie einen
Klassenstartbildschirm haben, der die
staatenlose Region C erweitert. Okay? Also hier ist es fertig. Jetzt müssen Sie einfach gehen
und auf diese Glühbirne klicken. Sie können sehen, dass
11 Override fehlt. Wenn du darauf klickst, wird
es dir dieses Ding geben. Also hier musst du einfach
etwas zurückgeben. Ich bringe
dieses Gerüst einfach hierher zurück. Sehen Sie sich also unseren ersten Bildschirm an,
das heißt, der Startbildschirm ist geschrieben
, der eine staatenlose Region ist. Also fragst du mich vielleicht: Okay, aber was bedeutet das
Status-Widget genau? also einfach daran, dass Daten in einem zustandslosen
Widget nicht geändert
werden können , nachdem
sie gerendert wurden. Angenommen, wir möchten, dass nach
dem Klicken auf die Schaltfläche die Farbe des Textes geändert werden
sollte. Dies ist bei
staatenlosem Lesen nicht möglich ,
da diese Farbe, also
das Grün, gerendert wird. Das ist, wenn wir
unsere Anwendung anhängen ,
sie wird gerendert. In einem Staatenlosen ist
es also nicht möglich, die Farbe zu
ändern. Später. Es ist, als hätten
wir nicht auf User geklickt und etwas Harvard machen
oder was auch immer es ist. Wenn der Benutzer damit interagiert, müssen
Sie für solche Dinge ein stateful Widget haben. Aber Sie werden
den Unterschied zwischen
beiden langsam verstehen . Nun, hier, jeder Name, der heißt, dies ist ein staatenloses Widget. Es gibt einen Namen des Widgets und es muss die
Funktion namens buildup vermeiden, die ein Widget
als Rückgabetyp zurückgibt. Und dieses Widget bedeutet, dass
dies Gerüst sein kann, das kann Container sein, das kann eine Schaltfläche sein, das kann ein Symbol sein. Es ist also nicht so, dass das
zustandslose Widget immer ein vollständiger Bildschirm
ist. Es kann auch eingestellt werden, aber es ist auch ein separater Teil
der Codes. derzeit nicht nötig, so
viel Stress zu nehmen. Du musst nur mit dem Flow
gehen. Also mal sehen wir mal. Implementiert, Lassen Sie uns implementieren,
datiert weniger Widget. Nun, dieses Konzept, also was Sie tun
müssen, ist einfach darauf zu gehen und
dieses Gerüst zu schneiden
und es hier einzufügen. in diesen Häusern Können Sie in diesen Häusern einfach einen Home-Bildschirm
schreiben müssen? Und oben musst
du diesen
Bildschirm so importieren. Wenn ich jetzt erneut starte, wirst
du sehen, dass sich nichts geändert
hat. Aber wir haben unseren Startbildschirm in einer separaten Datei, die weniger starr
existierte. Und was ich mit Staatenlos meine, möchte
ich es noch einmal
erklären. Das ist diese Farbe
des Textes, der blau ist, wird nicht geändert, wenn ich
versuche, in dieser Anzeige darauf zu klicken. Dies ist also einfach die Bedeutung
eines staatenlosen Widgets. Wenn ich nun diese Farbe
dieses Bernsteins
ändern möchte , um was nochmal
sagen zu lassen? Grün, sagen wir blau. Siehst du, das ist, weißt du, und wenn du jetzt siehst funktioniert
Control S Hot Reload
einwandfrei. Und es lag nicht daran, dass wir alles
in der Haupt-Nr.5
geschrieben haben . Nicht so starr. Aber jetzt, wenn wir auf Control S
drücken, wird
diese Bill Funktion erneut gerendert. Es heißt und wird wieder
gerendert. Mein erstes Buchstaben-Projekt jeden
Tag und klicke einfach auf Control S. See, es funktioniert einwandfrei. Deshalb funktioniert die Haube
Hot Reload. Jetzt
überlege ich Sie vielleicht, warum es nicht funktioniert, nur weil wir uns nicht im zustandslosen
und stateful Widget getrennt haben. Denn zu dieser Zeit, wenn
Lee das funktionieren wird, wird zurückgerufen und die
Änderungen werden vorgenommen. Ich hoffe also, dass Sie
das Konzept des staatenlosen,
staatenlosen Widgets verstanden haben . Und wir sind in der Lage,
Ihren Code von einer Datei
zu mehreren Funden zu trennen . Mehr darüber
werden wir auf jeden Fall erfahren, wann wir einige grundlegende Projekte aufbauen
werden. Aber im Moment reicht so viel
Wissen aus.
9. Asset und Network: Heute lernen wir, wie man ein Bild in
unserer Anwendung
anzeigt. Bis jetzt haben wir
gerade Text angezeigt, aber die reale Anwendung wird
definitiv Bilder enthalten. Jetzt gibt es zwei
Arten von Bildern. Hauptsächlich. Das ist eines ist Netzwerkabbild und das
andere ist ein festgelegtes Bild. Jetzt Netzwerkbild, wenn
wir es für das Bild sündigen, bedeutet das, dass das Bild aus dem Internet
kommt. Das heißt, wir
hosten dieses Bild nicht oder speichern dieses
Bild nicht in unserem Flutter-Code. Also haben wir, wir müssen URL des Bildes haben,
um es zu zeigen. Bringen Sie zuerst
Ihren Browser heraus und
schreiben Sie einfach Googles Bild, das Sie als Flutter-Logo haben möchten. Dann habe ich so viele Bilder, ich habe so viele Bilder, ich wähle einfach dieses Bild aus und schreibe eine
Kopierbildadresse. Jetzt können Sie sehen, dass diese
Netzwerk-Image-Syntax image.network ist. Dann müssen wir die URL
einfügen. Lass uns gehen. Jetzt in der Mitte entferne
ich diesen Text und image.net und
füge ihn einfach so hier ein. Mal sehen. Können wir
das Bild zeigen oder es zeigt, ja, sehen Sie, dies ist das
erste Mal, dass wir ein tatsächliches Bild
in unserer Anwendung
verwenden. Und es war so einfach. Im Moment entfernen wir
diese geschichteten Texte
starr, weil wir zwei Widgets nicht direkt
innerhalb des untergeordneten Objekts
übergeben können . Dieses Problem
wird definitiv in
den späteren Videos gelöst , in denen wir über das
Widget
diskutieren werden , dem wir mehrere
anzeigen können, um mehrere Widgets
in unserer Anwendung anzuzeigen. Jetzt gibt es auch einige
Eigenschaften, wie hier können Sie die Höhe sehen. So Höhe können wir,
wenn ich die
Höhe sofort reduziere,
sehr wenig, sehr klein geben wenn ich die
Höhe sofort reduziere, . Wenn ich es ändere. Siehst du so. So arbeiten wir
mit Netzwerk-Images. Jetzt
ist die andere Sache ein Asset-Image zum Einfügen eines Images, das
bereits in Ihrem System vorhanden ist. Normalerweise machen
wir Sie also dazu,
Bilder in das
Stammverzeichnis wie dieses zu fallen Bilder in das
Stammverzeichnis wie dieses haben
wir Assets erstellt und
gesagt, dass wir vorher ein
Bildverzeichnis erstellt haben, weil es sehr saubere
Ordnerstruktur ist. Jetzt fügen wir eine Datei so
in tot ein. Ich habe diese
Bild-6-Punkt-PNG-Datei. nächste Schritt besteht darin, CO2 Pub
Spec Dot HTML zu geben und Assets zu
entkommentieren, die uns bereits
nicht gefallen haben. Weitere Informationen finden Sie in diesen Assets Abschnitt Wir haben uns nicht kommentiert. Es stellt sicher Einrückung befindet, sonst
wird es hinzugefügt, was bedeutet. Und diese Datei ist sehr sensibel. Sie müssen also sicherstellen, dass Sie keine zusätzlichen
Leerzeichen oder Tabs darin angeben. Es musste einfach
so Säuren schreiben. Jetzt wird es wissen, dass in
unseren Assets Bilder dort sind. Wir werden ältere Akten sein. Sie können auch Ihren
Bildverzeichnisspeicherort
mit oder ohne Image-Namen schreiben . Das heißt, wenn wir
den Bildnamen nicht so erwähnen den Bildnamen nicht so dann sage ich, dass es
richtig ist, weil
Vince alle darin enthaltenen Bilder hochlädt. Bei der Auswahl, wie
ein Asset-Image früher
für das Netzwerk-Image eingefügt werden soll , haben
wir
dieses Netzwerk einfach erstaunt. Jetzt werden wir Bildpunktsatz,
Bild, Punktsatz wie folgt machen. Dann sagen wir einfach
Sets, dann Bilder. Wie lautet dann der
Name der Datei? Emittieren Sie 6 Punkt PNG. 6-Punkt-PNG. Und jetzt mal sehen, funktioniert es? Sehen Sie, wir haben unsere
Asset-Datei hochgeladen, dh unsere
Flaggschiff-Anwendung, würde wissen, über welche Datei
wir sprechen. Und das kommt nicht
aus dem Internet. Jetzt können wir einige
Eigenschaften als Seehöhe ändern, wir können so 100 C geben. Mit können wir uns auch ändern. Dies sind die anderen Eigenschaften
, die Sie ändern können. Aber im Moment wollen wir das nicht. Normalerweise ist die Höhe in Ordnung. Wir nehmen an, 150 Jahre. Nun, es sieht gut aus. Daher ist es sehr
wichtig,
diesen Unterschied zwischen
Asset, dem Netzwerk-Image, zu verstehen , da
Sie in Ihrer
realen Anwendung die ganze Zeit mit
Bildern spielen werden. Alle Anwendungen haben
eine Art Bild in ihnen. Entweder ist es ein saures Bild
wie das Apps-Logo, Logo. Es wird sich nicht so leicht ändern. Also können wir es
ihnen einfach in unserem Code schicken. Und die Verfügbarkeit, so etwas wie das Profilbild eines Benutzers. Es wird aus
der Datenbank kommen, weil der Benutzer es ändern wird,
was es häufig macht. Das ist der Unterschied. Das war's für heute. In den nächsten kommenden Videos werden
wir über
einige andere Widgets sprechen , die
unsere Sitzung so fortsetzen. Danke.
10. Icon und Button Widget: Jetzt ist es an der Zeit, sich
über andere Budgets zu informieren, wie zum Beispiel den Icon-Besuch. Florida ist
mit unzähligen Symbolen , die verwendet werden können, um
unsere App schöner zu machen. Wenn Sie eine Anwendung sehen, sei es über
Facebook, Instagram, WhatsApp davon, werden
Sie definitiv eine Art von
Symbolen
sehen, weil es so ist, dass es für das Auge sehr angenehm ist. Personen können
sich direkt auf dieses Symbol beziehen. Jetzt ist die Syntax sehr einfach. Zuerst müssen wir Icon schreiben. Und darin kann v nicht einfach
den Namen des Symbols schreiben. Wir müssen schreiben wie
Icons einen beliebigen Symbolnamen. Angenommen, ich kann den Benutzer starten, ich kann Alarm starten, was auch immer. Lass es uns versuchen. Ich entferne das
Kind des Bildes. Jetzt. Ich werde nur Icon sagen und dann kann
ich einen übermäßigen Alarm starten. Jetzt
speichere ich es einfach und sehe unser Icon auf
dem Bildschirm angezeigt wird und
es ist so einfach. Jetzt können wir, wie jedes andere
Widget V, definitiv
seine Farbe und die wenigen
Eigenschaften ändern . Um die Farbe zu ändern, sagen
wir einfach Komma
und sehen dann Farbe, Rad, Farben, Orange. Und dann Größe. Ich schreibe an eine 100. Jetzt sehen Sie,
dass es so viel größer ist, dass ich einer Kante
gegeben habe, nur um
Ihnen zu zeigen , dass wir seine
Eigenschaften des Symbols ändern können. Und die Sache ist, es ist
nicht so, dass wir
das Symbol nur in diesem Körper verwenden können . Jetzt kann ich, wenn ich in den
schwebenden Action-Button will, einfach
Icon und dann Icons schreiben, diese Nachricht da drin. Schaltfläche „Schwebende Aktion“. Sieh. Jetzt kannst du
es mit der WhatsApp vergleichen. WhatsApp-App hat auch diese
Art von Ich kann auf ihnen landen. Und es sieht sehr gut aus. Ich muss sagen, dass es nach
dem Icon-Button ein anderes Widget
gibt, das ist der Button-Bereich. Ohne einen Knopf ist
jede Anwendung nutzlos. Da Schaltflächen zur
Verfügung stehen, um ein Feedback zu geben, erhalten Sie Feedback
vom Benutzer. Das heißt, wenn es
Umreifungscodons in den Warenkorb legt. Und wenn es sich um ein Formular
handelt, müssen Sie das Formular
absenden. Wenn ein anderes, wenn zwei Karma, wenn Sie eine Bearbeitung in Ihrem haben, wenn Sie
eine Anwendung verwendet
haben, sind
Sie möglicherweise auf viele Schaltflächen gestoßen. Im Flattern gibt es also
drei Arten von Button, Text, Button, erhöhte Schaltfläche, und ich kann sie platzieren. Lasst es uns eins nach dem anderen verstehen. Was ist dieses Lehrbuch? In diesem Text-Button wird
es also keine Linderung geben. Unser 3D-Effekt so, wenn ich einfach das Icon
hier entferne und Text schreibe. Aber dann ist das erste
Eigentum obligatorisch, ist dieses Kind, das heißt, was sollen wir
in diesem Button haben, ich werde einfach mit der
rechten Maustaste auf mich klicken. Und das zweite obligatorische
gilt für die Vorgaben. Was sollte passieren, wenn ein
Benutzer auf diese Schaltfläche klickt? Sehen Sie also, das ist eine Textschaltfläche. Es gibt keine Hintergrundfarbe oder Linderung oder es ist
nur einfacher Text. Deshalb heißt es so. Wenn Sie unseren
Button wirklich
ändern oder stylen möchten , können Sie es tun. Aber ich glaube nicht, dass es so unbedingt ist,
denn wenn du
willst , gibt es andere, aber die Dichte ist
erhöht, aber ein Tier. Aber ich zeige
Ihnen nur , wie Sie auch
ihren Stil ändern können. Wenn Sie die Kacheleigenschaft sehen
und akzeptiert, wenn es sich um einen Text handelt, aber
es akzeptiert Texte, aber dann Punktstil von und innen, dass Sie
einfach primär schreiben können, das ist die Farbe des
Hintergrunds und diese Orange. Sehen Sie, dass sich die Farbe geändert hat. Wenn du willst, kannst
du etwas Polsterung geben. Kanteneinsätze, Bereiche, oder? Einfach 10. Für die Polsterung wird
es momentan nicht angezeigt. Wir können Hintergrundfarbe,
Hintergrund Schwarz hinzufügen, wenn Sie diese Farbe
wirklich wünschen. Denn was passiert normalerweise wenn du
diese Art von Knopf wirklich willst? Sie werden direkt zur
Schaltfläche „Heben“ gehen, da diese Funktionen
automatisch angezeigt werden. Aber es ist in Ordnung. Dann. Irgendeine andere wichtige Sache? Das glaube ich nicht. So wichtig ist es. Nein. So
zeigen Sie eine Textschaltfläche an. Und wenn Sie wirklich möchten, können
Sie es so gestalten, dass Sie Texte verwenden, aber 10-Punkt-Stil aus und geben
Sie dann verschiedene,
unterschiedliche Eigenschaften an. Denken Sie daran, ob
ich dieses Styling entferne. Dies ist eine grundlegende Textschaltfläche. Aber was passiert, wenn ich einen erhöhten Knopf
benutze? Wenn ich einfach nur bin, ist
die Syntax dieselbe. Wenn ich hier einfach nur
einen begrenzten Button schreibe, dann sehen Sie, dass die Hintergrundfarbe ist , dass
ihre Textfarbe weiß ist und eine
gewisse Linderung
gedreht wird, da ein 3D-Effekt gegeben wird. Deshalb
verwenden wir den erhöhten Knopf, da es sehr praktisch ist. Nun, wenn du willst, kannst
du es wie hier stylen. Wir haben einen begrenzten, aber
dann Punktstil von und Primär wird
hintergrundfarbe gemacht. Lasst das meinen. In Text-Schaltfläche. Ich meine, es war diese Textfarbe, aber hier ist es die
Hintergrundfarbe. Wenn du jetzt Linderung willst, kannst
du ihm einfach fünf geben. Sie können sehen, dass noch einige
3D-Effekte vorhanden sind. Wenn Sie die Polsterung ändern möchten, können
Sie Kanteneinsätze ändern. Bei T C ist das
Auffüllen auch erledigt. Wenn Sie nun die Form ändern möchten. Sie können dies auch mit einem
abgerundeten rechteckigen Rand tun. Und dann Grenzradius
Grenzpunkt. In einem Randradius Punkt. Und Sie können
in Jahren das kreisförmige als
a1 von allen Seiten verwenden ,
kreisförmig, Radius-Punktsatz von
polar und geben Sie hier zehn. Siehst du, wenn ich zwei in D gebe, wirst
du mehr bemerken. Diese Form wird durch
diese Show aufgrund der von
uns gegebenen ADS geändert . Und hier, Styling
hast du sie verstanden. Und das vor Ort ist
einfach das, was
passieren sollte , wenn ein Benutzer auf den Knopf
drückte. Also schreibe ich Zeit, drucke einfach. Aber normalerweise machst du hier eine Art von Aktivität, seh so. Bis jetzt haben wir Texte
besprochen, aber dann einen erhöhten Knopf. Die letzte Art von Schaltfläche
ist die Symbolschaltfläche. Also einfach was es tut, es ist eine Art Ikone, auf die wir drücken und etwas tun
können. Und wir haben gerade
den vorherigen Code entfernt und ich kann
einfach angehoben. Aber dann wird
es beim Drücken in älteren Tasten sein. Und im Icon. Ich habe dir bereits beigebracht,
wie man ein Icon anzeigt. Dieses Icon hier, zur Kasse. Jetzt ist dies ein Icon,
aber Sie können darauf klicken. Sie können es hier anklicken. Jetzt können Sie herausfinden, welche anderen
Eigenschaften es akzeptiert, wie Farben, den blauen Akzent. Dann kann ich sagen, dass
du 100 geben kannst. Siehst du, es sieht so gut aus. Und wenn es noch etwas gibt, Splash Color, denken Sie
vielleicht, was ist die Splash-Farbe? Mal sehen. Sieh. Wenn ich darauf klicke. Dies ist die Splash-Farbe. Und ähnlich hat es auf der Presse
, die ich einfach drucken werde. Das kann ich. Aber dann sehen Sie im
Debug, dass Sie den Can-Button sagen können. Also haben wir alle drei Knöpfe erfolgreich
abgedeckt. Das ist eine erhöhte Textschaltfläche,
aber eine NDA-Symbolschaltfläche. Und auch wie man Icons
in unserer Fluttern-Anwendung benutzt. in dieser Symbolschaltfläche
daran, dass die untergeordnete
Eigenschaft nicht vorhanden ist. Hier. Ich kann dort Eigenschaften haben
, die ein Icon akzeptieren. Und in Alda-Tasten ist das
gedrückt obligatorisch. Sie müssen also erwähnen,
was passieren sollte wenn jemand darauf klickt,
denn da es sich um eine Schaltfläche handelt, müssen
Sie wissen, was danach passieren
sollte. Das war's also. Ich hoffe, Ihnen gefällt der Kurs und lernen
mehr über
verschiedene Arten von Widgets. Wir sehen uns im nächsten Video.
11. Container: In dieser Sitzung werden wir über das Container-Widget
sprechen. Was ist ein Container? Ein Container wickelt einfach sein Budget
um. Wenn Sie also mit
dem Konzept von div
in der Webentwicklung vertraut sind , funktioniert es genauso. Wir verwenden dieses Widget,
damit wir diesem Element
einen Rand geben können diesem Element
einen Rand geben und viele , und viele
andere Eigenschaften sind die beiden darin enthaltenen Widget. Stellen Sie sich es also einfach
als Wrapper vor, der
verwendet wird , um
die anderen Widgets zu manipulieren. Was ist die Syntax? Die Syntax ist sehr einfach. So wie das. Container
ist der Budgetname und die untergeordneten Münzstätten, die
sich in diesem Container befinden sollten. Also, okay, fangen wir damit an. Ich würde einfach sehen,
diesen vorherigen Code zu verschieben und hier ein Container-Widget zu
haben. Im Kind. Ich werde zuerst die Decks
Region haben. Es wird also so sein. Und das nicht. Es ist, als wäre Flirted genial. Lasst es uns retten. Mal sehen wir hier. Sie können also sehen, dass
Text vorhanden ist, aber es gibt nichts, als
würden Sie nicht einmal bemerken, dass er
in ein Container-Widget eingewickelt wurde. Was wir also tun müssen, wenn Sie diesen Container sehen
möchten, ist
die erste Eigenschaft, die Sie
verwenden können, diese Farbeigenschaft. Farben fangen an zu fürchten. Sie wissen bereits,
wie man Farbe nicht benutzt. Sieh. Jetzt können Sie sehen, was das ist,
dieses rote Ding ist
dieser Container, Sie jetzt auch
als Schachtel sagen können. Das ist also der Container
und er hat unterschiedliche,
unterschiedliche Eigenschaften. Erste Eigenschaft, erste zwei, wir verwenden Kind und Farbe. Mal sehen, was
Padding und Marge ist. Okay? So werden Polsterung und
Rand verwendet,
um den Abstand zwischen
den Elementen zu erhalten. Was ist eine Polsterung? Polsterung ist der Raum im Inneren, was bedeutet, dass Sie dieses
fantastische II und die Box sehen können, und das ist hier, rotes Ding. Die Erkenntnis breitet sich aus. Und das rote Ding endet blau. Das ist das Äußere, äußere Sache ist Marge. Sehen Sie es sich an dem Beispiel an und
wir geben ihm einfach eine Padding-, Padding- Eigenschaft und es akzeptiert
einen Wert als Kanteneinsätze. Danach, nach dem sagen Sie,
wenn Sie auf Punkt-Punkt-Punkt klicken, dann haben Sie andere die
Option Das ist alles von links, rechts, links, oben, rechts, unten auf Lee symmetrisch. Der Einfachheit halber werde ich alles
verwenden, was
von der ältesten Seite stammt. Ich gebe ihm 20. Nun sehen Sie, sehen Sie aus der
Erkenntnis, dass dies, dies
und das, Dies ist
die Polsterung und es sieht kompatibel
schöner aus als zuvor. Das ist also die Polsterung. Und was ich sagte, ist die nächste Eigenschaft, die
Marge und Verschmelzung
ist, ist der Abstand außerhalb dessen, ob es hier ist, hier sind
oben und links hier. Wenn ich also zum
Rand gehe und wieder marginal gehe,
so akzeptiere ich Werte, Kanteneinsätze, und für all
das gebe ich 20. Also wirst du
diesen Unterschied jetzt kennen. Sehen Sie von außen hier,
dass Sie diese Margen-Sache bekommen. Sie können auch hier nachlesen. Margin ist Platz
außerhalb und Polsterung. Alter ist Raum im Inneren. Diese Eigenschaften
gibt es auch, wie zum Beispiel Breite. Wenn ich auf „Warten“ klicke und
ihm den Wert von Angenommen AT gebe, dann schrumpfen Sie. Wenn ich einen Tag gebe. Es ist so. Wenn ich dazu komme, wird
es noch weiter gehen. Das sind also die Container
darin, wenn ich keinen Weg gebe. Es wird alles brauchen, was drin
ist. Es gibt eine SMS und
das sind wir nur. Jetzt. Es gibt eine andere Eigenschaft, die sich innerhalb des Containers befindet,
nämlich die Ausrichtung. Und es hat es außer
Sibelius-Ausrichtung. Angenommen oben links,
oben links, oben rechts. Sehen Sie jetzt, ich muss eine Rate von
250 und eine Höhe von 50,
58 Jahren angeben 250 und eine Höhe von 50, . Es ist weniger nachdem du D.
Die Ausrichtung gegessen hast . Gerade jetzt. Die Sache ist, dass es
kein anderes Element gibt, ist nur dieses Element hier. Deshalb funktioniert die Ausrichtung nicht,
weil die Höhe oder Position diese Seite
ist und nur so viel Fläche ist. Wenn ich es gerade in C entfernt habe, nimmt ich
jetzt den ganzen Bildschirm. Das ist die Sache, die
wir zuerst
Höhe und Gewicht
des Behälters dessen zuweisen Höhe und Gewicht
des Behälters was sie darin
eingewickelt haben. Dann nur der Wrap. Diese Ausrichtung wird funktionieren. In den kommenden Videos
werden wir
eine schönere Anwendung erstellen . Dann werde ich Ihnen
diese Ausrichtung beibringen und wann Sie den Alignment-Code
verwenden müssen. Denn im Moment denkst du
vielleicht:
Nein, das funktioniert nicht. Warum funktioniert es nicht? Wir haben vielleicht zu
viele Fragen. Und diese Eigenschaft ist die Deklaration
des Container-Widgets, die die
Dekoration der Box als Wert ausnimmt. Jetzt können
Sie auch in der Kastendekoration eine Form geben. Kastenform, Kreis. Dekoration im Inneren des Kastens. Sehen Sie, wann Sie Box-Dekoration
verwenden. Die Sache ist, diese
haben auch eine Eigenschaft von Farbe, sodass Sie nicht
mehrere Farben angeben können. In diesem Fall müssen Sie Farbeigenschaft innerhalb der
Kastendekoration erwähnen. Und ich werde wieder Polsterung
geben, damit der Kreis
ein bisschen schöner aussieht, er ist drin. Jetzt haben wir keine Box-Dekoration gemacht. Es gibt Farbe, Rahmen,
Randradius, Kastenschatten. So
können Sie diese Eigenschaften auch verwenden, um Ihren Behälter zu dekorieren, der ganz
auf Ihre Bedürfnisse zugeschnitten ist. Wenn Sie es also brauchen, können
Sie es auch
alleine ausprobieren. In den kommenden Videos werden
wir also über
die allerletzten Besuche sprechen , die
noch diskutiert werden müssen. Danke.
12. TextField Widget: Heute werden wir
über TextField Virgin diskutieren. So lässt er Text den
Benutzer Text eingeben. Entweder haben wir sehr gemietet , sind innerhalb der
Bildschirmtastatur. Es
ermöglicht uns also im Grunde genommen ,
Informationen vom Benutzer zu sammeln. Wenn Sie eine
mobile Anwendung verwendet haben, wissen
Sie, dass Text das
Rückgrat des Schuldenantrags ist. Nun, was diese Syntax ist, es ist eine sehr grundlegende Syntax
des TXT-Textfeldes. Dann wie du willst
unsere Klammer. Versuchen wir es in ihrem Körper. Ich werde den vorherigen
Container entfernen und ihn
Text, Textfeld haben . Hier. Wenn ich es speichere, dann wirst du das sagen,
diese Zeile. Und wenn ich darauf klicke, haben
wir unsere Tastatur. Ich kann schreiben, was ich will. Aber die Sache ist, dieses Textfeld dem Benutzer nichts aussieht
oder sagt. Der Benutzer weiß nicht einmal,
was er darin schreiben soll. Dafür müssen
wir einige andere
Eigenschaften darin verwenden, die wie Dekoration sind. Dekoration, und es
akzeptiert Eingabedeklaration ist ihr Wert. Darin. Hier sehen
Sie viele Optionen. Ich verwende zuerst Hinweise oder
beschriftete Texte. Wenn Sie den Mauszeiger darüber bewegen, akzeptiert
es direkt eine
Zeichenfolge, kein Widget. Also können wir einfach
richtig sagen, so nennen. Und Sie können jetzt sehen, dass es bis
nach 10 Stück aussieht,
denn wenn wir darauf klicken, wissen
wir, was wir
darin schreiben müssen. Jetzt gibt es neben
beschrifteten Texten noch viele andere
wie Grenzzähler aktivieren,
aktivieren Sie es ist, wenn
dies fehlschlägt,
sollte für
diesen Moment deaktiviert werden oder nicht. Hinttexte sind genau wie und vollständiger Name, bitte. Und wenn ich spare. Werden Sie
nun in diesem Text diesen Hinweis sehen. Das heißt, wir müssen unseren vollständigen Namen
schreiben. So können wir zumindest einige Dummy-Daten
geben die dem Benutzer
einen Hinweis darauf geben, was er schreiben muss. Eine andere Sache, die Sie
haben können, ist ein Präfix-Symbol. Die Icons geben etwas visuelles. Man kann visuell sagen es gut erscheint,
wenn wir ein Ich kann jetzt sehen, dieser Text sieht
vergleichsweise besser aus. Mit diesem kleinen Icon auf Live. Es gibt etwas
mehr wie Grenze, die wir erhalten können
Input-Grenze. Jetzt. Jetzt kannst du es nicht richtig sehen. Ich mache was? Ich werde es einfach um
den Container wickeln , den
wir gerade gelernt haben, und verschaffen einen
Vorsprung. Einsätze. 20. Siehst du, diese Grenze
sieht so gut aus. Und sieht so netter aus. Und wenn ich den
Eingabe-Grenzpunkt keinen gebe, dann wird der gesamte
Rand C verschoben. Aber normalerweise gefällt mir dieser
Umriss in Put Powder. Jetzt denken Sie vielleicht, dass nur so viele Immobilien noch vorhanden
sind. Es gibt also viele Immobilien die wir auf jeden Fall richtig
besprechen werden. Denn ohne ein Textfeld können
wir keine Anwendung
erstellen. Maxlength sagt uns einfach
, dass der Name nicht beleuchtete
Dan-Zeichen enthalten
sollte. Nicht mehr als das. Es kann verwendet werden, wenn
wir ein Passwort verwenden, beliebige Telefonnummer, es sollte eine bestimmte
Anzahl von Ziffern enthalten sein. Nicht mehr als das. Und jetzt, im Moment werden wir nur sehen, dass die onchange-Eigenschaft viel
bekommt, was
aufreicht,
aber bei Änderung bedeutet, dass sie eine Funktion
gibt die uns unabhängig von
ihrem Rückgabetextfeld einen Wert gibt. Wir werden diesen Wert in
unserer Debug-Konsole drucken . Jetzt. Wir haben einfach ein Flattern. Sieh mal. Wenn Sie möchten, können
wir ihn
jetzt mit diesem
Wert einer Variablen zuweisen und diese Variable dann
überall verwenden, wo wir möchten. Es liegt an uns, was
wir tun wollen. Aber auf jeden Fall
hat TextField eine wichtige Regel. Und mehr darüber werden wir im nächsten Modul
besprechen. Danke.
13. Spalte und Row: In dieser Sitzung
werden wir
über ein sehr wichtiges Widget sprechen . Wir werden also
über zwei Widgets sprechen. Das erste Widget ist
das Spaltenbudget. Wenn Sie es also bis jetzt bemerkt haben, wir damals nur
ein Widget ausgegeben. Aber es passiert nicht
in einer echten Anwendung. Ein Bildschirm enthält
mehrere Widgets, wie abgebildete Texte,
aber insgesamt. Zu diesem Zweck wird
ein Spalten-Widget verwendet,
da es hilft,
Widgets in vertikaler Richtung auszugeben
, also wird
ein Spalten-Widget verwendet da es hilft,
Widgets in vertikaler Richtung auszugeben
, von oben nach unten. Deshalb ist der Name der Spalte. Die Syntax ist sehr einfach. Wir müssen einfach den Spaltennamen
auswählen. Das heißt, der starre
Name ist Spalte. Aber hier wird
jetzt eine Sache geändert, weil ich mit
jedem Widget lebe , das wir untergeordnete Eigenschaft
verwendet haben. Aber hier sind es Kinder. Und einfach weil
wir mehrere Widgets ausgeben werden. Und deswegen ist
es ein Plural-Telefon. Also ja, bring
deinen Texteditor raus. Und ich werde einfach am Körper enden. Ich werde nur den
vorherigen Code und die Nacht-Spalte verschieben sehen. Dann werden hier Kinder sein. Kinder. Wir Insulin scannen Sie einfach
von oben nach unten, welche
Elemente Sie drucken möchten. Ich werde nur das erste
hohe V, ich lerne. Flattern. Dann nächstes Widget
können Sie die Schaltfläche „erhöhte“ verwenden. In diesem Kind können wir Text des Einreichens
haben. Lasst uns sparen und sehen. Sieh. Zum ersten Mal
konnten wir zwei Widgets
gleichzeitig
ausdrucken , Indizes. Dies ist also die Verwendung des Spalten-Widgets, wenn Sie möchten,
nachdem Sie es eliminiert haben, aber dann können Sie Bildpunktsatz
verwenden und dann Bilder,
Bild sechs, PNG festlegen. Hier haben wir schon, wir haben dieses Bild hier. Sieh. Jetzt haben wir drei
Elemente auf der Haut. Zuerst ist ein Text-Widget, das
zweite ist ein erhöhtes, aber dann, und das
dritte ist das Bild. Jetzt sehen Sie hier
im Notizenbereich, dass
Kinder benutzt werden. Anstelle eines Kindes. Alle Elemente sind
durch ein Komma getrennt, weil es einfach
heißt Es ist eine Liste
von Widgets, das ist Y. Und jedes Widget ist der Reihenfolge dieses
Widgets wird
dieselbe sein , wie Sie es hier schreiben. Nicht dieses Bild wird von oben nach unten
ausgedruckt. Dead ist ein weiteres
Widget, mit dem Sie ein Objekt
von links nach rechts ausdrucken können. Rho ist also auch gleich wie Spalte. Es hilft,
mehrere Widgets auszugeben, aber eine Zeile hilft Widgets in
horizontaler Richtung
auszugeben. Und wir ändern einfach zuerst
die Größe und das Gewicht. Es ist zu groß. Das Gewicht wird ein 100 sein. Siehst du, es
schaut jetzt auf das Waschbecken. Die Syntax ist die gleiche. Ich ändere einfach diese Zeile. Also diese Spalte zu reihen und zu speichern. Jetzt wird dieses horizontale
Ding vertikal. Dies ist also ein sehr
wichtiges Element denn wenn Sie eine vollständige Benutzeroberfläche
erstellen, Sie bei jedem Bildschirm von
Getty verwenden
Sie bei jedem Bildschirm von
Getty entweder
eine Zeile oder eine Spalte. Kombination aus beidem. Zeile hat eine andere Eigenschaft, die Hauptachsenausgleichungen Schulden
ist. So sollten
die Elemente auf dem Bildschirm
angezeigt werden. Wenn wir also den Raum gleichmäßig schreiben, von links
gesehen, überall links, ist
all dieser
Leerabstand gleich. Und wenn ich Leerzeichen dazwischen schreibe , dann ist c die äußere
linke und extreme Seite. Der Abstand ist nicht vorhanden. Und es gibt auch Zentrum. Alles wird in der Mitte
zusammenkommen. Die interessante
Tatsache ist also, dass in Reihe und Spalte Port diese
Hauptausgänge haben und Cross vorhanden sind. Der einzige Unterschied besteht darin, dass Sie sich daran erinnern
müssen
, wenn Sie die
Hauptzugriffe von links nach rechts zeichnen. Und die Querachse wird
von oben nach unten sein. Das heißt, wenn ich
x's Kreuz-Existen-Ausrichtung kreuze, ist
das zentriert. Das glaube ich nicht. Es ist
wirklich gerade, denn das Element befindet sich
bereits in der Mitte, weil dies
nur so viel Platz benötigt, nicht den ganzen Bildschirm. Deshalb
wurde es nicht ins Zentrum geschickt. Aber Cross-Erfolg
für eine Reihe bedeutet von oben nach unten und main
existiert von links nach rechts. Und ähnlich befindet sich in einer Säule die Hauptachse von oben nach unten und die
Querachse ist von links nach rechts. Du musst also einfach
alleine üben und versuchen zu
verstehen, was ich gerade gesagt habe. Weil das Konzept sehr einfach
ist. Spalte und Zeile wir sind, wir verwenden es nur, um
mehrere Elemente in
eine bestimmte Richtung auszugeben . Und wir können auch eine Spalte in einer Zeile und
eine Zeile innerhalb der Spalte verwenden. Und damit können
Sie mit
Hilfe von denen und Lee eine vollständige Benutzeroberfläche
erstellen. Danke. In der kommenden Sitzung werden
wir also über
ein anderes Widget sprechen , das sehr wichtig
ist und das uns helfen wird,
mehrere Elemente auszugeben. Danke.
14. ListTile und ListView: In dieser Sitzung, in der wir Besuche
erkunden, werden
wir darüber sprechen,
was unser ListView-Widget ist und was ist das ListView-Widget. Ein Listenstil ist also eine einzelne
Zeile, die normalerweise X
enthält, etwas Text
sowie ein führendes oder nachfolgendes Symbol aus dem Bild enthält, nur Sie
können verstehen, wie, was ist ein Listenstil
und wie er aussieht. Es mag einige der Benutzeroberfläche
ähnlich oft was ich hoffe, dass Sie es lieben, Sie haben ein WhatsApp-Konto und sind dem sehr vertraut. Was ist also die Syntax? Es ist einfach seine Kachel. Dann sind dies die
Eigenschaften, die es akzeptiert. Probieren Sie es weniger zuerst selbst aus. Ich werde zuerst nur eine
Listenkachel haben. Dann werde
ich im Titel einen Text von
Elon Musk haben. Lasst uns sparen. Sieh. Es ist also, was es sagt, eine
Art horizontales Ding. Dann ist das andere Element, welches andere Eigenschaft
ich verwenden werde ,
untertitelt zum Mond. Untertitel ist nur Seton, hat eine kleinere Schrift und die Standardfarbe ist
etwas irgendwo Krebse. Dann führt eine andere
Immobilie an, das
sollte eine Duff-Front sein. Ich benutze hier ein Icon. Und ich kann bei Count Circle anfangen. Und wir geben ihm
die Farbe der Farben, Blau und Größe für t. Lass es uns ausprobieren. Siehst du, das habe ich gesagt. Dies ist das führende Symbol. Und jetzt ist
eine andere Eigenschaft, viele Immobilien, aber eine weitere wichtige
ist das Nachlaufen. Das ist es, was am Ende
sein sollte. Ich werde ein erhöhtes
aber zehn vermuten. Und es wird nur einen Text
davon haben, was der Text sein sollte. Es ist keine gute Idee, einen solchen Knopf zu
benutzen. In diesem Trailing. Ich werde nur eine Ikone haben. Aber wenn ich will, dann werde ich im Icon verzögert beginnen. Sehen Sie, wir haben hier ein Icon. Das Nachlaufen bedeutet das Ende
des horizontalen Dings, den vorderen Wind,
das Vorderelement. Und die letzte wichtige
Eigenschaft ist das Untap. Das heißt, was passieren sollte. Was hätte sein sollen, wenn der
Benutzer auf diese Kachel klickt. Also in der Konsole siehst du gerade, ich klicke hier
und sehe dann muss. Ich spreche nicht von
diesem Button. Dies haben wir, wenn wir etwas Gutes tun wollen, müssen
wir es
in diesem On-Premise schreiben. Aber diese ganze Kachelsache
druckt diesen Elon Musk aus. Sag, ich habe fünf Zehntel drauf geklickt. Deswegen ist es so hier. Dieser Listenstil ist auch ein sehr interessantes
UI-Widget, da es sich um ein Bündel
aller Dinge handelt, die wir möglicherweise
in unserer Anwendung benötigen. Jetzt wissen wir bereits, was ein Spalten-Widgets
ist. Ich werde es einfach
um die Spalte wickeln. Sehen Sie, dass sich nichts ändern wird. Was ich jetzt machen werde, ist, dass
ich über
das nächste Element sprechen möchte ,
nämlich ListView. Aber bevor ich dazu gehe, möchte
ich Ihnen
das Problem mit der Kolumne zeigen. Wenn ich, wenn ich diesen
Listenstil habe,
so oft,
mehr, wenn ich
es habe, wenn ich mu2 mal drücke, wenn ich mu2 mal drücke,
sehen Sie unten einen Fehler, das heißt, der Boden
ist unsere Flüssigkeit. Das wenn wir direkt Recht haben. Spalte hier wie folgt, es wird Fehler angezeigt und
es ist nicht scrollbar. Hier kommt also unser nächstes Widget, das Listenansicht ist. Listview ist wie eine Spalte. Das heißt, es
druckt das Ding. Alda-Widgets von senkrecht nach
oben nach unten. Aber es ist auch eine
scrollbare Sache. Wenn ich
hier List View schreibe und speichere sie. Der Fehler ist, dass wir in der
Lage sind , durch
unsere Elemente sind Widgets zu scrollen. ListView ist also wieder das Gleiche wie Spalte auf Führung. Der Hauptunterschied ist, dass
es sich um Korallenebene handelt
und denken Sie daran,
es gibt die Widgets standardmäßig
in vertikaler
Richtung aus, wenn Sie es ändern möchten, können
Sie es einfach hier
im Scrollrichtung und Zugriffspunkt Sie können
ihn auch vertikal angeben. Aber auch unser horizontales Saudi
waagerecht. Aber die Sache ist, dann sollte das
Element anders sein da Sie vertikal
keinen Listenstil drucken können. Vielleicht denken Sie auch darüber nach, was sollten wir tun, wenn Sie
keine Daten verwenden möchten? Säule starr? Wir möchten
das ListView-Widget jedoch nicht verwenden, möchten diesen Fehler
aber dennoch
entfernen. Da offensichtlich die
gesamte Anwendung, alle Seiten des Bildschirms,
die wir verwenden, so viele
Elemente auf diesem Bildschirm haben werden. In diesem Fall können Sie einfach das oberste Element
anpassen, das heißt, dies ist das
oberste Element des Körpers. Sie können es einfach mit einem
Widget umschließen und dieser Besuchsname ist eine einzelne untergeordnete Bildlaufansicht. Du erinnerst dich nur an diesen Namen , weil es ein Game Changer ist. Und dies wird Ihnen helfen, das
Spalten-Widget scrollbar zu
machen. Sehen Sie, dass der Fehler
verschwunden ist, und im Moment diese Spalte jetzt, ohne dass unten
hinzugefügt wird scrollt
diese Spalte jetzt, ohne dass unten
hinzugefügt wird. Wenn Sie möchten, können Sie diese Bedingungen
googeln. Was für eine einzelne untergeordnete
Bildlaufansicht,
was ist das ListView , was unsere Spalte, wenn wir tiefer gehen
wollen. Aber ich habe Ihnen die
grundlegenden Informationen zu
einem Grundkonzept gegeben einem Grundkonzept wie und wann wir diese Art von Widgets
verwenden sollten. Ich hoffe, Ihnen hat
dieses Modul gefallen , denn
hier haben
Sie jetzt bereit, in den kommenden Modulen
ausführlichere Dinge einzugehen . Und am Ende dieses Kurses werden
Sie ein vollständiger Entwickler von Flutter-Anwendungen.
15. Was ist ein Staat: Dieses Modul ist
sehr wichtig weil wir hier darüber
diskutieren werden , was
ein staatlicher Haushalt ist. In den früheren Sitzungen V sind
wir es sehr gewohnt, weniger Widget
anzugeben. Wir haben auch unser
eigenes staatenloses Widget
mit dem Namen des Startbildschirms erstellt . Aber definitiv in idealer
Weltanwendung V, könnte
mein Mädchen viele
Szenarien sein , in denen wir ein stateful Budget verwenden müssen
. Bevor Sie in das vollständige Widget
des Staates gehen, denken
Sie vielleicht darüber nach,
was ist dieser Zustand? Ein Staat ist also nur ein Wert oder ein Datenelement
in unserer Anwendung. Alles, was sich ändern kann, wie
Zähleranzahl, Text, Farbe usw., kann Teil von Statuserklärungsdaten
in Ihrer Anwendung sein. Dies ist Zoom, ein Status des
Benutzernamens, das ist was? Seine oder ihre Fähigkeiten, Flattern, Firebase, das
sind alles Staat. Welche Farbe hat die App? Blau, das ist auch ein Staat. Stateful-Widget
ist einfach ein starrer , dessen interne Daten
sich bei einer Aktion ändern werden. Das heißt, die Schaltfläche wird angeklickt und dann
sollte die Textfarbe geändert werden, es
eine Art Animation geben sollte. In diesem Fall. Get starr wird aktualisiert und mit 10 neuen Daten
neu aufgebaut. Dies ist
in Staatenlosenregion nicht möglich. Theoretisch
haben Sie es also verstanden, aber definitiv
arbeiten wir in unserem Code. Sie könnten viele Zweifel haben. Und lasst es uns eins nach dem anderen klären. Also werde ich alle diese Daten einfach wieder
entfernen. Bevor ich jedoch
alle Daten entferne, hätte
ich gerne
einen neuen Bildschirm. Es ist zu Hause ist okay. Es ist ein Zustand, der weniger starr ist. Aber ich hätte gerne vermuten, Kontaktpunkt, Punkt. Wir haben diesen Bildschirm. Lassen Sie uns nun unseren
ersten Status im Vollbildmodus erstellen. Dann müssen wir zuerst wie gewohnt Material
importieren dann eine Klasse und einen Namen erstellen. Name, den ich nennen werde, ist
Kontakt und dann verlängertes Fälligkeitsdatum, Vollsicht. Okay. Dann wird eine Maschine fehlen
oder welche Rechte. Und das ist so. Dies ist der Status „Create“. Stateful-Widget wird zwei Klassen
haben. Einer ist das State Full div, das den Stateful erweitert. Und die zweite ist die
Staatsklasse, die sie erweitert. Also hier kannst
du einfach zurückkehren,
nehme an, ich nenne es Tech. Bundesland. Dies wird wieder starr sein. Ich werde diesen
Kontextstatus erstellen. Es wird verlängert sein Datum, das diesen Namen haben wird. Und dann jetzt hier, wieder, wird
es
schon fehlen die Rechnung. Und jetzt sind Sie
mit diesem Gürtel vertraut. Ich werde einfach das
Gerüst zurückgeben. Dies ist also das bloße Minima- oder Dub-Skelett eines
stateful Widgets. Also denkst du vielleicht: Oh nein, ich möchte
das nicht immer wieder schreiben. In diesem Fall
benötigen Sie möglicherweise einige Erweiterungen. Wie hier habe ich diese
tollen Flattern-Snippets. Dann wirst du definitiv Dart und fruchtbar drin
haben. Mit diesen tollen
Flattern, Schnipseln. Wir bekommen viele Abkürzungen. Eine der Verknüpfungen besteht darin, ein
Stateful-Widget direkt zu
erstellen. Also werde ich einfach all
diese Tastenkombinationen S,
D, F entfernen , das ist Flutter
Stateful Widget. Und dann klicke ich einfach auf
Enter und nenne es. Kontakt. Um es zu sehen. Das ist erledigt. Mit dieser Abkürzung müssen wir nichts anfangen. Und was ist dieser Staat hier? Ich werde diesen
String-Namen haben, der gleich dem Gast ist. Angenommen, dieser Gastname ist ein Zustand, den wir später
ändern und Ihnen zeigen
werden , wie es ist, wie
Bildschirmdribbles funktioniert und wie es funktioniert, wie die Benutzeroberfläche Gs
bei jeder Aktion ändert, die wir ausführen. Im nächsten Video werden
wir von hier aus fortfahren. Also Sehne und Freude und
übe dein Bestes. Und du.
16. Die setState ()-Methode: Jetzt haben wir bereits
darüber
diskutiert und wie man
ein Stateful Widget schreibt. Jetzt ist es an der Zeit, es
praktisch zu machen und zu
verstehen, wenn
wir invertieren, wir müssen die
set state-Methode verwenden. Und was ist der
Vorteil, es zu benutzen? Lass es uns machen. Wir haben diese
Kontaktseite, Punkt-Dot-Dot-Dot. Hier im Gerüst habe ich eine App-Leiste und es wird eine Art Text haben. Angenommen, Stateful-Widget. Okay? Und im Körper, Lasst uns eine Säule
bei den Kindern haben. Und die Kinder weniger das
erste Textfeld „Gewohnheit“. Und unten haben wir einen Text von Angenommen hallo, Dan, Namensvariable. Und im Hauptpunkt-Punkt-Punkt, anstatt auf den Startbildschirm
zu gehen, gehen
wir zum Kontextbildschirm. Aktualisieren Sie unseren Neustart
unserer Anwendung. Und sehen Sie, Sie werden nur ein normales Textfeld
sehen, aber Textfeld mit diesem
Hallo Text-Widget. Was ich will ist, wenn sich hier
etwas ändert, ist
es auf geändertem Wert. Ich möchte, dass diese
Namensvariable festgelegt wird. Das was auch immer es umschreibt. Okay? Aber die Sache ist, wenn wir es so machen, ohne den
set state zu verwenden , wird es nicht funktionieren. Mal sehen Hallo, ich
möchte Flutter-Akte. Siehst du, hier funktioniert nichts
. Es ist solide. Es ist schon wieder, hallo Gast. Aber wenn wir hier nur die
set state-Methode verwenden
, sind dies eine
Änderungstestdaten und wie wir, wie wir Staaten sitzen möchten, 10 Hauptstädte
setzen,
Status setzen und dann Klammern setzen. Und in diesem wiederum wird
IF-Funktion wie diese geschrieben. In diesem gesetzten Zustand
ist
jetzt, wenn ich den Namen ändere, gleich dem Wert, und dann fangen wir an. Jetzt konzentrierst du dich einfach
auf den Text Hallo. Sehen Sie, zum ersten Mal, was
sie waren,
schreiben wir die Benutzeroberfläche nur aus einem Grund,
weil es das vollständige Widget „
State Full“ sagt. Jetzt gibt es hier an
, dass das der Name ist. Wir können es
nach einigen Aktionen hier ändern. Diese Aktion ist ein Textfeld. Um zu verstehen, was los ist und wie
wird der Bildschirm neu aufgebaut. Wir können einfach eine
Print-Statement haben. Zuerst in dieser Gesetzesvorlage, das ist Druckbildschirm Building. Und eins hier. Drucken Sie den Wert, wenn Sie möchten. Oder Sie können einen Druck
Sets Status verwenden , der aufgerufen wird. Wenn ich jetzt neu starte, sehen
Sie nur das Erstellen des
Debug-Konsolenbildschirms, das heißt, diese Bill-Funktion wird aufgerufen. Aus diesem Grund können
wir diese Ausgabe sehen. Jetzt werde ich schreiben, sehen, ob ich f schreibe, dann setze wieder die Verwerfen und der
Bildschirm wird neu aufgebaut. Und du d, d, e. Also die ganze Zeit war
der CUI, dass diese
Bill-Funktion
wieder aufgerufen wurde und dieser
Wertname geändert wurde. Deshalb wird es hier
widergespiegelt. Über die Debug-Konsole können
Sie also verstehen, was unter der Haube vor sich
geht. Und Halbbuchstabe verwendet
die Methode set state um die Benutzeroberfläche darauf aufmerksam zu machen, sich selbst
neu zu erstellen. Dies ist also der Unterschied zwischen einem zustandslosen
und einem stateful Widget. Bei staatenlosen starren Schulden ist
die Schulden, was auch immer
geschrieben wird , kann nicht
geändert werden,
ob wir über einige
Buttons, Klicks oder was auch immer wollten. In einem Stateful-Widget können
diese Werte jedoch mit dieser Set-State-Methode geändert werden. Im nächsten Video werden wir
ein weiteres Beispiel für
Set State Tail machen und dann einfach versuchen, selbst zu
recherchieren und zu üben.
17. Stateful Widget in Aktion: Bis jetzt wissen wir, wie
man eine SET-Anweisung verwendet und wie sie verwendet werden kann, um unseren Bildschirm
mit Dan new state
neu aufzubauen. Aber es ist besser, wenn wir einige mit
einigen weiteren Beispielen üben. Fangen wir an und
erstellen einen neuen Bildschirm. Neue, neue Datei wird sein. Angenommen, es sollte nicht sein. Und wir nennen es einfach stateful. Punkt-Punkt-Punkt. Wie üblich
Importmaterialpaket. Dann habe ich stateful Besuch meines Dates im Vollbildmodus. Ich habe es gerade so genannt. Dann nimm das Gerüst. Und dann
habe ich wie immer
in diesem Titel einen Datumstext, der voll starr im Körper ist. Du in der Leiche. Lassen Sie uns
Widget und Kind zentriert haben. Lass uns ein Spalten-Widget haben. Jetzt sitzt in einem stateful Widget. Definitiv muss es einen Zustand
geben, in dem ich eine Zeichenfolgenliste
erstellen werde . Ich nenne es. Die Namen sind gleich diesem. Und ich lerne Bill, Mark. Okay? Und ich werde ein NSDate
von int haben Ich ist gleich 0. Du denkst vielleicht,
was sind das? Es ist also nur 0, weil der
Index einer Liste mit 0 beginnt. Jetzt
gibt es hier zuerst ein paar Texte, ein Textfeld und zum Einladen, mein Mittelwert sind dann Namen. Und ich, also wird es
den Anfang hinzufügen, es wird IL-1 zeigen. Und dafür müssen wir
in meinen gemeinen Punkt-Punkt-Punkt wechseln
, der mein
Status-Vollbildmodus ist, und dann neu starten. Mal sehen. Sieh mir meinen Namen
und mein Name ist 11. Okay? Und auch die Spalte
Ich werde ein Haupt-,
Haupt-X Ausrichtungspunkt-Zentrum verwenden ,
das von oben nach unten ist, es sollte zentriert sein. Okay? Was ich jetzt will, ist, dass
ich Schaltflächen in
derselben Spalte anheben möchte. Erhöht bedeutet es tut mir leid, ich meine erhöhte Taste. Und der erste Button wird der nächste sein. Und der zweite ist erhöht, aber dann gehen wir zurück. Okay, mal sehen. Okay. Was ich will ist, wenn ich
auf diesen Next Button klicke, mein Name ist Elaine sollte sein, Mein Name ist Bill. Das ist H sollte umkreisen oder dafür
sollte es diese
Namensliste durchgehen. Vor Ort muss
ich diese Daten abändern. Ich habe es getan, dass ich 0 bin. Es sollte eins sein. Wenn ich auf die Schaltfläche Weiter klicke, schreibe ich
soweit nur set state und dann ich plus plus. Mal sehen. Ich
klicke auf dieses nächste C, Mein Name ist eingebaut. Wenn ich klicke Mein Name ist Mark. In ähnlicher Weise, wenn ich zurückgehen möchte, setze
ich einfach den
Status I minus minus. Hier. Wenn ich auf Weiter klicke, geht
es Bill. In der Tat können wir zurückgehen. Es wird wieder lernen. Aber die Sache ist, wenn der Benutzerklick
mehrmals verbindet, wird ein Buchstabe C angezeigt. Weil ich nur der Atlantis bin, ist nur 0, 1 Schulden drei. Aber wenn ich mehr als zwei gehe, wird
es anfangen,
Fehler zu weit zu zeigen, dass wir hier im On-Premise einige Bedingungen tun müssen, wie z. B. Wenn ich es einfach sagen will. Wenn ich weniger als
Namen Punktlänge ist, dann führte nur
diese gesetzte Status-Sache aus. Okay. Jetzt lasst uns neu starten und
prüfen, was passieren wird. 012 geht zu behandeln sollte 01 Mark
nicht ausführen. Und wieder muss ich hier
auf jeden Fall minus eins schreiben. Lass es uns nochmal machen. Eland Bill, sehen Sie, jetzt zeigt es
keinen Fehler. Und in ähnlicher Weise, geh zurück. Wenn du zurückgehst, müssen
wir prüfen, ob
ich nicht gleich 0,
zehn minus ist, wenn es bereits 0 ist, dann können wir nicht weiter gehen. Versuchen wir es jetzt. Wenn ich 123 gehe, okay? Wenn ich jetzt Bill 11 gehe, und wenn ich jetzt versuche
, auch zurückzukehren, dann wird es auch nicht
funktionieren, weil wir unseren Zustand
haben
, der
sicherstellt , dass der Bildschirm
nicht abstürzt. Dies ist also ein sehr grundlegendes
Beispiel für den set state. Ein weiteres Beispiel, das Sie haben können
, ist , dass tot eine Farbe ist, diese Farbe ist rot. Okay? Dies ist ein Staat. Jetzt habe ich einen
schwebenden Action-Button. Floating
Action-Button, den ich mag. In diesem Kind
wird es ein Symbol haben. Ich kann anfangen. Mal sehen. Ich weiß nicht, was die Farblinse
ist. Schauen wir es uns an. Siehst du, okay, ich habe
dieses Icon hier. Was sie wollen ist, wenn
ich auf dieses Symbol klicke, sollte sich die Farbe ändern. Jetzt. Ich habe diese Hintergrundfarbe und diese Hintergrundfarbe wird der Zustand
sein, der rot ist. Okay, also ist der Staat ganz
am Anfang rot. Aber ich möchte, dass wenn ich auf diesen Button
klicke
, dieser Zustand jedoch geändert
werden sollte. Wenn ich also auf diese
Schaltfläche klicke, setze den Status, Farbe entspricht den Farben Punkt Amber. Ich zeige Ihnen nur verschiedene,
verschiedene Beispiele, damit Sie sich mit
Datensatzdaten
wohler fühlen, um zu verstehen, was sie tun. Jetzt klicke ich darauf, sehe eine Farbänderung zu Amber. Dies ist also die Verwendung von Sets date, und so funktioniert ein
stateful Widget. Es ändert einfach
diese Daten und baut den
Statusbildschirm mit
neuen Schuldendaten wieder auf, so einfach das. Im nächsten Video werden
wir also
einige des verbleibenden
Konzepts dieses Moduls besprechen . Und danach können wir auf
die nächsten flacheren Konzepte
eingehen . Danke.
18. Was ist initState ()-Funktion: Jetzt haben wir bereits an einem stateful
Widget
gearbeitet und wie man
den Status mit
SET-Anweisung ändert und get ist eine andere Methode, die in einem stateful Widget,
das als init-Status bezeichnet wird, sehr wichtig ist. Was ist also in jedem Bundesstaat? Es ist eine Funktion
, die bereits in jedem
stateful Widget
tot ist in jedem
stateful Widget
tot wir nur IN schreiben müssen. Sieh hier, ich kriege diesen Helfer. Wenn ich also auf Enter klicke, gibt es diese Funktion
in ihrem Zustand und was es tut,
wenn dieser Bildschirm ,
unser Van, dieses stateful Widget für
das allererste erstellt
wird. Das heißt. Das bedeutet also, dass vor
dieser Bill Funktion vor der Benutzeroberfläche diese in
ihrem Status aufgerufen wird. Wenn du also sehen willst, was
ich sage, lass uns drucken. Das ist Gehirn. Hier. Init-Status und in Bell-Funktion. Lassen Sie uns die Build-Funktion drucken. Jetzt starten wir
die Anwendung neu. In der Debug-Konsole. Sie werden zuerst sehen,
dass der init-Status aufgerufen wurde, und zweitens wurde diese
Bill-Funktion aufgerufen. Dies ist also sehr
mächtig und sehr nützlich, wenn wir
eine reale Anwendung erstellen. Also denkst du vielleicht, okay, aber was nützt
dieser Init-Zustand? Was wir normalerweise tun, ist,
dass wir einen Wert zuweisen. Wir weisen unseren Variablen,
Instanzvariablen, einen gewissen Wert
zu , den Sie diesen Daten sagen
können Angenommen,
dies ist zum Beispiel String-Name, und dies ist eine Variable. Jetzt kommen diese Daten. Angenommen, verwende auf dem vorherigen
Bildschirm ihren Namen. Hier drin. Ich sage einfach
dies.UserId Name, die beiden. Jeff Bezos. Jetzt im init-Status möchte
ich diesen Wert
zuweisen. Das sind die Daten , die vom
vorherigen Bildschirm zu diesem Bildschirm kommen. Wir schreiben einfach, dass dieser Punktname Benutzernamen des
Widget-Punkts entspricht. Und dann im Text, aber ich möchte diesen Benutzernamen
zeigen. Mal sehen, funktioniert es oder nicht? Sieh mal. Was wir also gemacht haben, war, dass
die Daten zum Beispiel vom
vorherigen
Bildschirm auf den Bildschirm kamen . Und hier
weisen Sie diesen Wert einer
Variablen zu, die leer war, die früher null war. Bevor der Bildschirm erstellt wurde, wurde
dieser Wert
dieser Variablen unter Verwendung
des init-Status zugewiesen . Da, weil es die
erste Funktion ist, die
aufgerufen wird, als dieses
Widget erstellt wurde. Es gibt, man kann sagen, wann
dieses Budget aufgebaut wurde. Angenommen,
ich hoffe, Sie erinnern sich an den vorherigen
konservativen festgelegten Zustand. Wenn ich darauf klicke,
wird diese Bill-Funktion erneut aufgerufen. Die Init-State-Funktion
wird jedoch nur einmal aufgerufen. Sehen Sie also, die Bill-Funktion wird erneut aufgerufen , da die Seite aktualisiert
wird. Aber diese Init-State-Sache, von, wir können es nicht noch einmal nennen, es ist schon ganz
das auf Lee aufgewickelt sobald ADH Sie
diesen Bildschirm entfernen müssen oder zum Unterschied gehen kann völlig anders zweiseitig und komm dann wieder
auf diese Seite zurück. Das ist die „Livreie“. Hier weisen wir
diesen Wert aus
dem übergeordneten Widget einfach diesem Widget
zu. Dinge, die du sehen kannst. Es gibt viele
Dinge wie Streams, Texte und Controller zu sein. Der Wert der Beiträge sind also
jene Dinge, die wir initialisieren
möchten,
verwendet werden oder VK kann
es im init-Zustand initialisieren. Im Moment
denken Sie vielleicht darüber nach, was ich sage, aber später, wenn wir die
Firebase-Datenbank verwenden oder etwas initialisieren
müssen. Angenommen,
eine HTTP-Anfrage. Diese Dinge können wir im init-Zustand tun
. Das bedeutet, dass gerade gestorben Ding
initialisiert wird,
sobald diese Seite erstellt wird. Ich hoffe also, dass Sie das Konzept der
stateful Budgets und die
Erstellung von Seiten
verstanden haben . Dieser init-Status ist
sehr wichtig. Aber im Moment, wenn
Sie es verstanden haben, es sei denn, das Konzept
auch, dann reicht es aus. Wir können zu
einigen anderen Themen übergehen. Und Q
19. Widget Lebenszyklus verstehen: Im letzten Video, V, und wie der
init-Status Vogue funktioniert. Ebenso haben
wir entweder Funktionen
oder andere Dinge. Jedes stateful Widget, das
als Lebenszyklus des vollständigen
Budgets bezeichnet wird . Also DRF, einige der Funktionen, die wir im Stateful-Widget
verwenden können. Der erste ist der Init-Staat
, den wir bereits besprochen haben. Dies ist die erste Methode die beim Erstellen des
Widgets
aufgerufen wird. Es heißt ein und nur einmal. Es wird normalerweise verwendet, um Eigenschaften zu
initialisieren , die darauf beruhen, dass diese
Widgets diesen Baum erziehen. Zwei Streams tiefgestellt
ändern Modifikatoren. Jedes andere Objekt, das das Datum
nach unten in diesem Widget ändern
könnte. Das haben wir also besprochen. Dann folgt das nächste tiefe
Änderungsabhängigkeiten. Diese Methode wird
unmittelbar danach in jedem Zustand aufgerufen. Und wenn sich die Abhängigkeit
von Death State Object über das
geerbte Widget ändert. Sie können also einfach sehen, dass es Abhängigkeiten geändert
hat. Ich werde einfach, ich schreibe
einfach Druck. Hat Abhängigkeiten geändert. Ich starte die App neu. Und hier werden Sie sehen, dass zuerst
in seinem Zustand da sein wird. Dann ändern sie Abhängigkeiten,
dann doppelte Funktion. Diese Methode wird selten
benötigt oder verwendet. Diese Andocks des Flatterns deuten
auch darauf hin, dass es nützlich sein
könnte, wenn Sie einige Remoteanrufe tätigen müssen
. Aber wenn n
Widget-Updates geerbt hat
, ist dieses Konzept
nicht so wichtig. Ich habe
absolut viele,
viele Jahre gebaut und dieses
Ding ist nicht wichtig. Drittens ist diese Glockenfunktion. Diese Methode wird jedes
Mal aufgerufen , wenn wir diese neu erstellt haben, sie ist erforderlich und
muss ein Widget zurückgeben. Das ist also die Glockenfunktion. Wir haben bereits, wir wissen
bereits, dass es an diesem 30 Platz
zuerst in seinem Staat
genannt wird. Zweitens, ändern Sie Abhängigkeiten. Und drittens, Funktion für
Tage hat Region aktualisiert. Dies ist auch eine Funktion, die durch das Stateful-Widget
gegeben wird. Es heißt übergeordnete kalte Änderungen und muss diskret
neu aufbauen. Das ist dieses Widget. Also was ich meine ist,
Angenommen, hier
kommen diese Daten von diesem Elternteil frigid, sie stammen vom vorherigen Bildschirm. Und hier wurde aktualisiert. Dieses Ding wird aufgerufen,
wenn diese Punkte,
angenommen, dass der Name nicht gleich
0 ist, starrer Punkt-Benutzername. Oder tut mir leid, Sie können einfach
diesen Punkt-Widget-Punkt-Benutzernamen,
Marke, sagen . Haben sie sich geändert? Jetzt können wir es nicht zeigen, aber Sie müssen das Konzept
verstehen. Angenommen, ein typischer Fall , in dem ein Elternteil
über den Konstruktor eine
Variable an die untergeordneten Elemente übergibt , , in dem ein Elternteil
über den Konstruktor eine
Variable an die untergeordneten Elemente übergibt,
was
wir bereits getan haben. Das übergeordnete Element übergibt einige
Daten über den Konstruktor. Und wenn sich das Pad
und die Widget-Daten ändern, sich diese Funktion auch erinnert
sich diese Funktion auch an und zeigt an
, dass Änderungen vorgenommen wurden. Für die Ursache,
die danach funktioniert, müssen Sie den
Set-Status nicht selbst lesen. Diese Funktion wird auch
nicht so oft genutzt. Aber wenn wir etwas
über stateful Widgets lernen, sollten Sie es
zumindest wissen. Diese Begriffe existieren auch. 50 Stellen Sie den Status ein. Wir wissen bereits, dass dies ein gesetzter Staatskönig
ist. Und danach wird
die Bill-Funktion
erneut aufgerufen und die Benutzeroberfläche wird erstellt. Das ist keine neue Sache. Sechstens ist die Deaktivierung. Diese Funktion wird aufgerufen, wenn das Objekt
aus dem Baum entfernt wird. Dies wird wieder selten benutzt. Diese Methode existiert im Grunde
die Kostendatenobjekte können von 1 zu
einem anderen
entfernt und vorübergehend
entfernt werden. Ich zeige Ihnen nur , dass dies auch so
deaktiviert ist. Wenn Sie einfach drucken deaktivieren. Und ein Finale und das
letzte wird entsorgt. Das ist sehr wichtig. Diese Methode wird aufgerufen,
wenn dieses Objekt,
das heißt, wenn dieses
Stateful-Widget dauerhaft aus dem
Baum entfernt
wird. Hier sollten wir
Energiequellen freisetzen,
die vom Objekt gespeichert werden , wie das Stoppen
einer Mission ist was auch immer. Ein Beispiel ist, dass Wendys mein TED mit der
Schieberplatzierung des Navigators abscheulich
genannt wird . Nur in der nächsten Sitzung werden wir über die Navigation
sprechen. Das ist also von einer
Seite zur anderen Seite. Wenn wir gehen, dann sollte
die vorherige Seite ordnungsgemäß entsorgt
werden. Es sollte kein Speicherleck geben. In einer realen Anwendung ist
es daher sehr wichtig, diesen Entsorgungsmentor zu
verwenden. Hier werden wir
einige Animationen,
unsere Datenbankanrufe oder was auch immer beenden , was später nicht erforderlich ist. Dieses
säkulare, freie,
stateful Widget für Erwachsene ist also zuerst
init-Status zweitens und lässt
Abhängigkeiten fallen. Drittens ist die Build-Funktion. Als 40 ist, wenn wir welche tun, wenn ihr übergeordnetes Widget hier
Änderungen an ihren
Variablen vornimmt . Also hat dann
vd aktualisiert, dieser Aufruf, wir vergleichen das mit Werten. Und dann ist die letzte
die Deaktivierung, die auch nicht so sehr nützlich ist, aber dieser Beitrag wird oft verwendet. Eine Menge. Sie müssen also sicherstellen, dass Sie all diese Begriffe kennen und wenn wir sie später
verwenden, sind
Sie nicht verwirrt darüber was das ist oder ist
das etwas Neues? Denn zumindest dieses Konzept, das wir später
kennen, praktisch lernen
werden, wie man es benutzt. Danke.
20. Stack-Konzept hinter Navigation: In diesem Modul beginnen
wir
ein neues Thema, das die Navigation ist. Die Navigation ist ein wesentlicher Bestandteil der Benutzererfahrung für
jede mobile Anwendung. Weil Benutzer auf jeden Fall ständig zwischen verschiedenen,
verschiedenen Bildschirmen
navigieren. Es ist unmöglich, dass
Sie
eine vollwertige Anwendung erstellen und eine vollwertige Anwendung erstellen und nur einen Bildschirm haben. Wenn Sie gesehen haben, ob Sie eine
E-Commerce-Website sehen, DNR, bestellen Sie meine Bestellung, Warenkorb, dann Homepage und dann Angebotsseite. Es gibt viele
Bildschirme für Schulden. Wir müssen wissen, wie
man richtig navigiert. Jetzt ist Papa ein krankes Konzept des Navigationsflatterns,
das Stapel ist. Wenn Sie aus einer
Programmiersprache R kommen, Wenn Sie
Ihren Abschluss gemacht haben, wissen
Sie definitiv, was ein Stack ist? Es schiebt einfach und
springt Elemente ab. Sie können also einfach dieses
Diagramm sehen und das verstehen. Angenommen, das ist kein leerer Stapel. Dann
wird ein Bildschirm, in dem die App geöffnet wird, und dann wird der Startbildschirm auf den Stapel
geschoben. dann vom Startbildschirm Wenn wir dann vom Startbildschirm aus zum
Kontextbildschirm navigieren, das heißt, wenn wir einfach zu den
Kontexten gehen und Möglichkeit
haben,
wieder auf den Startbildschirm zurückzukehren. Dann wird dieser
Kontextbildschirm
wie nur der Stapel über das
Homeschooling gehen . Das heißt, es ist
übereinander. Man kann also einfach sagen, dass es der Regel des
Last-In-First-Out
folgt
, also Lifo und nicht
First-in-First-Out. Wenn wir also den
Kontextbildschirm öffnen und
wieder zum Startbildschirm zurückkehren , werden diese Kontakte grün
aus dem Stapel entfernt. Und dann wieder in Dust Stack. Der Startbildschirm
wird nur vorhanden sein
, der für
den Endbenutzer sichtbar ist. Das ist also der 2D, das ist das Konzept hinter der
Navigation in Florida. Sie müssen es verstehen, denn in Ihrem Kopf sollten
Sie sich
auf jeden Fall vorstellen, wie Seiten oder wie Ihr
Code funktioniert. Fangen wir dann an. Wenn Sie das Konzept kennen, beginnen wir
es mit
einer grundlegenden Navigation. Bringen Sie diesen Texteditor heraus. Und diese Seiten möchte ich nicht, ich erstelle einfach eine neue Seite. Und Name ist der erste
Bildschirmpunktpunkt. Dann importiere ich Material. Dann wird es staatenlos sein. Ich möchte keine Daten ändern. Es wird der erste Bildschirm sein. Es wird ein Gerüst
in der AB-Bar sein. Lassen Sie uns den
Titeltext des ersten Bildschirms haben . Weisen Sie diesen ersten
Bildschirm einfach in Domain-Punktpunkt zu. Aktualisieren Sie jetzt Ihre
Anwendung und sehen wir uns an. Der erste König ist tot. Im nächsten
Video werden wir also etwas
über das Konzept
von Bush und Bob erfahren . So sendet man diesen Stapel, einen Bildschirm im Stapel, und wie man ihn entfernt. Und geh noch einmal
zum vorherigen Bildschirm zurück.
21. Push und Pop Methode: Arbeiten wir weiter
am Navigationsteil. Wenn wir also diesen ersten
Bildschirm im Körper haben, lassen Sie uns ein Center-Widget haben. Und dann Kind des
erhöhten Knopfes. Und dx wird gleich
dem zweiten Bildschirm sein. Okay? Okay, wir haben diesen Knopf. Jetzt. Wir müssen auch einen
neuen zweiten Bildschirm erstellen. Also werde ich einfach eine neue
Datei im zweiten Bildschirm erstellen, aber Dart. Auch hier muss ich
dieses Importmaterial machen. Dann habe ein staatenloses Widget
namens Sekundenbildschirm. Wir, da es ein Bildschirm ist, also ist es wirklich Gerüst. In diesem Teil
werden wir einen Titel haben. Das ist sehr wiederholend, ich weiß, aber du
musst es üben. Man muss sich so sehr daran
gewöhnen , dass man
alles darüber weiß. Okay? Wir haben diesen zweiten
Bildschirm, okay? Nun müssen wir zu navigieren, du denkst vielleicht, okay, aber wie navigiere ich? Um zu navigieren
gibt es eine Methode namens Push and Push Placement. Das heißt, zuerst ist Push. Das heißt, wir werden einfach den nächsten Bildschirm über dem Bildschirm nach
oben geschoben . Das heißt, wir werden den
zweiten Bildschirm in den Stapel schieben. Aber der erste Skin
wird den Stapel gewagt. Was ich meine ist, dass wir den Push verwenden
müssen, aber die Syntax, an die Sie sich erinnern
müssen, ist zuerst der Navigatorpunkt, dann die CD-Ära, so viele Optionen. Push, Pop, Push Ersatz. Also werden wir push benutzen. Dann wirst du sehen,
dass es zwei Dinge akzeptiert. Erstens ist ein Kontext und
der zweite ist eine Route. Auf dieser Route müssen wir mir
TDL-Seiten-Routen-Widget wie folgt schicken . Siehst du, es ist ein bisschen anders, aber das ist ein Code, den
du einfach lernen oder einfach
auswendig merken musst, das war's. Jetzt ist dieser Builder eine
Funktion wie diese, die hier Kontext sein
wird. Und dann kehrt diese Funktion zurück. So erreicht der Bildschirmname in
unserem Fall ist der zweite Bildschirm. Dies ist also der Code, erforderlich ist, um von
einem Bildschirm zum anderen zu navigieren. Abgesehen von diesem zweiten Bildschirm ist
alles, was Sie
sich nur merken müssen, die Syntax. Und Navigator Dot Push
nimmt zwei Parameter an. Einer ist Kontext und der zweite
ist die Materialseitenroute. Materialseite, die es herausgibt, akzeptiert
einen Parameter von Builder
, einer Funktion, die diesen Bildschirmnamen
zurückgibt. Das ist Identitäts-Tensor-Widget. Man kann einfach sagen, Mal
sehen, funktioniert es? Und denken Sie daran, dass wir
hier verwenden, und ich werde einfach die Push-Methode
schreiben, weil es einen Unterschied zwischen
Push- und Push-Ersatz gibt. Ich klicke einfach auf Gehe
zum zweiten Bildschirm und sehe, dass der zweite Bildschirm da ist. Dies ist also das erste
Mal, dass wir
mehrere Bildschirme von
einem Bildschirm zum anderen verwenden . Und jetzt kannst du sehen, dass
es diese Pfeiltaste gibt. Stellen Sie sich
also vor,
dass wir gerade zum vorherigen Bildschirm zurückkehren
werden. Und wenn Sie einen Stapel
visualisieren können, heißt
das über dem ersten Bildschirm
, dieser zweite Bildschirm
saß. Und dann entfernen wir es einfach. Und du denkst vielleicht, okay, ich habe
irgendwie verstanden, was Push ist, aber was ist Push-Ersatz? Also schieben Sie Ersatz
löscht diesen Stapel. Das bedeutet, dass wir nicht
zu diesem vorherigen Bildschirm zurückkehren können. Sobald wir zum
zweiten Bildschirm navigieren ,
ist kein Zurück-Pfeil. Alle vorherigen
Bildschirme werden entfernt. Das ist also Navigator. Push-Ersatz. Einfach. Danach
wird alles
vom Kontext über die
Materialseitenroute und alles gleich sein . Der einzige Unterschied wird die Ersatzsyntax
verschoben. erneut Bringen Sie den Emulator erneut heraus
und probieren Sie ihn selbst aus. Wenn ich auf Gehe
zum zweiten Bildschirm klicke,
sehen Sie, dass es keine Pfeilschaltfläche gibt. Wir können von hier aus nicht zurückgehen. Sie können es einfach an
einem Beispiel für Facebook verstehen. Zunächst wird dieser Anmeldebildschirm
angezeigt, wenn wir
Benutzernamen und Passwort eingeben. Danach ist der Benutzer, und wenn es richtig ist, wird
der Benutzer
zu seinem Profilbildschirm navigiert. Und vom Bildschirm des Schuldenprofils kann
er erst wieder zum
Anmeldebildschirm zurückkehren erst wieder zum
Anmeldebildschirm wenn er nicht auf
die Abmeldeschaltfläche klickt. Dies ist also ein sehr gutes und typisches Beispiel dafür, wann Push
verwendet werden soll und wann Push-Ersatz
verwendet werden soll. Jetzt haben wir es verstanden und wir haben
gelernt, Seiten zu pushen. Aber es gibt ein anderes
Konzept, Seiten zu knallen. Also was wir hier
in diesem zweiten Bildschirm machen werden. Nur in ihrem Körper. Schon wieder. Erstellen Sie die rechte Mitte, dann Kind. Dann erhöhte Taste. Hier ist, ich habe
etwas falsch gemacht. In der erhöhten Taste. habe gerade gesehen, wann das
Kind du wirst, schreibe
ich hier und gehe zurück. Jetzt werden wir hier
das Konzept des Pop verstehen, was bedeutet, einfach
diese Seite vom
Bildschirm zu entfernen und weniger im Steuernavigator-Punkt Push. Jetzt hier einfach Pop und
es akzeptiert Schrittkontext. Das war's. Nicht viel. Und um zu knallen, denken Sie
daran, dass es gedrängt wird, kein Push-Ersatz,
sonst stürzt Ihre App ab. Sie gehen
einfach direkt aus Ihrer Bewerbung heraus. Okay? Wenn ich nun auf
Gehe zum zweiten Bildschirm klicke,
sehen Sie, dass wir diese
Zurück-Schaltfläche haben und wenn
ich darauf klicke , komme ich wieder zurück komme zum ersten Bildschirm zurück. Jetzt denken Sie vielleicht, dass dieses Routing auch dasselbe
tut. Standardmäßig ruft es auch die
Navigator-Punkt-Pop-Funktion auf. Beide machen das Gleiche, aber hier
schreiben wir absichtlich den Code, um zurückzukehren. Das war's. Und dieser Navigator-Punkt-Pop entfernt diese oberste
Seite aus dem Stapel. Es könnte also
unter 23 Seiten sein, aber es entfernt nur die
oberste Seite. Das war's. Und wenn Sie von
dieser zweiten Seite möchten, können
Sie auch zurückgehen. Gut, zwei verschiedene Seiten. Ich werde nur
Schulnavigator machen, aber schieben. Dann hier,
Materialseitenroute, dann einfach Kontexte. Jetzt möchte ich
auf
diese Kontaktseite gehen auf . Angenommen Kontaktseite hier. Okay? Das ist auch Push. Denken Sie daran, was nun auf
dem Indextag Molkerei passiert. Es wird gerade erst
das Widget bekommen. Wenn ich dann auf
Gehe zum zweiten Bildschirm klicke, dann ist der
erste Bildschirm darüber,
dann der zweite Bildschirm, dann der zweite Bildschirm. Wenn ich dann dazu gehe, tut mir leid, ich habe einfach vergessen, den Namen
zu ändern. Wenn ich zum Kontaktbildschirm gehe, sieh dir jetzt an, dass die Kontexte
vorhanden ist und jetzt im dest
Tag-Verzeichnis einen oben und darunter. Wenn ich also hierher zurückgehe, kommt
der zweite Bildschirm und der Kontext-Bildschirm
erscheint aus dem Stapel. Und wenn ich jetzt wieder hierher gehe, dann ist dieser erste Bildschirm da. Aber angenommen
, von diesem zweiten Bildschirm werde
ich Push-Ersatz verwenden. Was passiert jetzt? Es ist sehr interessant, vom ersten Bildschirm aus zu
sehen, ,
wenn ich zum zweiten Bildschirm gehe wir zwei Bildschirme
im Stapel haben,
wenn ich zum zweiten Bildschirm gehe. Aber wenn ich auf Gehe zu
Kontakt klicke und da es Push-Ersatz
verwendet
, werden
alle Bildschirme entfernt. Das ist sowohl der zweite Bildschirm als
auch der erste Bildschirm. Wenn ich jetzt zu Contact gehe, sieh nach, es wird entfernt. Jetzt habe ich hier
Push-Ersatz benutzt. Und deshalb sollten wir es
nicht benutzen können. Man muss es nochmal sagen, manchmal einfach zu wenig komme
ich, es ist in Ordnung. Aber Sie müssen verstehen, dass dieser Push-Ersatz den gesamten Stapel,
alle Besuche aus diesem Stack
entfernt . Dies kann aufgrund eines
normalen Cachings
oder so geschehen . Aber bis Sie nicht
genug Vertrautheit haben, haben
Sie
dieses Konzept auswendig verstanden. Darauf kommt es an. In den kommenden Videos werden
wir Navigation,
Modus in Tiefe und Wasser,
die anderen Funktionen diskutieren Modus in Tiefe und Wasser, ,
anstatt nur Pop zu drücken und all
die anderen Dinge, die in einem
während.
22. Genannte Route verstehen: Bisher haben wir
gelernt, mit der Push-Methode zu navigieren. Es gibt jedoch eine andere
Art zu navigieren besteht darin, benannte Routen zu verwenden. Angenommen, Sie
müssen in vielen
Teilen Ihrer App
zum selben Bildschirm navigieren , kann
der vorherige Ansatz
dazu führen, dass keine Codeduplizierung ist. Die Lösung besteht darin, einen Namen und eine Route zu
definieren und diesen Namen für die
Navigation zu verwenden, wo immer Sie möchten. Und die Syntax ist
auch bereit einfach, nicht wie zuvor
müssen wir
Materialseitenroute und dann
Builder verwenden Materialseitenroute und dann und vieles früher
war es viel mehr Kesselcode, Boilerplate-Codierung
und alles. Aber im Moment ist die
Syntax sehr einfach. So sind Schritte. Zuerst müssen wir zwei Bildschirme
erstellen, was wir
bereits gemacht haben, okay? Und die zweite ist
definiert die Routen,
indem zusätzliche
Eigenschaften im ADL-Widget bereitgestellt werden. Also müssen wir jetzt zu
unserer Hauptpunkt-Punktseite gehen. Hier. Wir müssen hier
Routeneigenschaften wie diese
und dann geschweifte Klammern verwenden . Dies ist also auch eine Eigenschaft
von materiellen Laborrouten, die Ihnen definitiv bei Ihrer Navigation
und Ihrem sauberen Code helfen werden. Zuerst müssen Sie also die richtige Aufgabenzeichenfolge
ermitteln. Es ist so, wie es heißen sollte.
Das ist der Routenname. Aber hier habe ich
gerade einen Schrägstrich gegeben, was die Homepage bedeutet. Und es ist nur eine Funktion
wie zuvor. Und hier
schicke ich den Startbildschirm. Und so können
Sie an der zweiten Route Kontakt haben. Sie können diesen Kontakt haben. Und auch hier ist dieser Funtion
- und Kontext-Bildschirm. Wenn wir Routen benutzen, sollten wir kein
Hauseigentum benutzen. Wir sollten die erste Route benutzen. Und hier, was ist
die erste Route ist dieser Schrägstrich Backslash. Also muss ich
dieses Zuhause kommentieren und dann unsere Anwendung
neu starten. Nehmen wir an, die anfängliche Route
ist der Startbildschirm oder nicht. Die erste Route definiert , mit welcher Route die App beginnen
soll. Mit dem Namen wirst
du also nur verstehen. Es dauert ein bisschen
Zeit in meinem System. Ja. Aber es ist fertig. Sagen Sie, dass das erste
Homeschooling jetzt da ist. Und ich schicke einfach den
ersten 2 ersten Bildschirm. Mal sehen. So navigieren Sie nun mit dem Namen zum zweiten
Bildschirm
, der durch den Eigenschaftenlayer
Push-Name navigiert wird. Wir, wir verwenden Navigator Dot
Push und Push Ersatz. Aber jetzt können wir Push-Named
und Push-Nim-Ersatz verwenden. Gehen wir zum ersten Bildschirm. Hier. Sehen Sie, wir haben
unsere Push-Methode, die ich kommentieren werde und meine 10 Push-benannt
habe. Und die Syntax ist sehr einfach. Navigator-Punkt Push benannt, dann Kontexte und
deren Routenname. Und ihr Name wird Slash Contact
sein. Ich schicke es, um an Kontakt zu gehen. Angenommen. Sie können also sehen, dass
die Syntax sehr einfach ist. Es ist Navigator-Punkt-Push-Name. Dann müssen wir hier
keine Materialseite,
Route und alles mehr verwenden . Wir können einfach
den Routennamen schreiben und er
hilft uns beim Navigieren. Gehen wir zu Contact und sehen uns
die Kontaktseiten hier an. Und in ähnlicher Weise haben wir uns gedrängt. Drücken Sie den Ersatznamen. Es funktioniert die gleiche Arbeit wie Push-Ersatz bei
Führungsunterschieden. Hier benutzen wir
einen Namen Dürre. Und es ist klicken und sehen, dass
es keinen Zurück-Button gibt. Wir können nicht
auch hierher zurückkehren, um zurück zu navigieren. Oder wenn Sie es haben, wenn Sie eine Schaltfläche erstellen
möchten, können wir einfach den
Navigator Dot Pop verwenden ,
genau wie zuvor. Der einzige Unterschied besteht
darin, dass wir
Namensrouten für uns zur
Navy zur Navigation verwenden . Bush hat benannt. Und ähnlich in der Besprechung, aber dass Sie
so viele Namen schreiben können, wie Sie möchten. Angenommen, dann zweite Seite. Kontext. Und zweite Seite. Sekunden. Gut. Okay? Und wir sagen einfach,
es ist zweiter Bildschirm. Okay? Dies ist also die
Art, Routen zu benutzen. Jetzt ist die Sache, der einzige Nachteil hier ist,
wenn wir navigieren, muss sich die
Gebühr
diesen Namen richtig merken. Angenommen, wir schreiben es. Angenommen, Kontaktpunkt
S sind Kontexte, dann wird ein Fehler angezeigt. Und auf jeden Fall ist es für uns sehr
schwierig, uns an die Schreibweise zu
erinnern. Dieser umgekehrte Schrägstrich
richtig, jedes Mal, wenn weit eine einfachere
kleine Lösung wird. Und das verwendet den statischen
Modifikator, um Benennungsrouten aufzurufen. Was es bedeutet, ist,
wenn wir einen Namen verwendet haben, wenn Sie mit der Methode beginnen,
um
innerhalb des Benennungskonzepts von
einem Ort zum anderen zu navigieren , müssen wir uns an
die Zeichenfolge erinnern , die wir für ihren Namen
angegeben haben. Es ist nicht unbedingt
immer Schulden. Wir erinnern uns an den
Namen, wenn es
mehrere Bildschirme in
einer Anwendung gibt. Also erstellen wir einen String-Datentyp davon mit dem statischen Modifikator, damit wir ihn direkt
zuweisen und ihn über seine Klasse
aufrufen können , was bedeutet einfach, dass
wir eine taktische
Variable verwenden in unserem
Staat weniger starr und geben ihm einen Namen wie dieses Haus, wir werden einfach statisch schreiben. String. Id ist gleich
zu Hause wie dieses. Okay? Und dann können
wir in
der Datei main.js einfach für
den Haupt als diesen Schlüssel schreiben. Wir können eine 0-Bildschirmpunkt-ID schreiben. Und dies wird einen
Kontext des Startbildschirms haben. Einfach. So wird es sehr
viel sauberer und schöner. Und auf jeden Fall würden
Sie sich an
diesen Klassennamen erinnern, zumindest auf diesem Startbildschirm. Es ist viel einfacher
sich zu merken als die Saite. Ebenso können
wir, wenn Sie
zum zweiten Bildschirm gehen, einfach schreiben, Take String ID ist gleich. Und dann kann ich den
zweiten Bildschirm so schreiben zweiten Bildschirm so und zum Hauptpunktpunkt gehen. Hier muss ich nur den zweiten Bildschirm
schreiben. Und da es sich um eine statische Variable handelt, können
wir es direkt aufrufen,
ohne ein Objekt zu erstellen. So wird es also gemacht. Wie Sie oben sehen können, haben
wir einen statischen Modifikator verwendet, welcher Zeichenfolgendatentyp sowohl dem Bildschirm als auch
ihm eine String-Variable zuweist. Das nächste
ist, dass wir unsere Lady haben. Dann diese String-IDs
, also diese statischen
Variablen in den Routen. Jetzt ist es an der Zeit, es aufzurufen, da wir direkt
darauf zugreifen
und von
einer Seite zur anderen navigieren können darauf zugreifen
und von
einer Seite zur anderen navigieren , indem wir uns an diesen ClassName
erinnern. Und jetzt müssen wir uns nicht
an diese Zeichenfolge erinnern. Und ich werde es immer wieder
tun, was ich damit meine. Wieder in diesem Zusammenhang,
genauso wie zuvor. statische String-ID
der X ist gleich Kontakt. Dann
schreiben Sie hier einfach die Kontaktpunkt-ID. Und wenn du das auch
ändern kannst. Wenn ich jetzt hier zum
ersten Bildschirm gehe, muss
ich diese
Zeichenfolge nicht wie diesen Kontakt schreiben. Ich kann einfach
Kontakt und Ästhetik schreiben. Also, taktische Methode, kann
ich
die ID einfach so aufrufen. Sieh den Unterschied. Es ist so viel saubere
Art , unseren Code zu schreiben und zu
verwalten. Ich kann einfach sagen, dass ich illegal bin
, um so Kontakt aufzunehmen. Und sieh mal wieder, es funktioniert. Es liegt kein Fehler vor. Wenn wir diesen Ansatz verwenden. Es liegt an dir, welche du
bevorzugst. Wenn Sie sich viele
Videos und Tutorials ansehen, stoßen
Sie möglicherweise auch auf
diese Methode, da dies eine
persönliche Präferenz ist. Was auch immer du
magst, du kannst es tun, Es ist nicht immer
notwendig, diese Taktik anzuwenden, aber ich
werde dir definitiv vorschlagen denn wenn du viele Routen hast, dann ist es
für dich unmöglich
schreibe jeden einzelnen String richtig. Das war's. Im nächsten Video erfahren
wir mehr
darüber, wie Sie Daten
zwischen zwei Bildschirmen übergeben und in der Benutzeroberfläche anzeigen können.
23. Daten mit Konstruktoren übertragen: Bis jetzt haben wir verstanden, wie wir auf normale Weise
und auf benannte Weise
von einem Bildschirm zum
anderen navigieren können. Jetzt ist es also soweit. Wir verstehen
, wie man einige Daten weitergibt während wir definitiv
in einer Anwendung navigieren. Und es wird Szenarien geben. Dann müssen wir eine Daten
vom ersten
bis zum zweiten Bildschirm übergeben . Angenommen, es gibt eine Situation wie auf
dem zweiten Bildschirm, wir brauchen den
Benutzernamen dieses Benutzers, es net case. Wir möchten nicht wieder eine Datenbank
haben,
die den zweiten Bildschirm aufruft ,
da sie sehr zeitaufwendig und
ressourcenaufwendig ist. Es ist besser, dass wir, wenn wir
die Daten bereits im
ersten Bildschirm haben , die Daten an
den zweiten Bildschirm an
diesen Konstruktor übergeben . Wie wir bereits wissen, gibt es zwei Arten
von Konstruktoren. Parametrisierter Konstruktor,
Namenskonstruktor. Um Daten zu akzeptieren, müssen wir
zuerst eine
Instanzvariable auf dem Bildschirm erstellen , zu dem
wir navigieren. Das ist ein zweiter
Bildschirm, den Sie
in diesem Sinne sehen
und erstellen können , der den Wert der
Instanzvariablen akzeptiert und zuweist . Was ich damit meine ist, lass uns gehen. Angenommen, wir haben diese
Kontextcreme, die es tut. Ich nehme einfach
diesen zweiten Bildschirm. Hier. Zuerst werde ich eine
Instanzvariable mit String-Namen haben. Und dann muss ich es erklären. Ich habe einen Konstruktor erwähnt , der diesen Wert außer sich
nimmt und ihn Buddha zuweist, benannt auf diese Variable. Aber definitiv unten haben wir
nur diesen Konstruktor gemacht. Ich entferne einfach diesen
und erstelle ein neues wie zuvor. Und schreibe einfach diesen Punktnamen. Okay? Dieser Abschnitt ist fertig. Jetzt in Main.Jack definitiv. Hier. Es bittet darum, dass
wir etwas Wert senden müssen. Es ist also besser,
wenn wir es verwenden, da Anbieter jetzt
benannte Routen verwenden um
keinen Wert zu senden. werden wir auch besprechen. Aber vorerst werde ich nur
diesen zweiten Bildschirm kommentieren. Und jetzt werde
ich im ersten Bildschirm die Push-Methode verwenden, nicht den Push namens my turn. Und Sie können in
dieser Push-Methode sehen, dass der zweite
Bildschirm einige hinzugefügt wird weil es heißt
, dass auf dem zweiten Bildschirm
ein Argument
eingefügt werden muss ein Argument
eingefügt werden , das ein Argument akzeptiert. Also werde ich das einfach senden, denn da es sich um ein
Positionsargument kein benannter Konstruktor
handelt, ist es ein Partitional, der die 0te Position
ist. Also
sage ich einfach Name, Name, ich sage Kinder. Jetzt im zweiten Bildschirm, im Init-Zustand,
tut es mir leid, dass dies
eine staatenlose Region ist. Also haben wir diesen
Button zum Kontakt gehen. Hier. Ich drucke einfach
den Wert aus, der Name ist. Und ich schreibe es drucken. Okay, mal
sehen, funktioniert es? Können wir Daten von einem Bildschirm
auf einen anderen
senden? Lass es uns herausfinden. Bringen Sie Ihren Emulator hoch. Gehe jetzt zu Kontakt, damit es gut zu Sekunden sein
sollte. Ich hoffe, du hast es verstanden.
Also wenn ich gehe, haben wir
jetzt diesen Button drucken. Und wenn ich auf diesen Button klicke, siehe Bill Gates
im Druckbildschirm, wir können den
Bill Gates Wert sehen
, der vom ersten Bildschirm aus gesendet wurde. Also schließlich, v weiß, wie man mit Dateneinstellung
navigiert. Aber jetzt war es nur ein
Positionsargument. Genauso wie bei Übergabe von Daten an einen
Namenskonstruktor. Dass es nicht sehr
schwierig ist da wir das
wieder getan haben. Einfach was du tun musst. Gehe zum zweiten Bildschirm und mach es einfach
im Namenskonstruktor. Und Sie können erforderlich angeben, da es kein Null-Element
in einem liberalen Wert ist. Jetzt müssen
Sie im ersten Bildschirm nichts tun. Es ist ein Namensparameter, den Namen schreiben zu
müssen, der das Medium
ist, wie wir es dort
erwähnt haben. Und jetzt
nenne ich es Elon Musk. Prüfen Sie nun erneut, ob es mit dem
Namenkonstruktor
funktioniert. Wenn ich zum zweiten Bildschirm gehe und auf Drucken klicke,
siehe Elon Musk. Das war also dieser Unterschied und
von Anfang an sollten
Sie wissen, dass der Unterschied zwischen Partitionskonstruktorparametern und Namensparametern
hervorgehoben wurde dazu immer wieder, weil
es ein sehr Kernkonzept ist. Nun, das Ding ist tot. Ganz am Anfang entferne
ich diese benannte Route , weil
sie einige hinzugefügt hat. Nur weil wir, wenn Sie
eine Namensroute haben und diese Daten übergeben
möchten, können
wir auch Parameter
val1 navigieren, aber wir fügen einfach Argumente zu einer Map hinzu, indem wir zum nächsten Bildschirm
drücken. Sie können hier
mit dem Beispiel
Navigator-Punkt Push benannte
Kontexte sehen , Kontaktpunkt-ID. Dann ist es ein neuer Parameter namens argumente und akzeptiert Map. Hier ist der Schlüssel Name und ein
Wert, den ich angegeben habe, hat String. Sie können in Zukunft aber auch
verschiedene Objekte oder
benutzerdefinierte Modelle haben . Aber um dieses Konzept zu verstehen, müssen
Sie sehen, wie es gemacht wird, Ihren Redakteur
herauszubringen. Jetzt habe
ich im ersten Bildschirm gehen und
einchecken Domain Punkt, Punkt ausgefüllt. Okay? Und da wir benannte Routen
verwenden, muss
ich
diesen Konstruktor entfernen. Das heißt, wir können einen solchen Wert nicht
akzeptieren. Was waren die Schritte dafür? Schritt 1 war? Hier gehst du einfach zur dritten Position,
die am schnellsten Kontext
ist. Zweitens ist der Name
des Bildschirms. Das ist Kontaktpunkt-ID. Ich werde Kontakt aufnehmen, aber ich möchte zum zweiten Bildschirm
gehen, also schließe ich einfach den
zweiten Bildschirm. Hier können wir screenen. Wenn Sie das Rot sehen, wird dieser Argumentparameter Argument Argumente
genannt. Und hier können Sie einfach Namen als Schlüssel und Wert
schreiben. Wie Sie sehen können, Mark Zuckerberg. Und ich sage nur hier,
nehme an, ich schicke zwei Werte,
Gründer, Facebook, okay? Also
senden wir jetzt ihren Wert, aber auf jeden Fall müssen
wir ihn in
diesem zweiten Bildschirm akzeptieren. Rufen Sie es ab. Und um die Daten abzurufen. Dies ist der Code
, an den Sie sich
erinnern müssen , der modellierte Route ist. Viele Kontext,
Punkteinstellungen, Punktargumente auch. also einfach daran. Ich werde zuerst
prüfen, ob es null ist. Das heißt, ob Wert angegeben
wird oder nicht. Neck, das ist nicht gleich Null. Und hier
zeigt dies etwas Rot,
Rosa, weil es nicht
bedingungslos zugänglich sein kann. Denn offensichtlich
kann dies auch null sein. Entweder müssen wir
den Operator so benutzen,
was bedeutet, dass er sich verwundet hat. Wir wissen r, wir können VR und erlauben es zu überprüfen. Dieses Konzept wurde kürzlich in die Nichtsicherheit
aufgenommen. Hier prüfen
wir zunächst, ob es nicht null ist,
dann ja, außer
dass es in einer Variablen gespeichert wird. Das Gleiche. Kopieren und Einfügen. Und genau wie die Map. Sie müssen also Map in der
Reihenfolge als Map schreiben , da
es sich sonst um ein Objekt handelt. Es kommt als Objekt, dem wir
Nein sagen, es ist eine Karte hier. Und dann schreibe einfach Argumente. erste Schlüssel war Name und dann Argumente drucken. Und der zweite Schlüssel war Gründer. Lasst uns nochmal nachsehen. jetzt ab dem ersten
Bildschirmnamen und dem Geldgeber Können wir ihn jetzt ab dem ersten
Bildschirmnamen und dem Geldgeber ausdrucken? Sobald wir zum
zweiten Bildschirm gehen? Gehe zum zweiten Bildschirm und sieh dir
Mark Zuckerberg und Facebook an. Dies ist also das V der
Übergabe von Daten an den Namen Drop. Früher haben wir gelernt
, Daten an eine normale
, also normale Art der
Navigation durch konstruiert zu übergeben . Und der zweite Weg ist
die Verwendung einer Namensroute. Hier müssen wir sicherstellen, dass wir uns an die Modellroute
Dot-Off-Kontexte erinnern. Dies ist eine Möglichkeit, die
Werte zu extrahieren Vinyl navigieren. Das letzte, was den Wert
übergibt, ist, dass wir auch einen
Wert zurückgeben können, wenn wir zurückgehen. Vom ersten bis zum zweiten Bildschirm lernen
wir, wie man Daten weitergibt. Es kann jedoch einige Szenarien geben, in denen
Sie
vom zweiten Bildschirm aus
eine Art Exterieur erhalten müssen. Eine Art Erfolg, kann den Verkaufsstatus haben und der dieser Änderung
in diesem ersten Bildschirm führen
wird. Dafür müssen wir
die Post-Funktion im
ersten Bildschirm ändern, um sicherzustellen, dass sie den Wert
wartet, der await verwendet und den Wert in
der Pop-Funktion
dieses zweiten Bildschirms übergeben . Was ich damit meine, ist, dass im ersten Bildschirm
annehme, während ich beim Pushing keine Daten
sende. Wir müssen warten. Also ich, Boo Status
ist gleich zu warten. Dieses asynchrone und
erwartete Konzept
werden wir definitiv in der nächsten
Sitzung lernen. Gerade jetzt. Denken Sie daran, dass
wir hier darauf warten,
dass dieser Wert für
diese Funktion abgeschlossen ist. Und dann wird
der Wert auf Lead in
diesem Zustand gespeichert, der Boolean ist. Und hier
sage ich einfach den Druckstatus. Und jetzt also vom
zweiten Bildschirm aus. Während wir zurückgehen, schätzen wir es. Hier
schreibe ich einfach einen Punkt-Bob-Kontext. Und dann
schneiden wir hier einfach meine Beziehung wahr. Das war's. So einfach, dass wir
aus dem Bildschirm springen, müssen
wir diesen wahren Wert senden. Wenn ich jetzt zum zweiten
Bildschirm gehe und wenn ich darauf klicke, gehe zurück mit dem Wert c, true. Das wird also ab
der ersten Woche gedruckt , weil
wir warten müssen. Es hat gewartet, bis wir vom zweiten
Bildschirm auf den Bildschirm
zurückkamen. Und danach wurde nur
dieser Code
asynchron ausgeführt und wartet ist ein
sehr wichtiges Konzept. Es nennt sich asynchrone
Programmierung. Und auf jeden Fall werden
wir in
der späteren Sitzung sehr
darauf eingehen , denn ohne
dieses Konzept können
Sie
keine vollständige Anwendung erstellen. Dieser
Navigationsteil ist also fertig. Ich hoffe, du hattest Spaß und du
hattest all deine Zweifel klar. Bitte versuche immer
mehr Bildschirme zu erstellen und es zu üben, denn du
musst dich definitiv auswendig daran erinnern. Danke. Wir sehen uns
in der nächsten Sitzung.
24. Drawer Navigation: In dieser Sitzung werden wir über das Trawl-Widget
sprechen, von
dem Sie auch sagen können, dass es
eine seitliche Navigationsleiste sendet. Wenn Sie also eine
Anwendung wie Amazon verwendet haben, hat der größte Teil der
Anwendung diese drei Zeilen oder das
Hamburger-Symbol oben. Wenn wir darauf klicken, bietet die Sidebar viele
Optionen zum Navigieren. Wir wären also definitiv in Florida, es ist eine sehr einfache
Möglichkeit, dies umzusetzen. In Apps, die
Materialdesign verwenden, gibt es zwei
Hauptoptionen für die Navigation. Erstens sind Wasserhähne. Das heißt, wenn Sie das
Beispiel sehen, was CEP, die Registerkarten oben, Chats diese Schritte aufrufen. Und die andere Option sind Schubladen. Wenn nicht genügend
Platz zur Unterstützung von Wasserhähnen vorhanden ist, eine Schublade nur
in einem Gerüst-Widget verwenden, um eine praktische Alternative zu bieten können
wir eine Schublade nur
in einem Gerüst-Widget verwenden, um eine praktische Alternative zu bieten. Daran musst du dich also erinnern. Probieren wir es aus. Gehen wir zum ersten Bildschirm. Indus Gerüst. Wir haben diese Schublade. Okay. Dies ist eine Syntax, um es in unser Widget zu
schreiben. Prüfen wir, ob auf dem ersten Bildschirm etwas
passiert. Sehen Sie, dass dieses
Hamburger-Symbol gekommen ist. Diese drei Zeilen. Wenn ich
darauf klicke, haben wir das, diese Seitennavigationen erscheinen. Aber da wir nichts
drin haben, ist es leer. Aber ich hoffe, Sie haben verstanden,
dass wir nur einen Code
haben, den wir in der Benutzeroberfläche
anzeigen konnten. Jetzt drin
akzeptiert es ein Kind. Ich kann definitiv, es
wird viele andere Molkereien geben, wird viele
Navigationsoperationen meiden. Da drin werden wir annehmen, dass die ListView nicht spalten wird. Und ich zeige Ihnen, warum wir uns
nicht auch für die Kolumne entschieden haben. Aber im Moment, denken Sie daran, außer dass Sie
nur eine Listenansicht haben. Und innerhalb von ListView kann
V verschiedene,
verschiedene Optionen haben. Zuerst
zeige ich Ihnen nur Listenstil mit einer Navigationsoption. In diesem Titan. Ich werde den Text
des zweiten Bildschirms haben. Und beim Tippen werde ich vorerst
nichts tun,
aber ich werde nur speichern
und zeigen Ihnen
unsere erste Navigationsoption
, die auf aber ich werde nur speichern
und zeigen Ihnen unsere erste Navigationsoption den zweiten
Bildschirm geht, den Sie
sehen können , sind nur Beispiel Home
Kontakt Über uns Kategorien, was immer du willst,
es liegt an dir. Wenn Sie sich also erinnern,
unseren Header haben, wenn
Sie sich an Google Mail-Labor erinnern, gibt es in der Kopfzeile einige Kontodetails wie einen
Benutzernamengewinn zur Steigerung. Sie können das
mit Benutzerkonto, Benutzerkonto, unseren Header zeichnen. Dann erwähnte einfach
diese Dinge. Der Kontoname sollte
Elon Musk lauten, Konto, E-Mail kann Tesla und dass es ist.com. Es ist sehr selten, dass Sie
niemals eine
Gmail-Konto-Ähnlichkeit verwenden werden. Die dritte, die wir haben können. Also Girobilanzbild, ich werde einen kreisförmigen Avatar verwenden. Und darin kannst du ein Netzwerk-Image
haben, aber ich benutze einfach ein Icon. Mal sehen, was ist die Ausgabe. Aber wenn Sie gerade eine
Gmail-App bei sich haben, haben Sie einfach Gmail angehängt und anzeigen. Sehen Sie diese Seitennavigation
davon als Flosse. Sie können vergleichen und sehen. Wir haben dieses
Profilbild, den Benutzernamen und die Benutzer-E-Mail mit diesem
schönen Hintergrund. Sie können auch andere
Dinge ändern. Aber im Moment ist es
besser, es einfach zu halten. Weil das Flattern sehr
groß ist und
es viele
Eigenschaftsargumente geben wird . Wenn Sie sehen möchten, gehe
ich einfach hierher
und sage Pfeilfarbe, Tastenrand bei gedrückten Details. Dies sind andere Optionen darin. Führende KI gibt
mir ein Icon zum Anschauen. Jetzt sieht es so aus.
Angenommen, das ist das Zuhause. Ich kopiere und gebe ein anderes Deck als einfach schreibe. Sieh. Mit dieser Seitennavigation sieht
es also richtig gut aus. Ich überspringe einfach
noch ein Homepages. Nun, zu Hause und
schreib einfach wem hier. Du siehst diese Schublade. Jetzt sieht es vor allem
wegen dieses Headers sehr professionell aus. Es sieht immer noch großartig aus. Und wie gesagt, es gibt auch
etwas, das als
Schubladenkopf bezeichnet wird
, den Sie selbst ausprobieren können, wenn Sie möchten. Und nun nehmen wir an, das ist nicht
ListView, sondern die Spalte, sagen
wir, es ändert sich
irgendetwas. Sag nein, nichts hat sich geändert. Aber denken Sie daran, wenn Sie viele Daten
haben, die noch hier sind und sie nicht scrollbar
sind, wenn Sie eine Spalte verwenden. Listen Sie also auf, dass wir es verwenden, wenn Sie auch viele andere Optionen
haben . Spalte funktioniert einwandfrei. Auch. Jetzt lasst uns gehen und navigieren. Zum Startbildschirm. Ich
beziehe mich, navigiere, drücke. Dan auf der Strecke. Wir werden einen Page Builder haben. Kontext. Der Name ist der Startbildschirm. Okay. Lass uns nachsehen. Navigieren wir
zum Startbildschirm? Siehst du, wir sind auf dem Startbildschirm. Jetzt. Sie müssen
aufpassen und verstehen, was passiert, wenn wir
auf die Schaltfläche Zurück klicken. Wenn wir auf
die Schaltfläche Zurück klicken, ist
diese Zeichnung immer noch geöffnet, sieht
aber nicht gut aus. Es sollte so geschlossen sein. Weit das, bevor man
durchschiebt, muss man knallen. Wir müssen schreiben, nach oben
navigieren, um die Schublade zu schließen und dann zum zweiten Bildschirm zu
wechseln. Starte deine App. Wenn ich jetzt nach Hause gehe, navigieren
wir zu diesem Startbildschirm, aber nicht in dieser Zeit, wenn
ich auf die Zurück-Schaltfläche klicke, kommt
es richtig auf den
Startbildschirm und nicht diese Zeichnung hängen, weil wir bereits geschlossen es mit dem Navigator Dot Pop. Dieses Ding
müssen Sie sich also merken denn wenn wir eine
vollständige Anwendung haben, möchten
Sie nichts was nicht
in den Benutzer eingefügt wird. Der Benutzer wird genervt oder so, wir müssen es vermeiden. also darauf, dass du diese Dinge zur
Kenntnis
nimmst , denn du solltest es
definitiv
später nach einem Monat vergessen. Das war's. Das ist alles weit
unten und zeichne eine Portion. In diesem nächsten Video werden wir über die untere Navigation
sprechen. Danke.
25. Untere Bottom: Heute werden wir
über die untere Navigationsleiste sprechen. Ich überlasse es, wenn wir besprochen
haben, was
eine Schublade ist und wie
man sie umsetzt. Dies ist also eine weitere
sehr oft Navigation. Und dieses Widget wird in
den meisten Anwendungen verwendet. Denn stell dir vor,
dass dies
der Bildschirm ist und in diesem Bereich, der keine Unterseite ist, gibt es einige
Optionen, die kacheln, gibt es einige
Optionen, die kacheln,
nämlich Heimkontakt
oder Chats oder was auch immer. Wenn wir darauf klicken, wird die Sauberkeit geändert. Das ist also ein sehr cooles Widget, das vom
Florida-Framework gegeben wurde. Und
das können wir ganz einfach dem Gerüst hinzufügen. Wie in dieser Schublade auch. Es gibt einen Parameter
im Gerüst. Probieren wir es also alleine aus. Und wenn Sie eine
Syntax in diesem Gerüst sehen, gibt es diese untere
Navigationsleiste, die eine untere
Navigationsleiste akzeptiert, starr, die ein Paar hat. Der erste Parameter
ist der aktuelle Index. Das heißt, welcher Bildschirm ist
in diesem Moment VR. Und das zweite ist Items. Was diese Elemente das sind,
das ist das Symbol oder
es kann speichern, was wir, wir
navigieren werden. Das heißt, sind es Home-Chats, was wir in der Benutzeroberfläche erwähnen
wollen? Und der dritte ist auf dem Fass. Das sollte
passieren, wenn jemand auf diese Navigationsoption
tippt. Normalerweise müssen wir diesen Bildschirm
ändern. Und hier im Notizbereich können
Sie sehen, dass es
mehr als ein unteres
Navigationsleistenelement
geben sollte mehr als ein unteres
Navigationsleistenelement , damit es funktioniert. Offensichtlich, wenn die
anderen mehrere Elemente dann nur die Navigation sündigen. Warum
benutzt jemand für eine Option eine untere Navigationsleiste? Es nützt nichts. Hier im Bild siehst du also
wovon ich spreche. Das ist es, was wir
gerade bauen werden. Bringen Sie Ihren VS-Code heraus. Und jetzt, Okay, haben wir nicht. Dies ist der Fehler wegen
der booleschen Sache. Nicht viel. Da Sie bereits erwähnt
haben, brauchen wir dort einen
booleschen Wert. Kommentar, Toasten. Und so wird das Gerüst die untere Navigationsleiste
verwenden. Und ein Widget-Name ist die
untere Navigation, aber jetzt hat er Elemente. Aktueller Index für
momentan sagen wir nur 0 Items. Ich werde eine Negationsleiste haben. Ich weiß nicht, wie irgendein Icon geben
soll. Das sollte ich sein. Wir werden etikettiert verwenden, weil das Ideal abgeschrieben wird
und das Label String akzeptiert. Direkt nach Hause. In ähnlicher Weise, Tage und
fügen Sie es zweimal ein, sagen Sie können und werden einfach hier enden. Und wenn man vermutet, du
könntest Albtraum geben, halte
ich es einfach. Und wir sagen einfach, okay. Und das nächste ist dran. Was gibt, was eine Funktion ist
, die uns einen Index gibt. Ich werde
den Index vorerst einfach ausdrucken und mal sehen, was getan
wurde. Siehe Verwendung von Heimkontakten. Es sieht so gut aus. Wenn ich auf
Kontakt klicke, ist der Index 1. Wenn ich auf
Benutzer klicke, ist der Index zwei. Wenn ich auf OK klicke.
Whoa, Index ist 0. Davon spreche
ich also. Mit diesem Index. Jetzt werden wir die Änderungen vornehmen, damit
er, wenn
jemand auf Kontakt klickt ,
zur Kontaktseite gehen sollte. Oder Sie können hier sagen, dass die
Kontaktseite erstellt wird. Nicht, wir
navigieren nicht direkt, aber hier nur in diesem Bildschirm werden wir
nur Alda-Seiten sehen. Was müssen wir jetzt tun. Wir haben zweite Milz. Wir haben einen Vollbildmodus. Dein Bildschirm. Sie gehen einfach auf den Bildschirm
und haben ganz oben
weniger eine ganze Zahl, die 0 ist. Zweitens sollte eine Liste von Seiten sein. Hier. Was sollte nicht passieren? Wir sollten alle Seiten schreiben
, die wir brauchen. Also sollte zuerst davon ausgegangen
werden , dass der Bildschirm ein Kontakt ist. Und drittens ist dieser, der mein Status im Vollbildmodus
ist. Mein Bundesstaat im Vollbildmodus. Okay. Wir haben alle Seiten hier. Jetzt enden Sie einfach am Körper. Hier in der Leiche. Ich entferne alles
und schreibe Seiten. Dann steht der Index
ganz am Anfang, er ist immer noch. Aber wenn jemand auf
irgendetwas klickt, sollte es sich ändern. Das ist Staat, der
Staat sollte sich ändern. Und dafür müssen wir
es zu einer staatlichen Vollvision machen. Jetzt ist es ein stateful Widget. Wenn jemand auf diese
bestimmte Navigation tippt, sagte ein Status von Index 2, diesen Index, den wir
erhalten die d 0, 1, 2, 3. Also denkst du vielleicht darüber nach, warum? Was ist das Bedürfnis? Ich erkläre es dir noch einmal. Wir haben eine Liste von Seiten, eine Position im Homeschooling, dann eine Position
Kontexte sauber und um meinen stateful Bildschirm zu positionieren. Und wir haben eine Variable
namens index, die mit 0 initialisiert wird. Ganz am Anfang wird also immer der
Startbildschirm angezeigt wenn jemand
unsere Anwendung startet. Weil
wir in diesem Körper diese Seiten haben
und der Index 0 ist. Wenn jemand klickt
, tippen Sie auf
eines dieser unteren
Navigationsleistenelemente. Ob es sich um einen schwachen
Kontakt
handelt oder was auch immer, der Index wird es
nehmen. Und dieser Bildschirm wird angezeigt. Bringen Sie den Emulator heraus und
sehen Sie, dass wir diesen Kontakt haben. Wir haben dieses Zuhause und wir haben diese Benutzer. Also welches Homeschooling stattdessen? Das sind die Häuser in Sibelius. Wechseln Sie den Bildschirm und
den Bildschirm so. Jetzt
ist der Startbildschirm richtig. Und Benutzer, wir haben die ganze Liste. Jetzt möchte ich
2 dieses App-Teils nicht mehr machen. Also was ich tun kann
, kann ich
die AB-Leiste vom Bildschirm entfernen , das ist der erste Bildschirm. Bringen wir unsere App noch einmal mit. Sag, es sieht viel besser aus. Jetzt, wenn ich an der
Bar wechsle, wird es geändert. Aber es
sieht sehr gut aus. Vielleicht denken Sie auch darüber nach,
warum sich diese Farbe nicht ändert, da wir diesen Index hier nicht
erwähnt haben. Wir haben gerade 0 gelesen. Aber hier müssen
wir
diesen variablen Index schreiben. Und dann versuche es noch einmal. Nun, dieses blaue Ding, blaue Farbe wird
auf was auch immer wir klicken angezeigt.
Sehen Sie jetzt, der Kontakt ist blau. Wenn wir nun auf die
Benutzer klicken, wird dies hervorgehoben. Es sieht sehr gut aus. Jetzt haben wir zumindest eine sehr
einfache Benutzeroberfläche. Wir haben gelernt, wie
diese Zeichnung funktioniert, wie die untere Navigation funktioniert wie man von
einem Bildschirm zum anderen navigiert. In diesem Modul
haben wir also viel gelernt. Im nächsten Modul werden wir weitere Konzepte
von Flutter Framework
besprechen. Üben Sie bis dahin einfach und stellen Sie sicher, dass Sie den
ganzen Code von Herzen verstehen. Danke.
26. Tief in TextField Widget: In diesem Modul werden wir über die
TextFile Virgin
sprechen. V wird
sehr tief in
dieses Widget einsteigen , da es
das einzige Widget ist , mit dem
wir
intensiv für die
Handhabung von Benutzereingaben verwendet werden . In jeder Anwendung. Das muss es tun. Wir müssen etwas eingeben,
ob es sich um den Benutzernamen, Passwort handelt, was ihnen gefällt, was sie nicht mögen, egal in welchem Alter. Textfield ist also eine sehr
wichtige Region. Was ist also ein Textfeld? Ich glaube, wir haben
bereits diskutiert. Texte, die in Florida ausgefüllt werden, ist das am häufigsten
verwendete Widget, dem Benutzer Eingaben
von der Tastatur in eine App sammeln können. Dies ist also ein
Code-Snippet, das die Syntax dafür darstellt, wie
ein Textfeld angezeigt wird. Es hat wie immer einige
Eigenschaften,
Dekoration, Bordüre
und vieles mehr. Also um loszulegen. Und was ich gerne machen möchte,
ist, dass ich
die vorherigen Bildschirme entfernen möchte , weil ich derzeit
nicht so viele
Bildschirme haben möchte. Wenn du nicht willst, kannst
du
sie einfach so lassen, wie es ist. Aber da es ein neues Modul ist, würde
ich einfach alles
entfernen. Wir haben diese Hauptakte. Ich erstelle eine
neue Datei außerhalb der Seite, Punkt, Punkt. Wie immer. Ich werde nur dieses Datum erstellen, das
weniger starr der Homepage ist. Und wir werden diesen Startbildschirm haben. Fangen wir mit diesem Gerüst an. Benutzen Sie die Eingabe. Und in der Partei wird
einen Spalten-Assistent v haben , dessen
Hauptzellenausrichtung vorhanden ist. Die Ausrichtung wird in der Mitte sein. Und Kinder. Jetzt in diesen Kindern werde
ich dieses Textfeld haben. Denn mit dieser
Deklarationseigenschaft können
wir etwas Dekoration geben, z. B. was zu tun ist, worum es bei dieser TextFile geht. Mit diesem Ebenentext. Du solltest seinen Namen schreiben. Und Border. Ich möchte die Grenze
skizzieren. Lassen Sie uns unsere Anwendung neu laden
und die Ausgabe speichern. Um diese Ausgabe zu überprüfen. Es ist ein einfacher Bildschirm. Wir haben den Text unten ausgefüllt. Auch. Ich möchte diese
Spalte mit einem Polster-Widget umschließen
, damit wir
rundum etwas Abstand haben und es jetzt
etwas anständig aussieht. Darüber hinaus können Sie, wenn
Sie möchten, zwei der APA gesendet haben. Stellen Sie sicher, dass Sie sich diese
Eigenschaften merken, indem Sie üben. Deshalb würde ich Ihnen
vorschlagen, jedes
Mal selbst
Bildschirme zu schreiben , damit
Sie am Ende
des Kurses den ganzen Code lernen. Denken Sie also an all diese
Codes auswendig, und Sie müssen es nicht immer wieder
überprüfen. Jetzt haben wir diese
Texte Schadensersatz ausgefüllt. Aber wir sollten wissen, wie den Wert
aus diesem Text abrufen können. Wenn ich jetzt schreibe, sollte es definitiv Code
geben, um den
Wert aus dem Textfeld abzurufen
, den wir
im nächsten Video besprechen werden. Danke.
27. Ein TextEditing hinzufügen: Heute lernen wir, wie man den Wert
eines Textfeldes
abruft. Wir haben diesen Text bereits. Aber zumindest sollten wir
wissen, wie man w bekommt, unabhängig von den Benutzertypen. Dafür verwenden wir
die Controller-Methode. Was sind die Schritte? Der erste Schritt besteht darin,
einen
Textbearbeitungs-Controller wie diesen zu erstellen . Hier sehen Sie, dass wir eine
Textbearbeitung haben kann Typ sammeln. Dann bedeutet der Controller
, dass dies der Variablenname ist, der
dem
Textbearbeitungs-Controller entspricht. Hängen Sie nun diesen
Textbearbeitungs-Controller an das Textfeld an. In diesem Textfeld ist der Bereich
definitiv eine
Eigenschaft namens Controller, die der Wert dunkler Controller-Name
sein sollte. Nun wird der dritte den
Wert des Textfeldes abgerufen,
indem die vom
Textbearbeitungs-Controller bereitgestellte Punkttext-Methode verwendet wird. Hier können Sie also sehen, dass dies W ausgeben
wird, dh wenn wir den Namen des
Textbearbeitungscontrollers schreiben, dann dot txt, wird der Zeichenfolgenwert
ausgegeben. Ich hoffe also, Sie haben
die Schritte verstanden, mit denen Sie einen Kilometer langen
Schritt alleine machen. Hier definiere
ich zunächst diesen
Textbearbeitungs-Controller und nenne ihn „Controller“, dem
Textbearbeitungs-Controller entspricht. Okay? Der erste Schritt ist erledigt, nämlich der erstellte txt
und endende Controller. Zweitens ist der dunkle
Controller-28-Text-Film. Wir haben dieses Textfeld hier. Mal sehen, hat es eine
Eigenschaft namens Controller? Hier? Dies ist der Name, Eigenschaftsnamen-Controller, der einen
Controller-Wert für die Textbearbeitung
akzeptiert. Und unser Lernen
heißt „kontrolliere sie“. Okay? Dieser dritte Schritt ist der Wert des
Textfeldes unter Verwendung des Punktes txt. Nun, das lasst uns zuerst
unter dem Text wann wir eine erhöhte Schaltfläche haben
und eine Datumsschaltfläche hinterlassen sollten. Und in diesem Kind schreibe
ich einfach Druck. Und erhöht. Ich drucke. Wie lautet der Name
des Controllers? Namencontroller und Dot txt. Okay. Lasst uns
im Namen neu starten . Ich meine, richtig. Jeff Bezos. Und klicken Sie einfach auf Drucken und
sehen Sie in der Debug-Konsole, Sie können alles, was
ich habe, in das Textfeld einfügen. Auch. Wenn Sie
es auf dem Bildschirm anzeigen möchten. Zehn einfach können wir diese
Homepage zu einem stateful Widget machen. Und dieser Namenskontroller. Wir können es irgendwo hier haben. Über diesem Text
wird einfach
der Name
Controller-Punkttext Stil x geschrieben der Name
Controller-Punkttext Stil x und hat eine Schriftgröße
von Schriftgewicht, Schriftart, Gewicht, Fett und Lays Punkt. Was ist gut. Und ähnlich wie das OK. Und jetzt
haben wir nur diese Tests. Das war's. Probieren wir es aus. Funktioniert es oder nicht? Wenn ich jetzt
Elon Musk schreibe und auf Print C klicke, können
wir alles ausgeben, was wir
diesmal in die Benutzeroberfläche
geschrieben haben , nicht in der Debug-Konsole, da
wir den set-Status verwenden. Ich möchte nur, dass du immer wieder
praktizierst
und wegen
dieses gesetzten Unglaubens des Staates
verstehst und Chen wieder aufgerufen wurde. Und jetzt hat dieser Text
diesen Wert von Elon Musk. Eine andere Möglichkeit besteht darin, den Wert
abzurufen besteht darin, dass wir eine
Variable namens string zulassen können, name ist gleich mt. Angenommen. Und in diesem Textfeld
können wir einfach auf geändert schreiben. Und hier bekommen wir den Wert. Und dieser Wert, das, wie lautet der Name? String ist der Name
sollte „nahm“ genannt werden, während
du, das war's. Und wir können auch getestet senden. Wir können das einfach sagen. Und hier sollte der Text einfach
eine Namensvariable sein. Dies ist eine andere
Möglichkeit,
den Wert bei Änderungen aus dem
Textfeld abzurufen . Aber die meiste Zeit verwenden die
Leute den
Textbearbeitungs-Controller anstelle dieses unverändert. Aber es ist nicht so, dass
du es nicht benutzen kannst. Ich schreibe einfach
einen Namen wie wer war. Es ist sehr gut. Niemand kommt mir in den Sinn, einfach Bill Gates
anwesend ist. Aber sehen Sie, wenn ich tippe, aktualisiert
es die Benutzeroberfläche,
denn in der Kette ist wie immer, wenn wir
auf eine Tastatur, ein Alphabet oder
wann immer es geändert wird, der gesamte Bildschirm neu aufgebaut
wird. Das war's. Dies sind also die beiden Möglichkeiten
, um Wert abzurufen. Die meiste Zeit wird der
Textbearbeitungs-Controller
unverändert sein und unsere anderen Optionssensoren
wie die Bearbeitung des Landes, bei der Übermittlung
abgeschlossen werden. Dies sind auch andere
Möglichkeiten, W. zu erhalten Wenn Sie mehr lesen möchten, können
Sie auch suchen. Aber ich habe Ihnen
am meisten beigebracht, am meisten die Anwendung zu
verwenden oder den Wert am meisten aus dem Textfeld
abzurufen. Danke.
28. Validierung von Benutzereingaben: In dieser Sitzung
werden wir darüber sprechen, wie die Eingabe eines Benutzers validiert werden kann. Zuvor müssen Sie jedoch ein neues Widget
verstehen, das als Formular-Widget
bezeichnet wird. Einbeziehen eines Formulars Virgin in Ihre App
erleichtert es einfach, einen Reset zu validieren und
mehrere Eingabefelder gleichzeitig zu speichern. Und denken Sie daran, dass wir
das Widget-Text-Formularfeld
innerhalb des Formulars anstelle
von Texten wirklich verwenden das Widget-Text-Formularfeld . Also sind wir hier, wir
verwenden Text Will. Aber da werden wir das
Formular von nun an voll nutzen. Also müssen wir das mit ihm ausgefüllte
Textform verwenden. Was wir also tun müssen, werden
wir einfach zuerst, ich möchte
diesen Namen und OnChange entfernen. Damit das
Formular-Widget funktioniert, wird diese Spalte
einfach
mit dem Budget umbrochen. Okay? Dieser Teil ist jetzt fertig. Und dieses Textfeld sollte das ausgefüllte Textformular
lesen. Dies ist auch erledigt. Jetzt
ist der nächste Teil die Formularvalidierung. Wenn Sie also
eine Anwendung erstellen, wenn
Sie
eine Eingabe vom Benutzer erhalten, ist
es sehr notwendig dass Sie
die Eingabe
überprüfen müssen? Angenommen, Sie haben ein
Passwort, das
mindestens acht Zeichen lang sein sollte
und der Benutzer
nur vier Zeichen eingibt,
sollten wir ihm nicht erlauben, dass mindestens acht Zeichen lang und der Benutzer
nur vier Zeichen eingibt, sollten wir ihm nicht erlauben eine Telefonnummer
mindestens 10 Ziffern haben sollte. Es kann nicht einfach
neun Ziffern auswählen und unserer Anwendung eine gefälschte Nummer
geben. Um sicherzustellen, dass diese Adder
nie bei uns passiert sind, werden
wir sehr starke Regeln für die
Formularvalidierung haben. Um eine
Farm im Flattern zu validieren, müssen
wir
hauptsächlich drei Schritte umsetzen. Schritt eins wird als Formular-Widget verwendet. Wir nehmen globalen Schlüssel. Was ist dieser globale Schlüssel? Denken Sie einfach daran, dass es
eine Art Staat ist, den wir kombinieren
werden, oder Sie können sagen
, dass wir der
Farm geben werden, damit wir später
wissen wie der
Status des Unternehmens ist, dass Validierungen funktionieren
richtig oder nicht dafür. Es ist also nur eine Syntax, an die
wir uns erinnern müssen. Es ist nicht sehr kompliziert. Ich gebe ihm einfach den
Variablennamen des
Fremdschlüssels und setze ihn auf blau sperrig. Und dann hier, bilden Sie den Status. Dies ist die Syntax, einen globalen
Statusschlüssel
zuzuweisen und ihn einfach zu kopieren. Und im Farmfeld haben
Sie diese Eigenschaft namens key und
fügen Sie sie einfach hier ein. Auf diese Weise können Sie
sicherstellen, dass Lou sperrig und
Ihr Telefon verbunden ist. Jetzt ist der erste Schritt erledigt. Zweitens ist die Verwendung von Texten aus , die die
mit validator-Eigenschaft gefüllte Eingabe nicht geben
konnten. Es gibt also diese
Milliliter-Eigenschaft , die wir verwenden müssen. Okay, das machen wir. Und der dritte Schritt
wird von 10 erstellt, um das Farmfeld zu validieren und den Validierungsfehler
anzuzeigen. Okay, wir
machen zuerst den Schritt 2, dem dem Textform eine
Gültigkeitsregeln zugewiesen wird. Moment müssen wir
die
Validator-Funktion in diesem Text verwenden die
Validator-Funktion in diesem Text unterhaltsam ausgefüllt
ist, um
die Eingabeeigenschaften zu überprüfen , die der Benutzer
die falsche Eingabe gibt. Die Validator-Funktion gibt
eine Zeichenfolge zurück , die
eine Fehlermeldung enthält. Andernfalls gibt die Gültigkeit
der Funktion null zurück. Gehen wir zum Textformularfeld. Hier. Ich werde einfach diese
Validator-Eigenschaft haben, die ein feiner Shen Dao-Wert ist, was auch immer eingegeben wird. Hier überprüfe ich einfach,
ob die Warteschlange leer ist. Oder man kann sagen, ob der
Wert gleich ist. Jetzt so. Jetzt können Sie die
leere Zeichenfolge so sehen. Dann gewinne ich. Das Drehfeld ist erforderlich, andernfalls
geben Sie null zurück. Also okay, und dann bestand
das nächste Gesetz des Berührungsschritts darin, den Button zu erstellen
, den wir bereits
gemacht haben , der ihn validiert. Formular ausgefüllt. Hier ist
dies der Code, an den Sie
sich erinnern, aber jetzt ist es an der Zeit, den Fremdschlüssel zu
verwenden. Ich schreibe einfach
Qi Dot State Dot Validate. Das aktuelle Datumspunkt-Validieren
ist gleich true. Man kann sagen: Ja, ich werde einfach schreiben, drucken. Reichen Sie 10 Geschlechter ein,
denn Li k ist ausgestorben. Zuerst Stefan. Und ich werde
auch nicht drucken. Es sieht professionell aus. Innerhalb einer leeren Zeichenfolge. Wenn ich auf Absenden klicke, siehe Phil ist erforderlich. Das ist also die Validierung, über die
ich gesprochen habe. Dies ist sehr wichtig denn wenn Sie
ein Anmelde- oder Anmeldeformular haben, müssen
Sie dem
Benutzer diese Fehlermeldungen definitiv als Feedback anzeigen , da
der Benutzer nicht einfach auf seinem
Bildschirm bleiben
möchte und tu nichts. Und wenn ich, wenn ich geflirtet schreibe
und dann Submit ausdrucke, dann können Sie Firmen sehen
, die wir erfolgreich gemacht haben. Also ja, so
validierst du das Formularfeld. Sie können auch mehrere
Formularfelder haben. Ich zeige dir nur noch
ein Formular ausfüllen. Schreiben Sie einfach Namen und Passwort und Passwort oder
ist es eine erworbene Bestellung? Nein, ich würde ihm einfach eine Länge geben. Wert Punktlänge
weniger als drei. Wenn der Wert die Punktlänge
weniger als 3 ist und wir erhalten das Passwort sollte
mehr als drei sein. Direktoren. Jetzt habe ich ein neues x-Formular frei, aber dieser Fremdschlüssel, diese Schriftart reicht aus,
um sowohl dieses Textfeld als auch
für
das zweite Textfeld zu validieren , müssen
wir einen anderen
Textbearbeitungs-Controller erstellen, welches wird
Passwort-Controller genannt. Ich kopiere es einfach
und füge es hier ein. Wenn ich nun den Namen geflirtet schreibe, aber das Passwort
gebe ich nur 12 Zeichen, dann sollte das Passwort
mehr als drei Zeichen lang sein. Wenn ich nun
vier Zeichen habe und auf „
Absenden“ klicke , wurde das Formular
erfolgreich eingereicht. Auf diese Weise validieren Sie mehrere Felder gleichzeitig
mit dem Formularschlüssel. Und das heißt,
wir verwenden dieses Widget, um Formularfelder zu validieren, oder
Sie können Textfelder sagen. Nun, ein anderes Konzept,
das Sie mit RE kennen sollten, das für
Sie nützlich sein könnte, ist die Rettung eines Unternehmens. Beim Erstellen einer App
möchten wir wahrscheinlich die Formulardaten speichern
, um etwas damit zu tun. In diesem Set erstellen wir nur einige Speicherregeln
für andere Felder. Und wenn wir dann
den Ancef mein Vater nennen, wird
es
diese drei Regeln ausführen. Was ich damit meine, ist
in diesem Textfeld, abgesehen vom Validator
haben wir tote eigene auf gespeichert. Und ich
drucke einfach hier aus. Ich drucke einfach einen Namen aus. Das Feld wird gespeichert. Und in ihrer Gültigkeit ist das
isoliert beim Speichern und Drucken. Das Passwortfeld wird gespeichert. Und um sicherzustellen, dass dieser Code oder
diese Funktion ausgeführt wird, schreiben
wir einfach den Fremdschlüssel, aktuellen Status Punkt speichern. Das war's. Also brauchst du es vielleicht irgendwo. Es liegt an dir. Aber zumindest sollte man wissen , dass diese Konzepte auch dort sind. Wenn wir in die
App gehen und grau gefärbt sind, gehe
ich 2345.
Und klicken Sie auf Absenden. Siehe nymphal dasselbe
Passwort für Listen speichern und dann erfolgreich
übermittelte Formulare. Also hier haben wir gerade die Bewertung
ausdrucken, aber es kann verwendet werden, um
dem Wert zwei Variablen zuzuweisen, r und einige Netzwerkaufrufe
für das, was sie waren SET, tut Status oder was auch immer
Sie wollen, es liegt an Ihnen. Aber jede Eigenschaft oder jede Methode wird
für einen bestimmten Zweck verwendet. Und jetzt liegt es an einem Entwickler was er will und
was er nicht will. Aber ich hoffe, Sie haben
verstanden, wie Sie
ein Formularfeld validieren und
sicherstellen , dass der Benutzer nicht
eingibt, was er will. In der nächsten Sitzung werden
wir mehr über
dieses Textfeld und
seine Eigenschaften sprechen . Aber bis dahin hoffe ich, dass es
dir gefällt.
29. Dekoration und andere Eigenschaften: Bis jetzt haben wir
gelernt, Funktionen von Textfeldern zu verwenden, wie man validiert, wie
man speichert und was auch immer. Aber jetzt werden wir
es auch gut aussehen lassen. Zum Dekorieren wird die Texte also die Deklarationseigenschaft
wiederverwendet, die eine
Eingabedekoration als Wert annimmt. Probieren wir es aus. Also haben wir dieses Textfeld
außerhalb des Namens. Hier. Wir haben bereits diese
Deklarationseigenschaft , die die
Eingabedekoration ihren Wert akzeptiert. Jetzt ist also zuerst Text gekennzeichnet, dem wir dem Benutzer
Informationen gegeben haben. Jetzt muss ich das
einfach entfernen. Und der zweite ist der Hinweistext. Es heißt also eine Lösung. Also schreibe ich einfach deinen Namen. Okay, mal sehen. Sie können sehen, dass Sie zuerst die Hinweise- und
Ebeneneigenschaften
verwenden , um dem Benutzer
Informationen zu geben. Wenn ich jetzt auf den Namen klicke,
siehst du, dass es
diese zusätzliche Sache gibt. Das stimmt, dein vollständiger Name. Also und wenn wir
etwas schreiben, wird es entfernt. Und wenn es leer ist, wird
es wieder angezeigt. Zweitens können Sie
Symbole hinzufügen, indem ich Präfix verwenden kann, ich kann Suffix hinzufügen, ich kann Eigenschaften
der Eingabedekoration hinzufügen. Was ich damit meine, ist in
der Eingabedeklaration, zuerst zeige ich es Ihnen. Das kann ich. Ich kann, ich kann anfangen. Jetzt. Okay. Sieh es dir an. Siehst du, du hast dieses Icon hier. Wenn ich jetzt ein Präfix eine Dose sage, Es ist das
Gleiche auf Linden Lu grenzt, wird verlängert. Es kommt innerhalb der Grenze. Wenn wir Präfix
und Suffix schreiben , kann ich es. Wir haben dieses Icon auf
der rechten Seite. Also nur das ist der
Unterschied. Nicht viel. Aber es gibt endlich, dieses Icon gibt es eine ganze
Menge effizient und sieht aus, ich mag dieses Präfix, also lasse ich es einfach
mit dem Präfix, das ich kann. Okay. Die nächste. Sie können auch Pulver
für produktives Hinzufügen geben darüber
mit einem Textfeld
entfernen. Also im Moment, wenn wir keine schöne Immobilie
schreiben oder geben, dann unten sind die unten getauschten Tage standardmäßig
bereits Tage, Sie können das auch entfernen. Um das zu entfernen, müssen
wir einfach Input
schreiben, Burger und speichern. Und sehen Sie, dass unter der Grenze liegt. Aber wenn du wie ich bist
, mag ich die ganze Grenze. Unser Plan-Eingabeparameter
ist also der Wert, den
wir
ihm zuweisen müssen , damit er
von allen Seiten eine Grenze hat. Und es sieht sehr nett aus. Und ich
möchte auch etwas
Abstand zwischen Texten geben, dafür passendes Textform
ausfüllen. Ich werde psi Squawks genannt. Es gibt nur Geschenke und gib ihm eine Höhe von 20. Damit es diesen Abstand zwischen den
beiden Texten gibt, Farmfeldern. Jetzt ist die dritte
Deklaration, die wir
verwenden können , Helfertexte verwenden. Wenn Sie kein Label möchten, aber eine persistierende
Nachricht für den Benutzer möchten. Was ich damit meine, ist in diesem
Passwort-Textformular ausgefüllt, ich werde einfach
den Helfertext
und das Passwort haben sollten. Boss, mehr als drei. Okay. Okay. Sie haben beschriftete Texte gesehen, Sie haben ihm Texte gesehen. Mal sehen, was sind
die Helfertexte. Und sieh hier, es ist immer da. Wenn ich auf das Passwort klicke, wird es auch hier angezeigt,
dass es nicht entfernt wird. Es ist also gut,
sicherzustellen, dass der Benutzer keinen Fehler da er möglicherweise nicht weiß,
dass Ihre Anwendung, außer das Passwort auf rechtlich und dann drei Zeichen
in diesem Fall enthalten ist. Die Texteigenschaft ist sehr praktisch. Jetzt. Und als nächstes können Sie Tastatureigenschaften auch
für TextField
ändern. heißt, die Typen
sind Eingabetexte, Eingabetyp, Text, das
ist normale Tastatur, dann Texteingabeart Punktnummer, numerische E-Mail-Adresse,
normale Tastatur,
wir tendieren zum Ratenszeichen, Datum, Uhrzeit, dann mehrzeilig. Beispiel dafür ist, dass ich einen Namen habe,
nehme an, dann nenne ich. Und denken Sie daran, dass dieser Tastaturtyp Eigenschaften außerhalb der
Eingabedeklaration
ist. Und es gibt einen Tastaturtyp,
Text, eine
Punktnummer des Eingabetyps, und das war's. Und ich sage, und wenn ich jetzt auf Name klicke, erscheint diese numerische
Tastatur. Dies wird also verwendet, wenn
Sie nach
Alter fragen oder
hauptsächlich die Telefonnummer speichern können. Dafür müssen Sie
diese Tastaturtechnik verwenden. Was bedeutet
dieser verdunkelnde Text, in dem Text ausgeblendet
werden soll , wenn TextField die
Rocktexteigenschaft auf true einstellt, verwenden
wir sie hauptsächlich in
einem Passwortfeld. Also auf jeden Fall wissen Sie, wann der Benutzer ist und
während seines Passworts, möchten
wir nicht, dass es sich
in den normalen Alphabeten befindet. Wir wollen es verstecken. Wechseln Sie dazu einfach in das Textformularfeld außerhalb
der Eingabedeklaration, oder? Verdunkelte Texte und ich habe
gerade gezeichnet. Und rette es. Wenn Sie nun mit dem Bus mit
Flüssigkeit gefüllt sind und f eingeben,
l, sind Sie die Notaufnahme. Sie können also sehen, dass das
Passwort versteckt ist, es punktet nur und nicht
das richtige Alphabet. Es ist also bewährte da der Benutzer auch das
ausfüllt, dass diese Anwendung sicher zu verwenden
ist. Jetzt steuert die nächste Eigenschaft oder das nächste Feature-Textfeld das nächste Feature-Textfeld
maximale Zeichen, Codex Wilkin steuert sie, Macs Zeichenzahlen,
ein Begriff darin. Wenn Sie also intuitiv
in gewisser Länge wissen, das unsere Einschränkung? Auf die gleiche Weise? Wir können diese Einschränkung haben. Angenommen, im Namensfeld können
wir einfach die maximale Länge
von 15 schreiben , die mehr als das sagen. Der Name der Person wird sehr klar sein. Also werde ich hier einfach sagen, dass
es Alphabet numerisch ist. Aber seit du 15 gegessen hast, wenn ich versuche, sie zu überqueren Nr. Mehr als das kann
ich nicht tippen. Ich hoffe also, dass Sie
die Eigenschaften oder die
Deklaration dieses Textfeldes verstanden haben . Die gleiche Deklaration
kann im
Textformularfeld verwendet werden, wenn wir auch ein Formular-Widget
verwenden. Also das ist, ich habe geschrieben dass
Sie lernen möchten, wie
man mit Textdateien arbeitet. Im nächsten Video erfahren
wir nur
einige neue Widgets wie Alert, Dialogfenster und Snackbars. Also bis dahin übe einfach
weiter.
30. Alert Dialog Widget: In dieser Sitzung
werden wir über
die neue Version sprechen , die als Warnungsdialog bezeichnet
wird. Ein Warndialogfeld ist also eine nützliche Funktion, die den Benutzer mit
wichtigen Informationen
definiert wichtigen Informationen eine nützliche Funktion, die den Benutzer mit
wichtigen Informationen
definiert, um
eine bestimmte Aktion auszuwählen. In einfachen Worten,
wenn Sie so etwas
wie eine Popup-Warnung ausgeben möchten, muss
der Benutzer
Ja oder Nein auswählen , die diesen 10 entsprechen
, wir können ein Warndialogfeld verwenden. Was sind die wichtigsten
Eigenschaften der Box? Das sind Aktionen. Dies ist der Satz von
Aktionen, die am
unteren Rand des Dialogs
angezeigt werden . Normalerweise sind Schaltflächen, die ich bereits skizziert habe, Canson sind, ich stimme zu Diese Art von Schaltflächen ziehen dann fest
, dass ich es geliebt habe, Dialog
in einer großen Schrift und oben
im Dialog angezeigt wird der
Dialog
in einer großen Schrift und oben
im Dialog angezeigt wird einfache Worte, nehmen Sie an, sind Sie sich sicher oder
eine Warnung ist wichtig? Diese Art von Schlüsselwörtern,
dann Inhalt. Dies gibt eine Beschreibung der Nachricht über den Titel, den
Sie angegeben haben werden. Es kann also einfach so sein, ob
Sie
Ihr Konto wirklich deaktivieren
möchten , dann können Sie von den
Aktionen raten,
IM oder nein, das ist nur ein Szenario, das ist nur
ein Szenario, das sage ich. Dann einfach
Hintergrundfarbe oder Linderung. Um also eine Warnung anzuzeigen, müssen
Sie die Funktion
show dialog aufrufen, die den Kontext und
die Item-Builder-Funktion enthält. Hier können Sie also sehen, dass
Syntax Dialog zeigt, dann Kontexte, echte
Akzeptor-Kontexte und ihre Rechnung. Es gibt eine Funktion, die ein Warndialogfeld
zurückgibt. Probieren wir es also selbst aus. Im letzten Video haben wir bis hier gemacht. Jetzt ist die Validierung des Anbieters
wahr und das Formular wird gespeichert. Dann können wir einen Dialog wie Show-Dialog zeigen. Und dann wird
es in diesem Zusammenhang Kontext sein. Aber der Baumeister, lieber
Will wir funktionieren, der einen Alarmdialog zurückgibt. Okay? Im
Warndialogfeld, dieser Titeleigenschaft, werde
ich als 10 Q verwenden. Angenommen. Dann schreibe
ich in diesem Inhalt diesen Text von erfolgreich
eingereicht. Eingereicht, erfolgreich. Bei diesen Aktionen,
also Wasser, sind
die Schaltflächen, die ich bereitstellen
möchte, eine
Art Aktion, die ein Benutzer aus diesem Warndialogfeld
ausführen wird. Ich werde, tut mir leid, keine SMS schreiben. Ich hätte einen erhöhten Button , der Text schreibt. Und einfach K. Und nachdem
sie es benutzen, klicke darauf, okay, ich möchte, dass dieser Dialog
verschwindet, dieser erscheint. Normalerweise können Sie so etwas wie getan haben. Dann können Sie auch
zu einem anderen Bildschirm navigieren. Oder wenn Sie einen Abbrechen-Button haben, dann müssen Sie diese
Navigator-Punkt-Pop-Funktion dann müssen Sie diese
Navigator-Punkt-Pop-Funktion verwenden,
damit der Benutzer
dieses
Dialogfeld erneut vom Bildschirm entfernt und wieder
zum vorherigen Bildschirm zurückkehrt. Lass uns den Namen sehen. Ich schreibe Flirt
und Passwort 123456. Dann übertrage und sieh dir das an Ich habe über diese Art
von Popup mit diesem Titel gesprochen. Sie haben 10 Q und legen
den Inhalt hier fest. Und wenn ich auf
diese Schaltfläche „Okay“ klicke,
sehen Sie, dass das Dialogfeld oder das
Warnfeld verschwindet. Und abgesehen von Aktionen sind
dies die
Eigenschaften, die es akzeptiert. Es gibt Linderung,
seine Hintergrundfarbe. Wenn Sie
Hintergrundfarben schreiben, Akzent und dann
um diesen Inhalt herum auffüllen. Und sehen Sie, Sie können Stapel mit dem Titel
geben, indem Sie
eine Eule in dieser Form hinzufügen, Sie können einen abgerundeten
Rechteckrand oder
ähnliches haben Sie können einen abgerundeten
Rechteckrand oder
ähnliches haben. So können Sie runde und dann
Googler-Grenze, Randradius haben. Rand-Radius-Setup-Kühler wird 10 erhalten. Lassen Sie uns noch einmal sehen, was diese
Hintergrundfarbe und -form mit unserem
Warndialogfeld bewirkt. Da ich dann den Namen weiß, lasse ich wieder
flattern, Passwort 123456. Wenn ich jetzt auf Absenden klicke,
sehe, dass die Farbe
rot ist und die Ränder hier
sehr gut aussehen , weil
sie umgeben ist. Man kann also sagen, dass es eine Warnung
sein kann, dass
etwas schief gelaufen ist oder ähnliches.
Es liegt an dir. Und wenn Sie auch an eine
beliebige Stelle außerhalb
klicken, verschwindet auch der
Warndialog. Es ist also nicht immer notwendig. Wir können, wenn wir wollen, können
wir auch sicherstellen
, dass das nicht passiert. Aber ich schätze, dafür gibt es eine
andere Eigenschaft. Wenn Sie
mehr darüber lernen möchten, können
Sie es einfach
alleine erkunden. Aber ein grundlegendes, wir haben
jetzt gelernt, wie man einen grundlegenden
Warndialog
in unserer Flatter-Anwendung verwendet . In der nächsten Sitzung
oder im nächsten Video werden
wir auch
über ein neues Widget sprechen, nämlich die
Snackbar. Danke.
31. Snackbar anzeigen: In der früheren Sitzung sprechen
wir über den Dialog. In dieser Sitzung werden
wir also über
ein neues Widget sprechen, werden
wir also über
ein neues Widget sprechen das als Snackbar-Widget bezeichnet wird. Snackbar-Widget wird verwendet
, um kurze Nachrichten anzuzeigen. Es wird normalerweise am
unteren Bildschirmrand angezeigt. Und auch eine verdammte Nachricht wird für einen sehr
kurzen Zeitraum
angezeigt. Und Anbieter a und
anbieterspezifische Zeit ist abgeschlossen, sie wird
vom Bildschirm verschwinden. Wenn wir also
die Snackbar benutzen
, muss dieser Benutzer keine Aktion machen. Unterbrechen Sie seine App ziemlich nicht nur, aber als wir den Alarmdialog
verwendeten, gibt
es uns ein hippes Pop-up. Dieser Benutzer, egal
an welchem Bildschirm er oder sie gearbeitet hat
, wird unterbrochen. Aber Snack ist aber sehr leicht und es kommt und geht
einfach. Es wird verschickt. Es macht die
Erfahrung nicht unruhig,
bereit, unangenehm für den Benutzer. Das ist also die Syntax. Es ist eine einfache
Snackbar und dann zufrieden. Hier akzeptiert der Inhalt
eine Jungfrau als Wert, bei dem es sich normalerweise um besuchte Texte handelt. Wie zeige ich jetzt eine Snackbar an? Um Snackbar v anzuzeigen, müssen Sie diesen Code verwenden, der
Gerüstbau Messenger
Dot Off Kontext ist . Und danach können wir
dann eine Snackbar zeigen. Probieren wir es aus. Jetzt. Ich würde zuerst dieses Dialogfeld
kommentieren. Und hier zeige ich uns
Snackbar mit einfach Gerüst, Messenger Dot Off Context Dot C. Hier haben Sie eine Snackbar. Und drin
muss man nur eine Neg-Bar schreiben. Und in diesem Inhalt können
Sie ein erfolgreich eingereichtes
Formular schreiben . Okay, probieren wir es aus. Bringen Sie Ihren Emulator mit. Du nennst das Passwort 123456. Wenn ich nun auf das Absenden klicke, sehen Sie sich das Formular an, das erfolgreich eingereicht wurde, und nach zwei oder drei
Sekunden verschwindet es. Es ist also ein sehr gutes
Feedback an den Benutzer. Wenn es einen Fehler gibt. Angenommen, das Passwortfeld
oder der Benutzer existiert bereits. Diese Art von Fehlermeldungen
sind also Erfolgsmeldungen,
die über die Snackbar angezeigt
werden können . Jetzt auch abgesehen vom Inhalt. Somit hat die Snackbar auch andere
Eigenschaften. Wie Action. Angenommen, Sie können auch etwas wie
„Abbrechen“, „Abbrechen“ oder „OK“
haben. Gleich wie das Warndialogfeld. Dann hintergrundfarbe. Angenommen, ich werde
Farben hinzufügen, Punkt-Punkt, lesen, nicht lesen, da
es Erfolg sagt, dann lasse ich grün. Dann gibt es auch Rand, Polsterform, Dauer. Es ist, wenn Sie möchten, dass die
Dauer geringer ist. Also hier kannst du
Sekunden haben und ich schreibe
einfach 1 Sekunde. Jetzt versuchen wir es noch einmal. Flirten. Dann 1, 2, 3, 4, 5, 6. Und unterwirf dich. Und das C-Formular wurde
erfolgreich eingereicht. Und jetzt, da es eins
war, verschwand
es zweitens schneller
im Vergleich zum früheren. Früher war es wohl zwei
oder 3 Sekunden, eine Standardeinstellung. Jetzt liegt es an dir, wie
viele Dauer du willst. Oder auch wenn, wenn
es einen Editor gibt, können
Sie die
Hintergrundfarbe rot haben. Es ist also ein sehr gutes
Feedback an den Benutzer. Er ist nicht verwirrt warum er sich nicht
einloggen kann oder so ähnlich. Denken Sie also einfach an diesen Hals,
ist aber sehr wichtig für das Widget. Und ich denke, im Vergleich
zu einer Warnbox, lassen Sie dialog v später
häufiger
Snackbar in
unserer Anwendung verwenden . Das war's also. Für dieses Modul. Wir haben gelernt, wie man Text
verwendet, um zu erfahren,
wie man seinen Wert abruft, wie überprüft man welche Eigenschaften haben
dann die
Eigenschaften des Textfeldes? Und dann haben Andy und wir etwas über
diese beiden neuen Widgets erfahren, das ist der Warndialog
und diese Snackbar. Im nächsten Modul werden
wir also ein neues Thema beginnen. Tilden. Übe einfach weiter.
32. Futures verstehen: Hallo, willkommen im
neuen Modul, in dem wir über
uns synchrone Programmierung diskutieren werden. Wenn Sie also neu
in diesem Konzept sind, denken
Sie vielleicht darüber nach,
was synchron ist? Wenn du genau siehst? In normaler
Weise, Codes zu schreiben, werden
Codes zeilenweise
ausgeführt. Das ist von oben nach unten. Und bis eine Funktion die Ausführung
vollendet hat. Die nächste Funktion muss warten. Es wird also warten
, bis diese Codezeile ausgeführt
wird und in die zweite Zeile
geht. Bei der asynchronen Programmierung
haben wir jedoch die
Funktionen erwähnt, die
einige Zeit dauern können , bis die Fertigstellung
eingebettet ist, ohne die Ausführung
des nächsten Codestücks zu
stoppen. Auf diese Weise wird eine parallele
Ausführung von Code erreicht. Nehmen Sie einfach an, dass Sie eine Datei
in die Datenbank auf den Server hochladen . Bis dahin kann die Datei groß sein und es kann einige
Zeit dauern, bis sie ausgeführt werden kann. In Fläschchen, die Phi hochgeladen
wird, können
Sie also auch in der App
surfen oder andere
Dinge tun. Sie müssen also nicht warten, bis es 100 Prozent erreicht hat. Dies ist also ein sehr
schönes Beispiel, auch
die anderen verschiedenen
Beispiele. Also wann werden wir
es praktisch machen. Zu dieser Zeit sind Sie also, Ihre Zweifel oder
Konzepte werden
klarer und Sie werden
es richtig verstehen. Das war's. Wenn wir also über
asynchrone Programmierung
in den beiden Begriffen sprechen , die uns in den Sinn
kommen, unsere Futures und Streams. Dies sind also die zwei Arten
von uns
synchrone Programme. Du kannst es sagen. Wir werden es eins nach dem 1.
besprechen. Zuerst werden wir besprechen,
was eine Zukunft ist. Wenn Sie also Stuhl sind, ist
einfach wie er heißt. Schulden sind, dass Daten
irgendwann in Zukunft kommen werden. Stellen Sie sich vor, wir werden
nach einigen Daten aus der
Datenbank fragen und das Ergebnis wird
nach einigen Sekunden zurückgegeben. Also definitiv Austragungsort. Starte deine
Instagram-App oder Facebook. Es dauert ein oder zwei Sekunden
, um Ihren Feed zu aktualisieren. So tote Zeit, du könntest
vielleicht etwas tun, aber vielleicht nicht. Es liegt an ihnen, aber das ist ein
Beispiel für die Zukunft. Das heißt, diese Daten
werden in naher Zukunft eingebettet werden. Und es ist eine Garantie, dass etwas
vom Ende kommt. Entweder ist es eine Daten
oder es ist eine Null. Wenn es keine Daten gibt, müssen
Sie sich nur an
dieses Konzept erinnern. Das war's. Jetzt verstehen wir,
was unsere Zukunft ist, es ist Zeit. Wir werden wissen, wie man die Zukunft
definiert. Wenn Sie, Chad ist genau
wie ein funktionierendes definiert, das, aber wir verwenden nur Future
als Präfix, Präfix. Sie können als diesen
Datentyp-Rückgabetyp sehen. Wenn Sie den
Rückgabetyp der Funktion beibehalten möchten, können Sie diese
Zukunft schreiben und dann I eingeben,
dass diese Funktion eine Art
String
zurückgibt , boolean oder void. Das heißt, es
gibt nichts zurück, aber es wird etwas tun. Das heißt, jetzt wissen wir, wie, was unsere Zukunft ist, wie
man ein Feature definiert. Jetzt ist es soweit. Wir wissen
auch, wie die Zukunft in unserem Programm
nutzen können. Es gibt zwei Möglichkeiten
, eine Zukunft
mit Dan catch auszuführen und async await zu
verwenden. Zukünftige Ereignisse, die
ich normalerweise
netze, sind also Input-Output-Betrieb, von Ihrem eigenen Gerät aus. Es wird etwas speichern oder
es wird etwas abrufen. Aber hier werden wir
unsere gefälschte und Netzwerkanfrage simulieren ,
indem wir Future dot verzögert verwenden, was uns helfen wird, das Konzept zu
verstehen ohne in diesem Moment eine tatsächliche
API aufzurufen. Denn im nächsten Modul werden
wir
mit echten Daten arbeiten, die
aus einer dedizierten API stammen. Zu dieser Zeit werden
wir auch Futures verwenden. Aber um das Konzept zu
verstehen, werden
wir
in unserer Anwendung nur das Todesszenario fälschen oder simulieren. Dieser zukünftige Punkt verzögert nimmt
zwei Argumente darin. Um es auszuführen, müssen
wir zwei Argumente übergeben. Erstens ist die Dauer, die angibt, wie lange die Ausführung benötigt
wird. Und das zweite Argument ist eine Funktion, die ausgeführt
werden soll
, nachdem diese Zeitdauer
beendet ist, abgeschlossen ist. Jetzt genug mit dem
Theorie-Teil denken
Sie vielleicht, okay, ich habe
etwas verstanden , aber es
wird viele Zweifel geben. Um diese Dinge zu klären. Bringen Sie Ihren Texteditor heraus. In der Leaf-Datei
erstelle ich eine neue Datei zukünftigen Bildschirmpunkt-Punkt-Punkt. Hier. Importmaterial
haben wie immer einen statusvollen Besuch
des zukünftigen Bildschirms. Dann einfach Gerüst-App-Teil. Dann gebe ich einfach Zukunft. Okay. Jetzt im Körper, Lead Service und Fernsehen, dann Kind mit
erhöhtem Knopf. Und in diesem Text kann man einfach sagen: Klicken Sie hier. Das war's. Gehen Sie nun zum Mittelwert und machen Sie diesen zukünftigen Bildschirm zu Ihrem
Standardbildschirm , der Standardhauptdatei. Okay. Ja, wir haben diese Seite. Was wir jetzt tun werden, ist, dass wir eine Funktion
schaffen
werden , die eine Zukunft sein wird. Schaffen Sie einfach eine zukünftige Lücke. Es wird vorerst
nichts zurückgeben. Dann gib ihm den Namen „
Daten und KI abrufen“. Was wir dann tun können, ist
Future dot verzögert zu verwenden. Siehe Future dot verzögerte Methode
zum Fälschen eines Netzwerkaufrufs. Jetzt hören Sie, dass Daten nach drei Sekunden
erscheinen sollten. Und was hätte hier sein sollen? Was sollte tun? Was getan werden sollte,
ist, dass es gedruckt werden sollte. Es ist Flattern. Entwickler. Denn hier
war das erste Argument die Dauer und das
zweite Argument oder als eine Funktion, die ausgeführt werden sollte nachdem sich dieser Future Dot verzögert hat. Dynamit wird der zweite
Bezirk gemacht. Und die nächste
Codezeile, die wir hier schreiben werden ist eine zufällige Codezeile. Stell dir vor,
denk einfach an dieses Ding. Und da es eine Zukunft ist, sollte
es synchron sein. Wir müssen dort ein Waschbecken schreiben. Es ist eine Sache, an die Sie sich ständig erinnern
müssen , dass dieses Flattern
wissen sollte , dass diese Funktion
eine asynchrone Funktion ist. Das war's. Kopieren Sie dies, holen Sie sich Daten
an und drücken Sie Ausführen. Jetzt. Jetzt spar einfach auch wenn du willst. Sie können wieder
zwei Futures haben, nur um des
Verständnisses willen , und es wird
ein zweites Ende
unter 12 Sekunden geben . Wenn Sie Neid
haben, können Sie
das Video einfach anhalten und versuchen, diesen Code
immer wieder zu verstehen. Oh, okay. wir unseren Code hier von
oben nach unten sehen, sollte die
Benutzer-ID an erster Stelle stehen. Dann das, hey, es ist
flatterte Entwicklung, das sind die Daten des Benutzers. Und dann ist diese zufällige Codezeile
die letzte Zeile. Wenn wir jedoch auf den Button klicken,
sehen Sie, dass das erste, was
ausgeführt oder ausgedruckt wird , eine zufällige Codezeile
war. Dann ist das, hey, es ist ein
überfluteter Entwickler. Und zuletzt die Benutzer-ID. Sie können also diese Futures sehen. Was ist eine Zukunft? Das heißt, es wird einige
Zeit dauern, zwei oder drei Sekunden. Aber danach erhalten
wir den Wert, oder
der Code wird ausgeführt. Aber es hört nicht auf. Das war also die
Sache, die es nicht drei
Sekunden
gewartet hat, bis es ausgeführt wurde. Es ging einfach direkt, um eine zufällige Codezeile zu
drucken. Und es hat gerade
diese Codezeile ausgeführt. Das läuft
uns also synchron, aber es gibt ein Problem. Das heißt, der Benutzername
sollte erst nach der Benutzer-ID abgerufen werden. Das heißt, wir sollten
warten, bis eine Funktion ausgeführt wird. Stellen Sie sich vor, dies
ist Ihre Instagram-App, dann
ist die Benutzer-ID, wenn
die App die Datenbank für
die Informationen des Benutzers aufruft . Danach sollte nur der Startbildschirm mit diesen Details
erscheinen. Ohne die Details
sollte es warten und nicht und sollte nicht
zur nächsten Zeile gehen. Zu diesem Zweck. Wir benutzen diesen Dan-Fang. Sie dies verwenden, dann
fangen bedeutet, dass nach dieser Dauer diese
Futures abgeschlossen sind,
dann nur die
zweite Codezeile ist dann nur dann
nur die zweite Sache. Warten Sie also einfach und
versuchen Sie es zu verstehen. Dot Dan ist
ganz am Ende der Funktion angehängt. Also hier, vor diesem Semikolon, klicke
ich einfach auf
Punkt und sehe dann ein paar Dinge
gibt und
wir werden Punkt-Punkt-Punkt verwenden. Was es bedeutet ist zuerst, dass die Zukunft ausgeführt werden
sollte und es
wird drei Sekunden dauern. Nach drei Sekunden, wenn
dieser Sprint fertig ist. Dann auf Likud zu dieser
Codezeile, das war's. Und dann fange es und gewinnt. Wenn während der Ausführung dieser
Funktion etwas, ein Fehler oder
etwas schief gelaufen ist, dann sollten diese vorerst
Punktdruck drucken, der hinzugefügt wurde. Normalerweise geben wir dem Benutzer jedoch ein Feedback über eine Snackbar oder eine Warnbox. Wenn Sie sich also an
die vorherige Ausgabe erinnern, war
es zunächst eine zufällige Codezeile
, dann hasst Florida
und dann die Benutzer-ID. Aber jetzt wollen wir eine Benutzer-ID. Diese zufällige
Codezeile wird zuerst ausgeführt , da dies eine Zukunft ist
und es einige Zeit dauern wird. Also ja, es wird nicht
warten und direkt gehen. Aber Sie können in dieser
Ausgabe sehen, dass die Benutzer-ID, wir die Benutzer-ID haben und dann nur wir die Benutzerdetails haben. So haben wir erfolgreich
durchgeführt, eine zukünftige Funktion im
Theater
geschrieben und auch gelernt, wie
man den Fangfehler bei der
Arbeit mit Futures belastet oder benutzt . Ich hoffe, du hast das Konzept
verstanden. Wenn Sie Zweifel haben, schlage ich Ihnen vor, einfach Geduld und Vig zu
haben. Denn in den nächsten
zwei oder drei Modulen, am Ende der drei Modelle, werden Sie
definitiv
alle Ihre Zweifel klar haben denn dies ist nur
ein sehr dummy-Beispiel. Aber wenn wir eine
echte Anwendung erstellen , werden
Sie welken. Okay,
aus diesem Grund, während wir es sind, während Sie
diese Dinge lernen, ist
dies das
Anwendungsfallszenario für 10. Das war's also. In der nächsten Sitzung werden
wir darüber sprechen. Wir werden über
diese Spüle sprechen und warten. Weil die Verwendung von Dan Cage und die Verwendung von
async und await
dasselbe tut, aber sie sind weit weg. Code zu schreiben ist anders. Das war's. Hoffe du übst und du
praktizierst viel. Wir sehen uns im nächsten Video.
33. Async Await Konzept: In dieser Sitzung
werden wir also über das Schlüsselwort async
await sprechen , während wir eine Zukunft
verwenden. In dieser vorherigen Sitzung
haben wir gelernt, wie man
sie „Catch-Fehler“ benutzt, und es funktioniert definitiv gut. Aber es gibt auch eine
alternative Syntax , die vielen gut ist, um viel
lesbarer zu sein und auch um mehrere Kette
von Dengue-Cage zu vermeiden, verwenden
wir ein Sync-Schlüsselwort. Danach unser Funktionsname
und fügen Sie await Schlüsselwort hinzu, und fügen Sie await Schlüsselwort bevor alles, was
etwas Zeit benötigt, um das auszuführen. Nur zum Beispiel verzögerte sich unsere
GET-Anfrage oder diese Zukunft. Jetzt wird alles danach
ausgeführt, wenn der
Wert zurückgegeben wurde. Was ich damit meine ist, dass
Sie die Syntax sehen können. Wir haben diesen zukünftigen
und zukünftigen Namen. Dann hat diese Funktion
dieses Schlüsselwort, was einfach bedeutet, dass diese
Druckvariable nur funktioniert wenn diese zukünftige finanzielle
Rückgabe diesen Wert ergibt oder nicht. Also probieren wir es aus. Zunächst möchten Sie, Sie können es mit
demselben Beispiel machen, wenn wir wollen. Jetzt habe ich diese Funktion außerhalb dieser zehn Uhr
und ich werde sie entfernen. Jetzt. Angenommen, diese Funktion gibt eine ID zurück, die
eins ist und V diese ID in einer Variablen
namens Benutzer-ID gespeichert hat. Aber jetzt, aber jetzt ist
das Ding V1, diese Benutzer-ID, und
bring es hier raus. Okay? Wenn wir es also jetzt machen, wird es
definitiv etwas
hinzugefügt oder so etwas wie Null zeigen . Si, hay, seine zukünftige
Benutzerinstanz eine Zukunft, was bedeutet, dass der Wert nicht in
dieser Benutzer-ID-Variable gespeichert wurde. Wir sollten warten. Und hier kommt das
Keyword weight, was einfach
diese Funktion bedeutet. Nachdem diese Funktion ausgeführt wurde, wird der Leadercode zu dieser Zeile wechseln. Was Sie sehen werden, ist,
wenn ich auf diese Schaltfläche klicke, wird
dieser zufällige
Zeilencode nicht ausgeführt. Zuerst. Dies wird ausgeführt. Dann weil es synchron ist, haben
wir nicht gesagt, dass wir hier warten sollen. Und jetzt hat
das diesen Wert von 1. Aber dieses Konzept ist sehr, sehr, sehr wichtig, denn wenn wir mit
Firebase und Datenbanken bauen, wird
die Zukunft
ständig genutzt, in der ich bin. Deshalb
musst du es verstehen. Diese Warte-Funktion
erwartet eindeutig Keyword, das ich sagen werde. Jetzt wirst du nein sagen, ich möchte auch darauf warten. Und endlich
sollten die Zitate ausgeführt werden. Schreibe also einfach eine
Gewichtsfunktion. Vor dieser Funktion. Und jetzt werden Sie sehen, dass sich
die Ausgabe ändert. Erstens, Benutzer-ID, zweitens,
hey, es ist Flattern. Und dann zufällige Codezeile. Weil wir unsere
Bewerbung bei Whittier haben. Geh bis dahin nicht
zur nächsten Zeile. Es ist also ein sehr
wichtiges Konzept. Bitte versuche
es noch einmal bei einem Kind zu üben. Jetzt fragen Sie vielleicht, was passiert, wenn
es einen Fehler gibt. Dafür verwenden wir
diesen Catch-Block, um
einen Netzwerkfehler zu ermitteln. Und in Bezug auf diese Dinge
hier, das war's. Und wenn du willst, kannst
du einfach Regie bringen. Denn vorher
hatten wir es dann und fangen es. Aber jetzt, wenn wir async warten, sollten
wir diesen
Catch Block auch verwenden. Und sinken bedeutet nicht, dass
nur Sie diese Art von
separater IT-Funktion
erstellen müssen. Angenommen, wir haben diesen Druck. Zweite Funktion. Angenommen. Was passiert jetzt? Wenn ich hier klicke,
sehen Sie, dass die zweite Funktion zuerst ausgeführt
wird. Und dann hat das Zweifel denn Flattern weiß
, dass es eine Zukunft ist. Also, dass es hier nicht gewartet und zu dieser Codezeile gegangen ist. In diesem Szenario. Wenn Sie nein sagen, möchte
ich, dass zuerst Daten ausgeführt werden
sollen, dann bei Lip Print diese zweite
Funktionszeile. Dann muss man hier wieder ein
Waschbecken und ein Gewicht benutzen. Schau dir jetzt deine Ausgabe an. Und wir konnten benutzen, es ist auch eine Funktion, und das war auch eine Funktion. Sie müssen also
verstehen, dass Sie nur eine Funktion
benötigen, in der wir arbeiten können. Nun wird diese Zeile zuerst
ausgeführt und sehen Sie, sie wurde zuletzt ausgeführt. Ich hoffe also, dass Sie
das Konzept von Async,
Warten und Futures tief verstanden haben . Da dieses Konzept
so wichtig ist , dass wir
an diesem Konzept zweifeln, könnten
Sie
an keiner weiteren Anwendung arbeiten. Und lass dich
nicht davon überwältigen. Weil ich weiß, dass es ein sehr neues Konzept ist, wenn Sie
neu in dieser Programmierdose sind . Und wenn du nicht
alles verstanden hast, ist es in Ordnung. Weil ich als Anfänger
verstehe, dass Sie Zweifel haben
werden. Du musst viel üben, aber irgendwann wirst du es bekommen. Das war's für heute. Ich hoffe, Ihnen gefällt
unsere Fotosessions. Und auch wenn du unsere Videos
nicht ansiehst, vertraue
ich dir nur , dass du
alleine übst. Und Q.
34. Was sind Streams: Hi. In dieser Sitzung
werden wir über Streams sprechen. Früher haben wir diskutiert,
was eine Zukunft ist, aber jetzt ist es Zeit V-Knoten, die zweite Art der synchronen Programmierung
, die diese streamen. Wenn wir also Streams verwenden, haben wir viele Werte, die uns ehrlich gesagt
abgerufen werden, und anstatt
eine Verbindung einmal anzuhängen ,
wie in Zukunft, können
wir sie offen und
bereit für neue Daten machen um reinzukommen. Einfach, jede Änderung erfolgt oder
neue Daten werden eingefügt, die am Ende reflektiert werden. Zukunft hat nur eine Antwort, aber der Stream könnte eine
Anzahl von Antworten haben. Ich möchte also einfach sagen, dass ein Benutzer diese Seite oder Anwendung aktualisieren
muss, wenn sich etwas ändert, wenn sich bereits wenn sich etwas ändert, wenn sich bereits
etwas ändert
, eine Benachrichtigung oder eine neue
Nachricht erscheint . Aber wenn Sie Streams verwenden, ist
es in Echtzeit. Das heißt, jede Datenänderung, ihre Datenbank spiegelt sich direkt in Ihren
Antragsschulden wider. Es. Du musst es nicht haben, du musst nichts anderes
denken. Dies ist der grundlegende Unterschied. Im nächsten Modul werden
wir also praktischer über Streams sprechen , weil
wir Firebase verwenden werden. Hier
simulieren wir erneut unsere Fälschung, ein Ereignis, das alle paar Sekunden eine neue
Nachricht zurückgibt, nur um Ihnen dieses Konzept
verständlich zu machen. Es sind also vier
Schritte involviert. Erstellen von Streams, Hinzufügen von
Daten zu einem Stream, Abhören eines Streams und Schließen einer Zeichenfolge. Lass es uns praktisch machen. Bringen Sie Ihren
Texteditor heraus und haben Sie eine neue Datei namens Stream. Screenshot dunkel. Wieder das absolute Minimum,
was wir brauchen, oder? Es ist in Ordnung. Ich werde das weniger starre verwenden , weil die Benutzeroberfläche
nicht geändert wurde. Stream, Bildschirm, dicht, Gerüst, Dann die Daten Textstream. Was wir jetzt tun werden, ist, dass wir einfach einen Stream
erstellen werden. Und um diesen Stream zu erstellen, müssen
wir den
Stream-Controller vorhersagen
, der zur
Steuerung dieses Streams verwendet wird. Stream. Stream-Controller
ist dies fällig. Und dies wird automatisch importiert, weil wir Streams
verwenden und ungerade. Der zweite Schritt besteht darin, dem Stream Daten
hinzuzufügen. Sie dazu einfach Erstellen Sie dazu einfach eine Funktion
namens Stream-Daten. Und hier kannst du eine for-Schleife
von int haben I ist gleich 0, ich weniger als 4, ich plus plus. Und dann
Stream-Controller-Dot Add. Du hast die Nachricht bekommen. Und dann
warte ich einfach zwei Sekunden hier. Dann wird nur die FOR-Schleife
wieder ausgeführt. Diese Sekunden bis, das war's. Sonst nichts. Jetzt in der Leiche. Lasst uns
gelindert werden, aber fertig. Wessen Glanz? Wenn wir
anklicken , um zu streamen. Machen Sie es dann im Hauptteil als Standard. Bildschirm und einfach
neu aufbauen oder die Statistik. Siehe. Du hast das den Stream. Und wir machen
es einfach zentriert. Okay. Jetzt werde
ich in diesen Stream-Daten scheinen, bitte
auflisten, zuzuhören. Tu, ist Baum. Das bedeutet, dass Zuhören bedeutet
, dass neue Daten ins Spiel kommen. Jeder sollte gedruckt werden. Ich drucke einfach Daten aus. Und die String-Daten, die ich dieser Funktion
zuweisen werde. Ich weiß, dass es hier eine Menge
Dinge zu verstehen gibt, aber man kann nur Staubschritte sehen. Zuerst erstellen wir
einen neuen Stream. Zweitens war das Hinzufügen von
Daten zum Stream. Müde hörte
sich den Stream an, was bedeutet einfach was? bedeutet einfach, dass
wir eine Verbindung begonnen haben, dass dies zutrifft,
im Grunde wie ein Fluss ist. Dann fängst du mit einem an. Wenn, wenn der
Startpunkt der Aufgabe nicht geschlossen ist, werden diese Daten oder das Wasser kontinuierlich fließen bis Sie
ihren Weg nicht blockieren, einfach ist das. Okay, klicken wir
auf diesen Button. Du hast die Nachricht bekommen. Sie haben die Nachricht C3, 4, viermal gedruckt,
weil wir diese vier haben. Und wenn du an nein denkst. Also schreibe ich
hier nach zwei Sekunden einfach Druck und
es wird einfach drucken, lesen. Kay? Versuchen wir es noch einmal. Entschuldigung, das weil
es ein Stream war. Also musst du es neu starten. Weil es schon
angefangen hat zuzuhören. Du kannst es nicht
immer wieder machen. Wir sehen, du hast die Nachricht bekommen. Lesen Sie. Du musst eine Nachricht lesen, du musst Nachrichtenrate. Also hier fließen die Daten
kontinuierlich. Ich brauche Änderungen wurden
abgelenkt, ohne dass wir uns ändern und
die Anwendung neu starten. Dies geschieht die Bedeutung
des Streams. Das war's. Also denken Sie vielleicht darüber nach, was passiert, wenn ich weiß, dass
die Daten eingegeben werden? Wenn also später auch andere Daten
eingegeben werden, werden sie auch gedruckt. Was ich sage ist, lasst uns einen schwebenden
Action-Button haben. Shea. Ich schreibe einfach,
füge ein On-Premise hinzu. Ich werde einfach in diesem
Stream-Controller hinzufügen, wir fügen hinzu, dass Sie einen
neuen Knotendefäkation haben. Okay. Jetzt lasst uns sehen. Hier habe ich
keinen Druck oder irgendetwas geschrieben, aber da es via
hört, habe diesen
Code
bereits geschrieben und ausgeführt. Als ob ich darauf klicke, fing
es an zu hören. Nachdem alles erledigt ist, wenn ich auf Hinzufügen klicke,
sehen Sie, dass Sie eine neue Benachrichtigung haben. Wir müssen also nicht noch einmal
zuhören, da die Verbindung bereits
geöffnet war und das benötigte, dass diese Ströme innerhalb dieses
Streams ausgegeben werden. In einfachen Worten: Stellen Sie sich
vor, Sie haben Ihre Nachrichten hier in der
Benachrichtigungsleiste. Wenn jemand eine
neue Benachrichtigung,
unsere Nachricht, spürt , erhöht
sich diese Anzahl um 123. Dies ist also das
Konzept der Zurückhaltung. In einfachen Worten, was ist der Unterschied zwischen
Zukunft und Stream? Futures wird ausgeführt,
sobald ein Status
in die Datenbank geht und diese
in diese Verbindung gebracht wird. Wenn sich etwas
in der Datenbank ändert, muss
der Benutzer diese Seite
aktualisieren oder
seine Anwendung neu starten, dann wird nur eine neue zukünftige
Anfrage gesendet. Aber im Falle von Freestream, wenn es geht und
nach den Daten fragt , hängt es eine Verbindung an. Was und in diesem Fall, wenn sich dieser Wert oder wenn
sich irgendetwas in der Datenbank ändert, fließt er direkt von
der Datenbank zur App. Ohne dass der Benutzer
aktualisiert oder irgendetwas. Es wird
hier einfach automatisch aktualisiert. Ich hoffe, Sie haben
diese Grundlagen klar. Und auch mit dem
realen Beispiel werden
wir in den nächsten Modulen tun. Aber bis dahin genieße einfach alle Grundlagen
jeder Theorie die
wir lernen. Danke.
35. FutureBuilder und StreamBuilder Widget: Willkommen zurück. In dieser Sitzung
werden wir über ein neues Widget namens Future
Builder sprechen. Und es ist im Grunde ein Besuch mit Hilfe, um mit Futures umzugehen. Einige Zukunft, wenn dadurch
ein Teil des Codes entfernt wird
, den wir
schreiben müssen , wenn wir
etwas aus diesem Netzwerk holen, also aus der
Datenbank oder dem Server. Angenommen, Sie möchten beim Start der Anwendung
Daten aus
der Datenbank abrufen beim Start der Anwendung
Daten aus
der Datenbank abrufen und
einen Lade-Spinner anzeigen ,
bis später kommt In diesem Fall wird die Zukunft sehr praktisch
aussehen. Es ist nicht wie tote Auslesungen. Zukunft wird dort die Aufgabe nicht
ausführen, aber es wird viel
Zeit dauern, um etwas mehr Code zu haben. Du musst einen
festgelegten Zustand machen und so. Aber warum tun all diese Dinge , wenn wir diese
großartige Ablehnung bei uns haben? Es wird also wie
jedes andere Widget zurückgegeben. Es akzeptiert zwei Parameter. Eine ist die Zukunft und der
zweite ist ein Baumeister. Und der Builder übernimmt auch eine Funktion, die zwei Parameter
hat. Einer ist Kontexte,
was standardmäßig der Fall ist, und zweitens ist Snapshot
, der nur ein Variablenname ist. Es ist jedoch sehr
wichtig, da es der Feature-Funktion
zurückgegebenen Daten
enthält. Hier können Sie also die
Syntax sehen, einfach Future Builder. Dann ist die Zukunft die Funktion , die die Zukunft zurückgibt. Und dieser Builder
gibt ein Widget zurück, aber es ist eine Funktion. Also lasst es uns praktisch machen,
damit du es mehr verstehst. Gehe zum zukünftigen Bildschirm. Und was wir tun können ist, dass diese
Funktion wieder zurückkehrt. Ich habe es gerade zum Testen gemacht. Lassen Sie uns eine zukünftige Funktion
namens get username haben. Und es wird dasselbe sein
, weil es die Zukunft ist. Lassen Sie uns nun eine Variable setzen. Final-Saite. Der Benutzer ist gleich
Future dot d laid. Lassen Sie uns eine Dauer
von zwei Sekunden haben. Und dann habe ich eine Funktion, die im Grunde den
Wert von Bill Gates zurückgibt. Tessa Violet, die Benutzervariable, und dann geben wir diesen Benutzer zurück. Jetzt ist es eine Zukunft, die einen String-Wert
zurückgibt. Jetzt ist diese Zukunft
zurückgekehrt. Wir müssen es in unserem Körper zeigen, werden einfach alles entfernen
und eine Zukunft haben. Bei uns. Ein Tippfehler. Dieser zukünftige Builder, der der
erste Parameter ist, ist Future
, den wir
diesem erhalten Benutzernamen zuweisen sollten. Und zweitens. Und der zweite ist Builder
, der eine Funktion ist
und es akzeptiert Kontakt nicht Exponat gibt uns
Kontext und einen Schnappschuss. Und es hat den Datentyp
des Sync-Schnappschusses. Also 10. Ich hoffe, du
hast es verstanden. Zuerst. Wir haben dieses zukünftige
Builder-Widget geschrieben. Wir weisen es einem zukünftigen Video zu. Jetzt die wichtigen Dinge, CMS, das die Rolle dieses
Schnappschusses spielt. Zuerst müssen wir prüfen,
ob der Snapshot-Punkt Daten enthält. Wenn es größer ist als, ist es in Ordnung. Bis dahin zeigen wir etwas wie einen
Ladeindikator. Werden einfach Ereignisse den Fortschrittsindikator
lernen könnten. Das wird also
bis zu diesem Zeitpunkt ausgeführt. Das ist diese 2 Sekunde, zuerst bis zur zweiten Stelle. Bis zu diesem Zeitpunkt
müssen wir definitiv etwas
auf den Bildschirm zeigen. Und wir werden dieses Widget verwenden als zirkulärer
Fortschrittsindikator bezeichnet wird. Angenommen, wir haben Daten, dann werden wir einfach zurückkehren. In diesem Kind
haben wir ein Text-Widget. Wir werden Punktdaten ausgeben, die sich innerhalb des Schnappschusses befinden. Snapshot-Daten. Das war's. Probieren wir
es selbst aus. Es tut uns leid, ich meine, wir müssen
diesen zukünftigen Bildschirm zuweisen. Sehen Sie sich diese Ladung
an und geben Sie an, dass
es zwei Sekunden lang war. Und dann haben wir den Km-Wert
, der
von der zukünftigen Funktion zurückgegeben wird. Ich hoffe also, dass Sie
den zukünftigen Baumeister verstanden haben. Am wichtigsten ist, dass Sie im
Snapshotting
nachforschen müssen , denn dies ist das,
was wir verwenden werden um unsere Widgets zu manipulieren. Das ist die FASTA-Datei zeige
einen Ladeindikator und zeigt
dann eine Show an oder
werden diese Daten abgelegt. Das war's. Also ja, du kannst
den Code hier wieder sehen. Dann haben wir das nächste Mal
einen StringBuilder gemacht. Stringbuilder arbeitet genauso wie ein zukünftiger Builder.
Der einzige Unterschied. Es hört ständig
auf diese Änderung und aktualisiert die Benutzeroberfläche entsprechend ohne unseren Bildschirm aktualisieren
oder neu erstellen zu müssen. Jetzt
nimmt StringBuilder auch zwei Parameter an, das heißt Trim und einen Builder. Jetzt auch Build, das
eine Funktion annimmt , die zwei Parameter
hat, Kontexte wie standardmäßig. Und Snapshot ist nur eine Variable
, die die Daten enthält. Probieren wir es nochmal aus. Gehe zum Stream-Bildschirm. Früher haben wir eine Dummy-Zukunft
geschaffen. Jetzt werden wir einen
Dummy-Stream erstellen, streamen. Mein Stream. Es wird nicht sehen, es wird als Trick angesehen, denn da es sich in Zukunft um eine Zeichenfolge handelt, haben
wir dieses
Sync-Schlüsselwort, das wird
zugewiesen, wenn es eine Zukunft ist. Aber wenn es Stream heißt, müssen
wir
einen Sink-Asteroiden schreiben. Das war's. Nun, hier ist einfach, ich werde einfach diese
for-Schleife Funktion haben , bei der ich
lesen werde, was ich gleich 0 ist. Ich bin weniger als 10, plus, plus. Und ich werde nicht zurückkehren. Ich überlasse das, was ich schätze. Und ich werde auch
zukünftiges D-Lipid
hier lassen , damit die Werte ein
wenig Zeit in Anspruch nehmen. Unsere Funktion ist richtig
geschrieben. Es ist einfach,
es heißt, dass ich weit von eins auf neun gehen
sollte und unser Wert in den
Stream eingefügt
werden sollte , das heißt 1, 2, 3, um einfach durch die Zeichenfolge zu
schweben. Das war's. Jetzt werden wir wieder
den Stream Builder haben. Der erste Parameter ist ein Stream, das ist mein Stream. Zweitens ist ein Builder
, der einen Kontext haben wird
, der Kontext haben wird. Und im Schnappschuss. Jetzt müssen wir wie gewohnt immer
prüfen, ob Snapshot Daten enthält. Wenn nicht, gebe
ich zunächst einen zirkulären
Fortschrittsindikator zurück. Und wenn es eine Gefahr ist, wenn es Daten gab
, hatten wir in der Mitte ein Kind. Und der Text besagt
Snapshot-Punkt-Datenpunkt ToString. Das war's. Da es eine Ganzzahl ist, habe ich hier zwei Strings gemacht. Und auf der Homepage. Jetzt streamen Sie den rechten Bildschirm. Starten Sie neu und überprüfen Sie die Ausgabe. C 12. Drittens: Wir
machen nichts. Wir aktualisieren die Seite nicht. Da jedoch Stream steht, werden die
Datenwerte in Echtzeit
aktualisiert. Schließlich hoffe ich, dass
Sie ein Konzept von Streams und Futures sind klar. Zumindest kennst du das
Konzept, das war's. Ich sage nicht, dass Sie alles
wissen sollten, was wir hier geschrieben haben
und alles, weil es für Sie jetzt vielleicht ein bisschen
kompliziert ist. Aber vertrauen Sie mir, wenn wir
eine PS und Firebase verwenden, werden
alle Ihre Zweifel geklärt. Das war's also für dieses Modul. Im nächsten Modul werden
wir echte
APIs in unsere Anwendung implementieren. Und all diese Daten
werden vom Server kommen. Danke. Wir sehen uns
im nächsten Modul.