1 00:00:02,560 --> 00:00:08,680 Um den Inhalt in der Mitte zu zentrieren, können wir eine Technik verwenden, die ich bereits 2 00:00:08,710 --> 00:00:11,500 zuvor behandelt habe: Styling und speziell Flexbox. 3 00:00:11,500 --> 00:00:17,470 Auf unserem Modal haben wir diese Ansicht oder auf unserem Modal haben wir diese Ansicht, das ist unsere Stammansicht, es 4 00:00:17,500 --> 00:00:19,400 ist das einzige Element im Modal 5 00:00:19,420 --> 00:00:25,090 und dann hat diese Ansicht natürlich andere untergeordnete Elemente, aber das ist das einzige direkte Kind unseres Modals. 6 00:00:25,180 --> 00:00:29,310 Dort haben wir den Eingabecontainerstil, den wir anwenden, und dort legen wir derzeit eine Flexrichtung 7 00:00:29,350 --> 00:00:30,490 der Zeile fest. 8 00:00:30,490 --> 00:00:35,170 Jetzt könnten wir das natürlich belassen, aber ich würde im Modal sagen, wenn wir es auf einem Vollbild 9 00:00:35,620 --> 00:00:41,230 wie diesem präsentieren, bin ich eigentlich in Ordnung mit einer vertikalen Ausrichtung, so dass wir die Eingabe und darunter die Schaltfläche haben. 10 00:00:41,610 --> 00:00:48,250 Also werde ich dies wieder in Spalte ändern oder da dies die Standardeinstellung ist, einfach diese Flexrichtung löschen 11 00:00:48,250 --> 00:00:52,580 und jetzt möchte ich dies jedoch horizontal und vertikal zentrieren. Dafür können 12 00:00:52,810 --> 00:00:59,480 wir den begründeten Inhalt so einstellen, dass er hier zentriert wird, und Elemente an der Mitte ausrichten, aber 13 00:00:59,680 --> 00:01:01,690 das allein reicht nicht aus. 14 00:01:01,780 --> 00:01:05,710 Sie können sehen, ob Sie das Modal öffnen, es befindet sich immer 15 00:01:05,800 --> 00:01:07,920 noch ganz oben und der 16 00:01:07,930 --> 00:01:14,080 Grund dafür ist, dass unser Eingabecontainer, sodass die Ansicht, der wir diesen Stil zuweisen, standardmäßig nicht den gesamten 17 00:01:14,080 --> 00:01:16,720 verfügbaren Speicherplatz belegt kann in die umgebende Ansicht 18 00:01:16,720 --> 00:01:22,450 gelangen, also in diesem Fall in die modale. Das Modal nimmt theoretisch die volle Höhe und Breite des 19 00:01:22,480 --> 00:01:25,480 Bildschirms ein, aber die Ansicht nimmt standardmäßig nicht den vollen verfügbaren 20 00:01:25,480 --> 00:01:26,560 Platz ein. Genau 21 00:01:26,560 --> 00:01:28,630 so funktioniert es, das ist die Standardeinstellung. 22 00:01:28,630 --> 00:01:31,900 Es nimmt nur den Platz ein, den seine Kinder benötigen, also 23 00:01:31,900 --> 00:01:33,590 die Texteingabe und die Schaltfläche. 24 00:01:33,730 --> 00:01:38,830 In der Ansicht werden also im Wesentlichen die Höhe der Texteingabe und 25 00:01:38,980 --> 00:01:47,420 der Schaltfläche kombiniert und in diesem Fall auch die Breite des breitesten untergeordneten Elements. Von der Texteingabe hier und 26 00:01:47,420 --> 00:01:51,940 übrigens hier hat Android einfach nicht richtig aktualisiert, weshalb 27 00:01:51,940 --> 00:02:02,010 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 28 00:02:02,010 --> 00:02:04,320 Sie auf die Ansicht anwenden, in diesem 29 00:02:04,320 --> 00:02:11,670 Fall zu unserem Eingabecontainer-Stil hier, und hier den Flex auf eins setzen. Flex ist eine Eigenschaft, die in Verbindung mit Flexbox verwendet 30 00:02:12,120 --> 00:02:18,270 wird. Wie Sie bereits in diesem Modul erfahren haben, können Sie in dieser zusätzlichen Flexbox-Vorlesung mit 31 00:02:18,480 --> 00:02:25,140 Flex steuern, wie viel Platz Ihre verschiedenen Elemente in einer Flexbox beanspruchen und ob dies das einzige Element 32 00:02:25,140 --> 00:02:26,430 ist stellt einfach 33 00:02:26,430 --> 00:02:29,970 sicher, dass dieser Container den gesamten verfügbaren Platz einnimmt. 34 00:02:29,970 --> 00:02:34,980 Sie können dies auch auf Flex 2 einstellen. Der genaue Wert spielt hier keine Rolle, wenn es das einzige 35 00:02:34,980 --> 00:02:39,570 untergeordnete Element ist. Sie müssen jedoch Flex einstellen, um sicherzustellen, dass der gesamte verfügbare Speicherplatz belegt wird. 36 00:02:39,600 --> 00:02:44,160 Wenn Sie dies nicht tun, nimmt es genauso viel Platz ein wie seine untergeordneten Elemente. Wenn 37 00:02:44,280 --> 00:02:48,850 Sie flex festlegen, nimmt es so viel Platz ein, wie es das übergeordnete Element vorgibt, also 38 00:02:48,900 --> 00:02:50,720 wie das übergeordnete Element dieser Ansicht 39 00:02:50,730 --> 00:02:52,990 das Modal in diesem Fall gibt die Ansicht. 40 00:02:53,340 --> 00:03:00,650 Wenn Sie also Flex One hier hinzufügen, sehen Sie, dass dies jetzt gut zentriert ist, wenn Sie dies jetzt auf iOS speichern. 41 00:03:00,670 --> 00:03:05,860 Um dies auch auf Android zu sehen, können Sie den Task-Umschalter öffnen, diese App hier 42 00:03:06,070 --> 00:03:08,210 schließen und a drücken hier, 43 00:03:08,320 --> 00:03:11,890 um diese App auf Android neu zu starten, mag das 44 00:03:11,890 --> 00:03:19,970 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 45 00:03:20,000 --> 00:03:22,140 dem Eingang, den ich haben möchte, 46 00:03:22,250 --> 00:03:30,530 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 47 00:03:30,530 --> 00:03:35,380 hier wirklich einige Probleme mit meinem Modal. Schließen wir es also und sehen wir, 48 00:03:39,120 --> 00:03:40,430 ob das gut 49 00:03:40,440 --> 00:03:42,000 aussieht. Ja, das ist gut. 50 00:03:42,000 --> 00:03:47,430 Jetzt möchte ich sicherstellen, dass wir, wenn wir hier auf Hinzufügen klicken, das Modal tatsächlich schließen.