Um den Inhalt in der Mitte zu zentrieren, können wir eine Technik verwenden, die ich bereits
zuvor behandelt habe: Styling und speziell Flexbox.
Auf unserem Modal haben wir diese Ansicht oder auf unserem Modal haben wir diese Ansicht, das ist unsere Stammansicht, es
ist das einzige Element im Modal
und dann hat diese Ansicht natürlich andere untergeordnete Elemente, aber das ist das einzige direkte Kind unseres Modals.
Dort haben wir den Eingabecontainerstil, den wir anwenden, und dort legen wir derzeit eine Flexrichtung
der Zeile fest.
Jetzt könnten wir das natürlich belassen, aber ich würde im Modal sagen, wenn wir es auf einem Vollbild
wie diesem präsentieren, bin ich eigentlich in Ordnung mit einer vertikalen Ausrichtung, so dass wir die Eingabe und darunter die Schaltfläche haben.
Also werde ich dies wieder in Spalte ändern oder da dies die Standardeinstellung ist, einfach diese Flexrichtung löschen
und jetzt möchte ich dies jedoch horizontal und vertikal zentrieren. Dafür können
wir den begründeten Inhalt so einstellen, dass er hier zentriert wird, und Elemente an der Mitte ausrichten, aber
das allein reicht nicht aus.
Sie können sehen, ob Sie das Modal öffnen, es befindet sich immer
noch ganz oben und der
Grund dafür ist, dass unser Eingabecontainer, sodass die Ansicht, der wir diesen Stil zuweisen, standardmäßig nicht den gesamten
verfügbaren Speicherplatz belegt kann in die umgebende Ansicht
gelangen, also in diesem Fall in die modale. Das Modal nimmt theoretisch die volle Höhe und Breite des
Bildschirms ein, aber die Ansicht nimmt standardmäßig nicht den vollen verfügbaren
Platz ein. Genau
so funktioniert es, das ist die Standardeinstellung.
Es nimmt nur den Platz ein, den seine Kinder benötigen, also
die Texteingabe und die Schaltfläche.
In der Ansicht werden also im Wesentlichen die Höhe der Texteingabe und
der Schaltfläche kombiniert und in diesem Fall auch die Breite des breitesten untergeordneten Elements. Von der Texteingabe hier und
übrigens hier hat Android einfach nicht richtig aktualisiert, weshalb
Sie dies sehen seltsame Ausgabe hier, das können Sie vorerst ignorieren. Damit die Ansicht hier den vollen verfügbaren Platz einnimmt, können Sie einfach zu dem Stil wechseln, den
Sie auf die Ansicht anwenden, in diesem
Fall zu unserem Eingabecontainer-Stil hier, und hier den Flex auf eins setzen. Flex ist eine Eigenschaft, die in Verbindung mit Flexbox verwendet
wird. Wie Sie bereits in diesem Modul erfahren haben, können Sie in dieser zusätzlichen Flexbox-Vorlesung mit
Flex steuern, wie viel Platz Ihre verschiedenen Elemente in einer Flexbox beanspruchen und ob dies das einzige Element
ist stellt einfach
sicher, dass dieser Container den gesamten verfügbaren Platz einnimmt.
Sie können dies auch auf Flex 2 einstellen. Der genaue Wert spielt hier keine Rolle, wenn es das einzige
untergeordnete Element ist. Sie müssen jedoch Flex einstellen, um sicherzustellen, dass der gesamte verfügbare Speicherplatz belegt wird.
Wenn Sie dies nicht tun, nimmt es genauso viel Platz ein wie seine untergeordneten Elemente. Wenn
Sie flex festlegen, nimmt es so viel Platz ein, wie es das übergeordnete Element vorgibt, also
wie das übergeordnete Element dieser Ansicht
das Modal in diesem Fall gibt die Ansicht.
Wenn Sie also Flex One hier hinzufügen, sehen Sie, dass dies jetzt gut zentriert ist, wenn Sie dies jetzt auf iOS speichern.
Um dies auch auf Android zu sehen, können Sie den Task-Umschalter öffnen, diese App hier
schließen und a drücken hier,
um diese App auf Android neu zu starten, mag das
Modal nicht, wie es scheint, und jetzt hier sehen Sie das auch. Jetzt ist eine winzige Anpassung ein kleiner Abstand zwischen der Schaltfläche und
dem Eingang, den ich haben möchte,
und dafür gehe ich zum Eingang und füge hier einen Rand von 10 hinzu, aber damit bin ich ziemlich glücklich darüber Leider hat Android
hier wirklich einige Probleme mit meinem Modal. Schließen wir es also und sehen wir,
ob das gut
aussieht. Ja, das ist gut.
Jetzt möchte ich sicherstellen, dass wir, wenn wir hier auf Hinzufügen klicken, das Modal tatsächlich schließen.