Aby wyśrodkować zawartość na środku, możemy użyć techniki, którą już wcześniej
omawiałem, stylizacji, a konkretnie Flexboksa.
Więc w naszym modale mamy ten widok lub w naszym modale mamy ten widok, to jest nasz widok główny, jest
to jedyny element w tym modale,
a następnie ten widok ma oczywiście inne elementy potomne, ale to jest jedyne bezpośrednie dziecko w naszym modale.
Tam mamy styl kontenera wejściowego, który stosujemy i tam, obecnie ustalamy
kierunek wygięcia rzędu.
Oczywiście moglibyśmy to zostawić, ale powiedziałbym, że jeśli pokażemy to na pełnym ekranie w
ten sposób, to właściwie jestem w porządku z orientacją pionową, dzięki czemu mamy wejście, a pod nim przycisk.
Więc zmienię to z powrotem na kolumnę lub ponieważ jest to ustawienie domyślne, po prostu usuń ten
kierunek wygięcia, a teraz chcę wyśrodkować go jednak poziomo i pionowo,
a w tym celu możemy ustawić justowanie zawartości, aby wyśrodkować tutaj i wyrównać elementy, aby wyśrodkować, ale
to samo nie załatwi sprawy.
Możesz zobaczyć, czy otworzysz modal, wciąż jest na górze, a
powodem jest to, że
nasz kontener wejściowy, więc widok, do którego przypisujemy ten styl, domyślnie nie zajmuje całej dostępnej
przestrzeni można uzyskać w widoku otoczenia,
więc w tym przypadku w trybie modalnym. Modalnie teoretycznie zajmuje pełną wysokość i szerokość ekranu,
ale widok po prostu domyślnie nie zajmuje całej dostępnej
przestrzeni, tak
po prostu działa, to ustawienie domyślne.
Zajmuje tylko miejsce, którego potrzebują dzieci, więc wprowadzanie
tekstu i przycisk.
Więc widok zasadniczo łączy wysokość wprowadzania tekstu i przycisku, a
następnie szerokość najszerszego elementu podrzędnego w tym przypadku, tak więc tutaj i przy okazji tutaj Android
po prostu nie zaktualizował się poprawnie, dlatego widzisz
to dziwne wyjście tutaj, na razie możesz to zignorować. Aby widok zajmował tutaj pełną dostępną przestrzeń, możesz po prostu przejść do stylu zastosowanego
do widoku, w tym przypadku naszego
stylu kontenera wejściowego tutaj i ustawić flex na jeden tutaj. Flex jest właściwością, która jest używana w połączeniu z
Flexboksem i jak nauczyłeś się wcześniej w tym module, w tym dodatkowym wykładzie Flexboksa, flex
pozwala kontrolować, ile miejsca zajmują różne elementy wewnątrz Flexboksa i jeśli jest to jedyny element, to
po prostu
zapewnia, że ten pojemnik zajmie całą dostępną przestrzeń.
Możesz również ustawić to na zgięcie dwa, dokładna wartość nie ma tutaj znaczenia, jeśli jest to jedyne
dziecko, ale musisz ustawić wygięcie, aby upewnić się, że zajmie to pełną dostępną przestrzeń.
Jeśli tego nie zrobisz, zajmie tyle miejsca, co jego elementy potomne, jeśli
ustawisz flex, zajmie tyle miejsca, ile daje element nadrzędny, tak jak element
nadrzędny tego widoku, modal
w tym przypadku daje widok.
Więc po dodaniu Flex One tutaj, jeśli teraz to zapiszesz, na iOS, zobaczysz, że jest to ładnie wyśrodkowane, a
także to na Androidzie, co możesz zrobić, możesz otworzyć przełącznik zadań, zamknąć tę aplikację
tutaj i nacisnąć tutaj, aby
ponownie uruchomić tę aplikację na Androida, nie podoba się
modal, jak się wydaje, a teraz tutaj, również to widzisz. Teraz drobna regulacja to trochę odstępu między przyciskiem a wejściem,
które chcę mieć. W tym celu
przejdę do wejścia i dodam tutaj margines 10 na dole, ale z tego powodu jestem bardzo zadowolony z tego znowu, niestety
Android ma pewne problemy z moim modułem, więc zamknijmy go i zobaczmy, czy
to wygląda
dobrze, tak, to dobrze.
Teraz chcę się upewnić, że kiedy klikniemy tutaj dodaj, faktycznie teraz zamykamy modal.