1
00:00:02,460 --> 00:00:06,390
Oczywiście ten ekran nie jest teraz tak przydatny,

2
00:00:06,390 --> 00:00:13,500
dlatego przejdę do tekstu, którego użyłem jako manekina, i zastąpię go powiedzmy, zacznijmy nową grę, coś

3
00:00:13,500 --> 00:00:21,480
takiego, a poniżej tego chcę mieć obszar wejściowy z lekkim cieniem, więc ten typowy wygląd karty możesz znać

4
00:00:21,540 --> 00:00:27,420
z niektórych aplikacji i stron internetowych, w których masz pudełko z lekkim cieniem,

5
00:00:27,420 --> 00:00:29,220
może zaokrąglonymi narożnikami.

6
00:00:29,400 --> 00:00:36,570
Chcę to odtworzyć tutaj, więc dodam tutaj widok, widok, ponieważ znowu jest to bardzo elastyczny element, możemy zastosować

7
00:00:36,600 --> 00:00:42,120
tam wiele stylów, możemy dodać nasz cień i zaokrąglone rogi, a następnie przytrzymać

8
00:00:42,150 --> 00:00:43,460
zawartość w

9
00:00:43,470 --> 00:00:49,080
tym widoku, więc świetnie nadaje się do ogólnej stylizacji kontenera, a teraz wewnątrz tego

10
00:00:49,080 --> 00:00:56,910
widoku, chcę mieć tekst, w którym mówimy, na przykład, wybierz liczbę, a następnie chcemy również mieć pole tekstowe, w którym

11
00:00:57,150 --> 00:00:58,580
użytkownicy może coś wprowadzić.

12
00:00:58,590 --> 00:00:59,310
Dodam

13
00:00:59,430 --> 00:01:06,300
więc komponent do wprowadzania tekstu, który jest wbudowanym komponentem, w którym użytkownicy mogą wprowadzać wartość za

14
00:01:06,300 --> 00:01:11,970
pomocą klawiatury i tutaj powinni wprowadzić liczbę. Skonfigurujemy to i nadamy temu styl za

15
00:01:11,970 --> 00:01:17,820
sekundę, na razie po prostu wrzucę to w ten sposób, a poniżej tego chcę, aby

16
00:01:17,850 --> 00:01:18,810
dwa przyciski

17
00:01:18,810 --> 00:01:25,190
siedziały obok siebie, a to ważne, obok siebie, a nie poniżej siebie inne, które pozwalają nam

18
00:01:25,190 --> 00:01:32,510
zresetować dane wejściowe i wybrać nowe lub potwierdzić wybrane. Potrzebujemy więc tutaj widoku, ponieważ pozwala nam to pozycjonować elementy obok

19
00:01:32,660 --> 00:01:37,520
siebie, podczas gdy te elementy są umieszczone nad sobą, ponieważ gdybym po prostu dodał tutaj

20
00:01:37,560 --> 00:01:42,650
dwa przyciski, musiałbym zmienić kierunek elastycznego widoku, aby były obok do siebie, ale wtedy tekst i

21
00:01:42,680 --> 00:01:45,420
wprowadzanie tekstu również będą siedzieć obok siebie.

22
00:01:45,500 --> 00:01:51,950
Więc teraz dodam tutaj widok, aby w tym widoku widok otaczający, ten, ten i ten komponent widoku

23
00:01:52,250 --> 00:01:54,010
znajdowały się nad sobą,

24
00:01:54,020 --> 00:02:00,590
więc na osi pionowej, ale wewnątrz tego widoku, mogę teraz również upewnić się, że przedmioty tam leżą

25
00:02:00,590 --> 00:02:05,270
następnie obok siebie, więc w osi poziomej i właśnie tego chcę tutaj.

26
00:02:05,450 --> 00:02:11,480
Zaimportuję więc wbudowany przycisk, który jest jednym z komponentów widoku, który automatycznie dostosowuje się

27
00:02:11,510 --> 00:02:17,540
do platformy bazowej, później w osobnym module dowiesz się, jak ręcznie dowiedzieć się,

28
00:02:17,630 --> 00:02:21,990
na której platformie działasz, aby dostosować wygląd Twojej aplikacji.

29
00:02:22,220 --> 00:02:29,450
Tutaj pójdziemy z wbudowanym przyciskiem i nadamy pierwszemu tytuł resetowania, a drugi, drugi przycisk tutaj tytuł

30
00:02:29,510 --> 00:02:32,450
potwierdzenia, a następnie tutaj, onPress w tej

31
00:02:32,450 --> 00:02:39,740
chwili nic nie zrobi, więc to tylko pusta funkcja, po prostu dodając ją, abyśmy mieli już

32
00:02:39,740 --> 00:02:42,000
prop, dodamy logikę później i

33
00:02:42,050 --> 00:02:43,710
na razie

34
00:02:43,850 --> 00:02:46,140
będziemy mieć tutaj tylko przyciski.

35
00:02:46,250 --> 00:02:51,330
Teraz jednak stylizacji będzie brakować, jak powiedziałem, przycisk powinien znajdować się obok siebie.

36
00:02:51,410 --> 00:02:57,170
Dlatego przedstawię tutaj ten widok, w którym przyciski mają styl wskazujący na

37
00:02:57,170 --> 00:02:59,060
obiekt stylów, a

38
00:02:59,060 --> 00:03:02,370
tam, powiedzmy, pojemnik na guziki, ta nazwa

39
00:03:02,520 --> 00:03:10,930
jak zawsze zależy wyłącznie od Ciebie, a także chcę nadać temu widokowi, który przechowuje moje dane wejściowe styl tutaj,

40
00:03:10,960 --> 00:03:14,930
odnosząc się do obiektu styles i użyję powiedzmy

41
00:03:15,040 --> 00:03:20,850
kontenera wejściowego, ta nazwa oczywiście także zależy od ciebie i tutaj, chcę nadać

42
00:03:20,950 --> 00:03:27,090
temu stylowi specjalny tytuł, może z większym rozmiarem czcionki, więc tutaj przypiszę styl powiedzmy.

43
00:03:27,300 --> 00:03:36,900
Teraz możemy przejść do naszego arkusza stylów i dodać tytuł, dodać kontener wejściowy, a także dodać kontener przycisków, a teraz

44
00:03:37,080 --> 00:03:43,330
możemy zacząć dodawać tam niektóre style. Teraz, jeśli chodzi o tytuł, znowu

45
00:03:43,330 --> 00:03:47,330
chcę ustawić rozmiar czcionki, więc ustawię rozmiar czcionki

46
00:03:47,410 --> 00:03:58,750
w ten sposób, ustawmy na przykład 20, a może także dodam trochę odstępów na osi pionowej z marginesem pionowym, powiedzmy 10, 10 jak

47
00:03:58,750 --> 00:04:09,750
to i zawsze należy pamiętać, margines w pionie zasadniczo zastępuje dolny margines i górny margines, a teraz na pojemniku z guzikiem, a

48
00:04:09,990 --> 00:04:17,050
ja wrócę do pojemnika wejściowego za sekundę, pojemnik z guzikiem otrzyma elastyczny kierunek rzędu,

49
00:04:17,060 --> 00:04:19,780
domyślnie kolumna, ale teraz

50
00:04:19,790 --> 00:04:23,790
chcę, aby przedmioty stały obok siebie, więc musimy

51
00:04:23,790 --> 00:04:25,870
użyć wiersza tutaj.

52
00:04:25,870 --> 00:04:31,420
Chcę tu ustawić szerokość, ponieważ jeśli nie ustawimy szerokości kontenera przycisków, będzie on tak

53
00:04:31,450 --> 00:04:34,960
szeroki, jak oba przyciski są razem, zamiast tego chcę

54
00:04:34,960 --> 00:04:41,050
użyć szerokości elementu nadrzędnego, więc w tym widoku tutaj a następnie umieść przyciski wewnątrz tego widoku,

55
00:04:41,050 --> 00:04:41,880
więc chcę

56
00:04:41,890 --> 00:04:47,140
zrobić odwrotnie, nie stylizuj widoku zgodnie z przyciskami, ale ustaw przyciski zgodnie z

57
00:04:47,140 --> 00:04:47,970
widokiem.

58
00:04:48,160 --> 00:04:55,150
Więc dam pojemnikowi przycisków ten widok i wyraźną szerokość tu i teraz, aby umieścić tam przyciski, możemy użyć justifyContent,

59
00:04:55,150 --> 00:04:55,590
aby

60
00:04:55,690 --> 00:05:01,630
ustawić je wzdłuż głównej osi, która dla rzędu kierunku wygięcia jest od lewej do prawej

61
00:05:01,630 --> 00:05:07,930
i tam wybiorę spację pomiędzy tak, aby przyciski znajdowały się na lewej i prawej krawędzi tego

62
00:05:07,930 --> 00:05:15,000
rzędu i rozdzieliły między nimi całą dostępną wolną przestrzeń. Dodaj też trochę paddingu poziomego, abyśmy mieli trochę odstępu

63
00:05:15,000 --> 00:05:21,660
po lewej i prawej stronie naszego widoku, może 15, aby przyciski nie znajdowały się bezpośrednio na krawędziach po

64
00:05:21,660 --> 00:05:24,920
lewej i prawej stronie, ale jest trochę odstępy

65
00:05:25,020 --> 00:05:29,420
po lewej i prawej stronie. Okej, więc jeśli

66
00:05:29,560 --> 00:05:35,240
to uratujemy, zobaczymy to, czego o tobie nie wiem,

67
00:05:35,660 --> 00:05:39,860
ale co nie wygląda tak dobrze, prawda?

68
00:05:39,860 --> 00:05:45,650
Problem polega na tym, że kontener wejściowy nie ma jeszcze stylów. Kontener wejściowy zawiera jednak wszystkie dane wejściowe,

69
00:05:45,650 --> 00:05:48,340
dlatego stylizacje tam wyglądają nieco inaczej.

70
00:05:49,040 --> 00:05:56,000
Powinniśmy więc nadać kontenerowi wejściowemu trochę stylu i tam, chcę dodać szerokość, a teraz

71
00:05:56,090 --> 00:06:02,690
możesz użyć zakodowanej szerokości, powiedzmy 300 pikseli, lub użyć szerokości i wartości procentowej.

72
00:06:02,990 --> 00:06:11,570
Teraz dodam tutaj szerokość 300, ale również dodam maksymalną szerokość 80%, tak abyśmy mieli 300 pikseli szerokości, ale jeśli urządzenie byłoby zbyt

73
00:06:11,570 --> 00:06:17,120
małe, to jest trochę responsywności, którą już tu dodam, jeśli urządzenie byłoby zbyt małe, upewniamy

74
00:06:17,120 --> 00:06:23,300
się, że nasza szerokość nie przekracza 80%. A następnie chcę wyrównać elementy na

75
00:06:23,300 --> 00:06:25,840
środku, pamiętaj, że pojemnik

76
00:06:25,850 --> 00:06:29,600
wejściowy jest widokiem, dlatego używa Flexbox, używa domyślnej

77
00:06:29,600 --> 00:06:35,420
kolumny kierunku wygięcia, a zatem w przypadku wyrównywania środka przedmiotów, pozycjonujemy elementy na

78
00:06:35,630 --> 00:06:39,240
środku na osi poprzecznej, która jest od lewej

79
00:06:39,260 --> 00:06:44,500
do prawej, więc elementy centrujemy poziomo. Teraz, dzięki temu wygląda to znacznie lepiej, nie

80
00:06:44,500 --> 00:06:46,140
możemy tak naprawdę zobaczyć

81
00:06:46,180 --> 00:06:48,780
danych wejściowych, ale to jest stare, prawda?

82
00:06:48,970 --> 00:06:53,710
Będziemy musieli go stylizować, abyśmy mogli go naprawdę zobaczyć. Widzimy jednak przyciski i widzimy,

83
00:06:53,710 --> 00:06:57,710
że nasz ogólny układ i styl nabiera pewnego kształtu.

84
00:06:58,090 --> 00:07:01,440
Mimo to nie jestem jeszcze w 100% zadowolony z tego wyglądu.