Offensichtlich ist dieser Bildschirm momentan nicht so nützlich, und deshalb
gehe ich jetzt zu dem Text, den ich als Dummy verwendet habe, und ersetze ihn durch beispielsweise ein neues
Spiel, so etwas, und darunter möchte ich einen haben Eingabebereich mit einem leichten Schlagschatten, daher kennen Sie diesen typischen Kartenlook möglicherweise
von einigen Apps und Websites, auf denen sich eine Box mit einem leichten Schlagschatten befindet,
möglicherweise einige abgerundete Ecken.
Ich möchte das hier neu erstellen, also werde ich hier eine Ansicht hinzufügen, eine Ansicht, da dies wiederum ein sehr flexibles Element ist.
Wir können dort viele Stile anwenden, wir können dort unseren Schatten und unsere abgerundeten Ecken hinzufügen und dann
unsere halten Inhalt
in dieser Ansicht, das ist also großartig, um den Container allgemein zu gestalten, und jetzt möchte ich innerhalb
dieser Ansicht einen Text haben, in dem wir sagen, wählen Sie beispielsweise eine Zahl aus, und in dem wir dann auch ein Textfeld haben möchten, in
dem Benutzer kann etwas eingeben.
Dort füge
ich eine Texteingabekomponente hinzu, bei der es sich um die integrierte Komponente handelt, bei der Benutzer über die Tastatur einen Wert
eingeben können. Hier sollten sie eine Zahl eingeben. Wir werden dies konfigurieren und in
einer Sekunde formatieren. Im Moment werde ich es einfach so einfügen und darunter möchte ich
zwei Schaltflächen
nebeneinander haben, und das ist wichtig, nebeneinander, nicht untereinander andere, mit denen wir den Eingang zurücksetzen
und einen neuen auswählen oder den ausgewählten bestätigen können. Wir brauchen hier also eine Ansicht, da wir so Elemente nebeneinander
positionieren können, während diese Elemente übereinander positioniert sind. Wenn ich hier nur zwei Schaltflächen hinzufügen würde,
müsste ich die Flexrichtung dieser Ansichten ändern, um sie als Nächstes zu erhalten zueinander, aber dann würden
auch der Text und die Texteingabe nebeneinander sitzen.
Jetzt füge ich hier eine Ansicht hinzu, sodass in dieser Ansicht die umgebende Ansicht, diese, diese und diese
Ansichtskomponente übereinander liegen. Auf
der vertikalen Achse, aber innerhalb dieser Ansicht, kann ich jetzt auch sicherstellen, dass Die Gegenstände dort sitzen dann nebeneinander,
also in der horizontalen Achse und das ist es, was ich hier will.
Daher importiere ich die integrierte Schaltfläche, die eine der Ansichtskomponenten ist, die sich automatisch an die zugrunde liegende
Plattform anpasst. Später in einem separaten Modul erfahren Sie, wie Sie manuell herausfinden können, auf welcher Plattform
Sie die Anpassung vornehmen möchten das Aussehen und Verhalten Ihrer App dazu.
Hier gehen wir mit der eingebauten Schaltfläche und geben der ersten einen Titel zum Zurücksetzen und der zweiten, der zweiten Schaltfläche
hier einen Titel zum Bestätigen und dann wird onPress
im Moment nichts tun, das ist also nur eine leere Funktion, füge sie einfach hinzu, damit wir die Requisite bereits dort
haben, wir werden später Logik hinzufügen
und für den Moment
haben wir nur die Schaltflächen hier.
Jetzt fehlt das Styling, aber wie gesagt, der Knopf sollte nebeneinander sitzen.
Daher gebe ich dieser Ansicht hier, die die Schaltflächen enthält, einen Stil, der auf
das Stilobjekt zeigt, und
dort, sagen wir einen Schaltflächencontainer, liegt dieser Name
wie immer ganz bei Ihnen, und ich möchte dieser Ansicht, die meine Eingaben enthält, auch a geben Stil hier, unter Bezugnahme auf
das Stilobjekt und ich werde den sagen wir Eingabecontainer verwenden,
dieser Name liegt natürlich auch bei Ihnen und hier möchte ich dies wie einen speziellen
Titel stylen, vielleicht mit einer größeren Schriftgröße, also Hier werde ich einen Titelstil zuweisen, sagen wir.
Jetzt können wir in unserem Stylesheet nach unten gehen und den Titel hinzufügen, den Eingabecontainer hinzufügen und auch den Schaltflächencontainer hinzufügen. Jetzt
können wir dort einige Stile hinzufügen. Nun zum Titel, ich möchte wieder
die Schriftgröße festlegen, also werde ich die Schriftgröße
wie folgt einstellen, auf 20 einstellen und vielleicht auch einen gewissen Abstand auf der vertikalen Achse mit einem vertikalen Rand von beispielsweise 10,
10 hinzufügen Dies und immer im Auge behalten, ersetzt der vertikale Rand im Grunde den unteren und unteren Rand und jetzt den
Schaltflächencontainer. Ich werde gleich zum Eingabecontainer zurückkehren. Der Schaltflächencontainer erhält eine flexible Zeilenrichtung. Die
Standardeinstellung ist Spalte, aber jetzt möchte
ich, dass Elemente nebeneinander sitzen, also müssen wir
hier Zeile verwenden.
Ich möchte hier eine Breite festlegen, denn wenn wir keine Breite für den Schaltflächencontainer festlegen, ist diese genauso
breit wie die beiden Schaltflächen zusammen. Stattdessen möchte ich die Breite
der übergeordneten Schaltfläche verwenden, also von dieser Ansicht hier und positionieren Sie dann die Schaltflächen in dieser Ansicht, sodass ich
das Gegenteil
tun möchte. Stylen Sie die Ansicht nicht gemäß den Schaltflächen, sondern positionieren Sie die Schaltflächen gemäß
der Ansicht.
Daher gebe ich dem Schaltflächencontainer diese Ansicht und die explizite Breite hier und jetzt. Um die Schaltflächen dort zu positionieren, können
wir
sie mit defineContent entlang der Hauptachse positionieren, die für die Flex-Richtungsreihe von links nach rechts ist, und
dort werde ich den Platz auswählen dazwischen, so dass die Schaltflächen am linken und rechten Rand dieser Reihe
sitzen und den gesamten verfügbaren freien Platz zwischen ihnen verteilen. Fügen Sie hier auch ein wenig horizontale Polsterung hinzu, damit
wir innerhalb unserer Ansicht einen gewissen Abstand nach links und rechts haben, vielleicht 15, damit die Tasten nicht direkt
an den Rändern links und rechts sitzen, aber es
gibt einige Abstand links und rechts. Okay, wenn wir
das speichern, sehen wir das, was ich nicht über dich
weiß, aber was nicht so toll aussieht, oder?
Das Problem ist nun, dass der Eingabecontainer noch keine Stile hat. Der Eingabecontainer enthält jedoch alle Eingaben, weshalb
die Stile dort etwas abweichen.
Wir sollten dem Eingabecontainer also ein Styling geben und dort möchte ich eine Breite hinzufügen, und Sie können
jetzt eine fest codierte Breite von beispielsweise 300 Pixel oder eine Breite und einen Prozentsatz verwenden.
Jetzt füge ich hier eine Breite von 300 hinzu, füge aber auch eine maximale Breite von 80% hinzu, so dass wir eine Breite von 300 Pixel haben, aber wenn das
Gerät zu klein wäre, ist das ein bisschen Reaktionsfähigkeit, die ich hier bereits hinzufüge, wenn die Gerät wäre zu
klein, wir stellen sicher, dass unsere Breite 80% nicht überschreitet. Und dann möchte ich die Elemente in der
Mitte ausrichten. Beachten Sie, dass
der Eingabecontainer eine Ansicht ist. Daher wird die Flexbox verwendet.
Die Standardspalte für die Flexrichtungsspalte wird verwendet. Daher positionieren wir mit der Elementmitte ausrichten Elemente
in der Mitte auf der Querachse von links nach
rechts, sodass wir die Elemente horizontal zentrieren. Jetzt damit, jetzt sieht das viel besser aus, wir
können die Eingabe nicht wirklich
sehen, aber das ist das alte Ding, oder?
Wir müssen es stylen, damit wir es wirklich sehen können. Wir sehen jedoch die Schaltflächen und
können sehen, dass unser allgemeines Layout und Styling eine gewisse Form annimmt.
Trotzdem bin ich noch nicht 100% glücklich über das Aussehen.