1
00:00:02,560 --> 00:00:08,680
Aby wyśrodkować zawartość na środku, możemy użyć techniki, którą już wcześniej

2
00:00:08,710 --> 00:00:11,500
omawiałem, stylizacji, a konkretnie Flexboksa.

3
00:00:11,500 --> 00:00:17,470
Więc w naszym modale mamy ten widok lub w naszym modale mamy ten widok, to jest nasz widok główny, jest

4
00:00:17,500 --> 00:00:19,400
to jedyny element w tym modale,

5
00:00:19,420 --> 00:00:25,090
a następnie ten widok ma oczywiście inne elementy potomne, ale to jest jedyne bezpośrednie dziecko w naszym modale.

6
00:00:25,180 --> 00:00:29,310
Tam mamy styl kontenera wejściowego, który stosujemy i tam, obecnie ustalamy

7
00:00:29,350 --> 00:00:30,490
kierunek wygięcia rzędu.

8
00:00:30,490 --> 00:00:35,170
Oczywiście moglibyśmy to zostawić, ale powiedziałbym, że jeśli pokażemy to na pełnym ekranie w

9
00:00:35,620 --> 00:00:41,230
ten sposób, to właściwie jestem w porządku z orientacją pionową, dzięki czemu mamy wejście, a pod nim przycisk.

10
00:00:41,610 --> 00:00:48,250
Więc zmienię to z powrotem na kolumnę lub ponieważ jest to ustawienie domyślne, po prostu usuń ten

11
00:00:48,250 --> 00:00:52,580
kierunek wygięcia, a teraz chcę wyśrodkować go jednak poziomo i pionowo,

12
00:00:52,810 --> 00:00:59,480
a w tym celu możemy ustawić justowanie zawartości, aby wyśrodkować tutaj i wyrównać elementy, aby wyśrodkować, ale

13
00:00:59,680 --> 00:01:01,690
to samo nie załatwi sprawy.

14
00:01:01,780 --> 00:01:05,710
Możesz zobaczyć, czy otworzysz modal, wciąż jest na górze, a

15
00:01:05,800 --> 00:01:07,920
powodem jest to, że

16
00:01:07,930 --> 00:01:14,080
nasz kontener wejściowy, więc widok, do którego przypisujemy ten styl, domyślnie nie zajmuje całej dostępnej

17
00:01:14,080 --> 00:01:16,720
przestrzeni można uzyskać w widoku otoczenia,

18
00:01:16,720 --> 00:01:22,450
więc w tym przypadku w trybie modalnym. Modalnie teoretycznie zajmuje pełną wysokość i szerokość ekranu,

19
00:01:22,480 --> 00:01:25,480
ale widok po prostu domyślnie nie zajmuje całej dostępnej

20
00:01:25,480 --> 00:01:26,560
przestrzeni, tak

21
00:01:26,560 --> 00:01:28,630
po prostu działa, to ustawienie domyślne.

22
00:01:28,630 --> 00:01:31,900
Zajmuje tylko miejsce, którego potrzebują dzieci, więc wprowadzanie

23
00:01:31,900 --> 00:01:33,590
tekstu i przycisk.

24
00:01:33,730 --> 00:01:38,830
Więc widok zasadniczo łączy wysokość wprowadzania tekstu i przycisku, a

25
00:01:38,980 --> 00:01:47,420
następnie szerokość najszerszego elementu podrzędnego w tym przypadku, tak więc tutaj i przy okazji tutaj Android

26
00:01:47,420 --> 00:01:51,940
po prostu nie zaktualizował się poprawnie, dlatego widzisz

27
00:01:51,940 --> 00:02:02,010
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

28
00:02:02,010 --> 00:02:04,320
do widoku, w tym przypadku naszego

29
00:02:04,320 --> 00:02:11,670
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

30
00:02:12,120 --> 00:02:18,270
Flexboksem i jak nauczyłeś się wcześniej w tym module, w tym dodatkowym wykładzie Flexboksa, flex

31
00:02:18,480 --> 00:02:25,140
pozwala kontrolować, ile miejsca zajmują różne elementy wewnątrz Flexboksa i jeśli jest to jedyny element, to

32
00:02:25,140 --> 00:02:26,430
po prostu

33
00:02:26,430 --> 00:02:29,970
zapewnia, że ten pojemnik zajmie całą dostępną przestrzeń.

34
00:02:29,970 --> 00:02:34,980
Możesz również ustawić to na zgięcie dwa, dokładna wartość nie ma tutaj znaczenia, jeśli jest to jedyne

35
00:02:34,980 --> 00:02:39,570
dziecko, ale musisz ustawić wygięcie, aby upewnić się, że zajmie to pełną dostępną przestrzeń.

36
00:02:39,600 --> 00:02:44,160
Jeśli tego nie zrobisz, zajmie tyle miejsca, co jego elementy potomne, jeśli

37
00:02:44,280 --> 00:02:48,850
ustawisz flex, zajmie tyle miejsca, ile daje element nadrzędny, tak jak element

38
00:02:48,900 --> 00:02:50,720
nadrzędny tego widoku, modal

39
00:02:50,730 --> 00:02:52,990
w tym przypadku daje widok.

40
00:02:53,340 --> 00:03:00,650
Więc po dodaniu Flex One tutaj, jeśli teraz to zapiszesz, na iOS, zobaczysz, że jest to ładnie wyśrodkowane, a

41
00:03:00,670 --> 00:03:05,860
także to na Androidzie, co możesz zrobić, możesz otworzyć przełącznik zadań, zamknąć tę aplikację

42
00:03:06,070 --> 00:03:08,210
tutaj i nacisnąć tutaj, aby

43
00:03:08,320 --> 00:03:11,890
ponownie uruchomić tę aplikację na Androida, nie podoba się

44
00:03:11,890 --> 00:03:19,970
modal, jak się wydaje, a teraz tutaj, również to widzisz. Teraz drobna regulacja to trochę odstępu między przyciskiem a wejściem,

45
00:03:20,000 --> 00:03:22,140
które chcę mieć. W tym celu

46
00:03:22,250 --> 00:03:30,530
przejdę do wejścia i dodam tutaj margines 10 na dole, ale z tego powodu jestem bardzo zadowolony z tego znowu, niestety

47
00:03:30,530 --> 00:03:35,380
Android ma pewne problemy z moim modułem, więc zamknijmy go i zobaczmy, czy

48
00:03:39,120 --> 00:03:40,430
to wygląda

49
00:03:40,440 --> 00:03:42,000
dobrze, tak, to dobrze.

50
00:03:42,000 --> 00:03:47,430
Teraz chcę się upewnić, że kiedy klikniemy tutaj dodaj, faktycznie teraz zamykamy modal.