1
00:00:02,300 --> 00:00:07,270
Aby nadać styl osobnym przedmiotom, ponownie utworzę osobny komponent i

2
00:00:07,350 --> 00:00:11,620
nadam mu nazwę mealitem. js, nazwa jak

3
00:00:11,640 --> 00:00:15,320
zawsze zależy od ciebie, a tam,

4
00:00:15,320 --> 00:00:18,200
wiesz, gra, tworzymy komponent React,

5
00:00:18,440 --> 00:00:25,360
importując React, prawdopodobnie potrzebujemy również widoku, tekstu i arkusza stylów, a może

6
00:00:25,460 --> 00:00:32,610
także innych rzeczy z React Native. Następnie ustawiamy komponent, przedmiot posiłku, w którym otrzymujemy rekwizyty i

7
00:00:32,610 --> 00:00:38,010
gdzie w końcu zwracamy trochę jsx. Skonfiguruj tutaj arkusz stylów, przechowuj go w stałej stylach wraz z

8
00:00:38,010 --> 00:00:46,090
tworzeniem arkusza stylów, do którego przekazujemy obiekt, a na koniec eksportujemy tutaj nasz posiłek jako domyślny plik. Teraz z tym tutaj, w elemencie posiłku, w tym

9
00:00:46,090 --> 00:00:48,100
komponencie, oczywiście musimy zwrócić kod

10
00:00:48,100 --> 00:00:54,040
jsx dla tego elementu posiłku i to jest coś, co otrzymuję z ekranu kategorii

11
00:00:54,040 --> 00:00:55,750
posiłków. Tutaj mam

12
00:00:55,810 --> 00:01:02,260
ten widok z moim tekstem, to w końcu chcę, aby wynik był nieco bardziej skomplikowany, ale wytnę go

13
00:01:02,710 --> 00:01:07,150
i przeniosę na przedmiot posiłku i tam, zwrócę ten widok tutaj, ale

14
00:01:07,150 --> 00:01:12,380
z oczywiście, że nie skończyliśmy z tym. Po pierwsze, powinno to być

15
00:01:12,380 --> 00:01:17,390
również dotykalne, ponieważ możemy wybrać posiłek, możemy wybrać taki przepis, który zostanie

16
00:01:17,390 --> 00:01:21,010
przeniesiony na ekran szczegółów, więc zaimportuję dotykowe krycie.

17
00:01:21,020 --> 00:01:25,910
Teraz, oczywiście, możesz ponownie wprowadzić to rozróżnienie i użyć efektu tętnienia z

18
00:01:25,970 --> 00:01:27,880
dotykową natywną informacją zwrotną

19
00:01:27,920 --> 00:01:35,270
na Androida, jeśli chcesz, pójdę teraz z kryciem dotykowym i zawinę mój widok tutaj z dotykowym kryciem, tak abyśmy

20
00:01:35,420 --> 00:01:44,350
mogli faktycznie dotknij naszego przedmiotu tutaj i onPress, tak naprawdę chcę uruchomić funkcję, której spodziewam się uzyskać w nieruchomości, której jeszcze nie przechodzimy

21
00:01:44,350 --> 00:01:49,000
do pozycji posiłku, ale ponieważ nie korzystamy jeszcze z pozycji posiłku

22
00:01:49,000 --> 00:01:54,460
nigdzie, ale którą zamierzam przekażemy w przyszłości, może nazwiemy to na wybranym posiłku lub

23
00:01:54,460 --> 00:02:00,820
po prostu wybierz, cokolwiek zechcesz, nazwiemy to na SelectSeal i oczekuję, że otrzymam ten rekwizyt na

24
00:02:00,820 --> 00:02:06,950
elemencie posiłku, gdy użyjemy go w jsx. To jest dotykalne nieprzezroczystość, tam

25
00:02:08,790 --> 00:02:16,050
mam mój widok z tytułem i faktycznie ten widok powinien być nieco bardziej złożony.

26
00:02:16,740 --> 00:02:24,150
Chcę mieć widok, taki widok zagnieżdżony, a inny widok poniżej, więc chcę mieć

27
00:02:24,180 --> 00:02:25,530
dwa wiersze.

28
00:02:25,530 --> 00:02:31,060
Zostanie to ustawione jako kolumna, ale te dwa widoki tutaj będą ustawione jako wiersze tutaj.

29
00:02:31,230 --> 00:02:38,280
Pierwszy widok powinien również renderować obraz tła, tak aby tytuł znajdował się przed tym obrazem tła,

30
00:02:38,310 --> 00:02:39,130
drugi

31
00:02:39,180 --> 00:02:44,730
widok, drugi wiersz tutaj powinien renderować pewne szczegóły dotyczące wybranej receptury, takie

32
00:02:44,730 --> 00:02:47,270
jak jej złożoność i czas trwania.

33
00:02:50,190 --> 00:02:55,530
Zacznijmy od tego, zanim później dodamy obraz, w obu tych widokach

34
00:02:55,560 --> 00:03:00,660
dodam zatem właściwość style i wskażę stylowy wiersz posiłku lub

35
00:03:03,050 --> 00:03:08,860
cokolwiek, jak chcesz to nazwać, ponieważ będzie to wiersz w mojej prezentacji

36
00:03:10,030 --> 00:03:18,140
posiłku, a ja Dlatego dodam tam wiersz posiłku i oczywiście ustawię kierunek Flex na wiersz, ponieważ powinny

37
00:03:18,140 --> 00:03:23,150
to być wiersze danych. Teraz, wokół ogólnego przedmiotu,

38
00:03:23,170 --> 00:03:27,290
zawinę inny widok, w którym chcę ustawić

39
00:03:30,050 --> 00:03:34,850
ogólny styl stylów posiłku i posiłku, który również jest

40
00:03:34,850 --> 00:03:40,670
skonfigurowany tutaj w arkuszu stylów i tam chcę nadać każdemu posiłkowi

41
00:03:40,700 --> 00:03:46,940
wysokość z 200 powiedzmy, że każdy element na liście tutaj i szerokość

42
00:03:46,940 --> 00:03:55,390
100%, aby wziąć pełną dostępną szerokość, a także może kolor tła tego szarawego wyglądu tutaj, możemy

43
00:03:55,430 --> 00:04:00,570
zobaczyć, czy chcemy to zachować, na razie będę użyć tego.

44
00:04:00,810 --> 00:04:04,770
Teraz możemy użyć elementu posiłku tutaj i jeszcze z

45
00:04:04,770 --> 00:04:14,560
nim nie skończyliśmy, ale możemy zacząć używać go tutaj na ekranie kategorii posiłków, oczywiście importując go, importując element posiłku z folderu komponentów i tam,

46
00:04:14,560 --> 00:04:25,230
z pliku elementu posiłku a następnie renderuj to tutaj, więc zwróć tutaj przedmiot posiłku w ten sposób i oczywiście musimy teraz przekazać jakieś dane, takie jak

47
00:04:25,230 --> 00:04:32,010
tytuł, który otrzymujemy z itemData. pozycja. tytuł i rekwizyt onSelect, który

48
00:04:32,010 --> 00:04:38,850
spodziewam się dostać do pozycji posiłku, którą w końcu podpinamy do dotykowej propozycji krycia onPress prop,

49
00:04:38,850 --> 00:04:42,840
onSelectMeal, to nazwa, którą wybrałem, to także coś, co

50
00:04:42,840 --> 00:04:44,030
musimy ustawić

51
00:04:44,070 --> 00:04:46,820
tutaj, kiedy używamy posiłku item i

52
00:04:46,830 --> 00:04:51,330
powinno to wskazywać na funkcję, która na razie nic nie robi,

53
00:04:51,330 --> 00:04:55,090
ale która później załaduje stronę ze szczegółami tego posiłku.

54
00:04:55,110 --> 00:05:00,300
Więc teraz otrzymujemy tytuł na tytułowym rekwizycie, stąd element posiłku, tutaj, gdy wypisujemy tytuł, robimy to za

55
00:05:00,300 --> 00:05:01,590
pomocą rekwizytów. tytuł.

56
00:05:01,740 --> 00:05:09,260
Jeśli teraz to uratujemy, powinniśmy być w stanie coś zobaczyć, więc poczekajmy na to, aby ponownie się załadować i tak,

57
00:05:09,260 --> 00:05:10,580
widzimy tutaj nasz

58
00:05:10,580 --> 00:05:16,730
posiłek i na pewno nie jest zbyt piękny, ale przynajmniej widzimy coś więcej niż wcześniej.

59
00:05:16,730 --> 00:05:21,620
Teraz chciałbym mieć trochę odstępów wokół listy, ale wewnątrz odstępu element

60
00:05:21,710 --> 00:05:26,930
listy powinien mieć pełną dostępną szerokość, a nie tylko szerokość najszerszego elementu,

61
00:05:26,930 --> 00:05:28,850
co się aktualnie dzieje.

62
00:05:29,090 --> 00:05:35,800
W tym celu możemy przejść do FlatList i tam dodać właściwość style i ustawić tę szerokość na 100%, aby

63
00:05:35,810 --> 00:05:39,470
upewnić się, że FlatList przyjmuje całą szerokość, jaką może uzyskać.

64
00:05:39,470 --> 00:05:42,020
Dzięki temu powinniśmy wyglądać, jak chcemy tutaj.

65
00:05:42,290 --> 00:05:44,710
Teraz oczywiście rzeczy do posiłku nie są gotowe, nie wyglądają

66
00:05:44,720 --> 00:05:51,380
tak, jak chcę, ale powoli do nich docieramy. Teraz w MealItem. pliku js, wciąż pozostaje

67
00:05:51,380 --> 00:05:53,680
nam jednak trochę do zrobienia, na

68
00:05:53,690 --> 00:05:59,840
przykład ten widok z tytułem będzie później zawierał obraz i dlatego powinien być o wiele

69
00:05:59,840 --> 00:06:03,960
większy niż wiersz poniżej, który później po prostu wyświetli niektóre szczegóły.

70
00:06:05,500 --> 00:06:18,310
Stąd tutaj połączę moje style wierszy posiłku z innym obiektem stylu, więc ze stylem ustawionym w innym obiekcie arkusza stylów, który nazwiję

71
00:06:18,350 --> 00:06:26,530
nagłówek posiłku lub cokolwiek, co chcesz nazwać i tak samo tam na marginesie dla

72
00:06:26,530 --> 00:06:29,090
szczegółów na koniec połączę to

73
00:06:29,110 --> 00:06:36,920
ze szczegółami stylów posiłków, dzięki czemu połączyliśmy style i zacznijmy od nagłówka posiłku, który

74
00:06:36,920 --> 00:06:39,470
możemy ustawić tutaj.

75
00:06:39,470 --> 00:06:47,090
Nagłówek posiłku na końcu pomieści obraz, a także tytuł i chcę, aby jego

76
00:06:47,410 --> 00:06:49,580
wysokość wynosiła 80%

77
00:06:49,580 --> 00:06:59,550
dostępnej wysokości, więc powinna być bardzo bardzo duża. Szczegóły posiłku automatycznie otrzymają pozostałe 20%, oczywiście i aby zobaczyć,

78
00:06:59,550 --> 00:07:07,470
czy to działa, wyślijmy kilka szczegółów tutaj, więc w tym widoku tutaj, w tym rzędzie poniżej naszego

79
00:07:07,470 --> 00:07:10,020
wiersza tytułowego, chcę też mieć

80
00:07:10,020 --> 00:07:13,420
jakiś tekst tu i tam I Wyprowadzę,

81
00:07:13,440 --> 00:07:21,920
powiedzmy, czas trwania rekwizytów, a następnie m później, przez minuty, ponieważ m czas trwania będzie liczbą, którą traktujemy

82
00:07:21,920 --> 00:07:23,330
jako minuty.

83
00:07:23,330 --> 00:07:27,740
Musimy tylko przejść czas trwania z ekranu kategorii posiłków, więc

84
00:07:27,740 --> 00:07:33,140
kiedy używamy przedmiotu posiłku, oprócz podania tytułu, ustawię rekwizyt czasu trwania, ponieważ teraz oczekujemy

85
00:07:33,140 --> 00:07:34,940
tego na elemencie posiłku.

86
00:07:34,940 --> 00:07:40,700
Otrzymujemy to z itemData. przedmiot, który jest naszym posiłkiem, i tam będziemy

87
00:07:40,760 --> 00:07:45,630
mieli właściwość czasu trwania, ponieważ nasze posiłki zdefiniowane w tym modelu mają właściwość czasu trwania

88
00:07:45,800 --> 00:07:50,690
i rzeczywiście, jeśli spojrzysz na dane manekina, tutaj jest twój czas trwania, który jest podawany .

89
00:07:54,760 --> 00:07:56,560
Jeśli to uratujemy,

90
00:07:56,560 --> 00:08:06,850
teraz widzimy tam swój czas trwania i faktycznie możemy tutaj zmienić tę wysokość nawet na 90%, powinna być wyższa niż

91
00:08:06,910 --> 00:08:09,420
tutaj, co wygląda lepiej i

92
00:08:09,430 --> 00:08:10,630
oczywiście

93
00:08:10,750 --> 00:08:14,830
możesz z tym eksperymentować. W wierszu ze

94
00:08:14,830 --> 00:08:22,680
szczegółami posiłku chcę też wstawić poziome wypełnienie, więc po lewej i prawej stronie powiedzmy 10

95
00:08:22,690 --> 00:08:32,650
i uzasadnij moją treść tutaj odstępem między, pamiętaj, że to wiersz, więc uzasadni to poziomo, tak że gdy będziemy mieli

96
00:08:32,650 --> 00:08:35,690
wiele przedmiotów, będą tam ładnie dystrybuowane.

97
00:08:35,740 --> 00:08:45,740
Mamy więc 20 minut, wypiszmy tam więcej informacji, dodając kolejny tekst,

98
00:08:45,900 --> 00:08:47,030
i

99
00:08:47,030 --> 00:08:53,140
tam, wypowiedzmy złożoność, więc tutaj wypiszę złożoność,

100
00:08:53,140 --> 00:09:01,950
a następnie wyślemy przystępność. Teraz musimy również przekazać te dane podczas tworzenia naszego posiłku.

101
00:09:01,990 --> 00:09:06,460
Tutaj oprócz czasu trwania mijamy złożoność,

102
00:09:06,460 --> 00:09:16,420
którą tu otrzymujemy, itemData. pozycja. złożoność i przystępność cenowa, to oczywiście

103
00:09:16,430 --> 00:09:18,530
itemData. pozycja. przystępność cenowa,

104
00:09:18,740 --> 00:09:28,910
i tak, a jeśli to zapiszemy i pozwolimy na ponowne renderowanie, teraz widzimy ten wynik tutaj. Wciąż niezbyt piękne i zdecydowanie możemy to

105
00:09:29,000 --> 00:09:37,390
poprawić, ale dobry początek. Teraz proste i niedrogie lub nasza złożoność i przystępność

106
00:09:37,390 --> 00:09:45,000
cenowa, które powinny być nieco inaczej zaprojektowane. Wiemy, że będzie to tekst i dlatego

107
00:09:45,000 --> 00:09:51,680
mogę korzystać z niektórych funkcji JavaScript lub metod, które mamy dostępne na ciągach, po

108
00:09:51,770 --> 00:09:59,930
prostu użyję toUppercase, aby przekonwertować go na wielkie litery całkowicie w ten sposób, a teraz powinno to

109
00:09:59,930 --> 00:10:06,590
już wyglądać nieco ładniej niż wcześniej. Teraz możesz jeszcze ulepszyć stylizację tutaj, na razie pójdę z

110
00:10:06,620 --> 00:10:09,440
tą stylizacją i dodajmy teraz obraz tła powyżej.

111
00:10:09,440 --> 00:10:16,370
W tym celu chcieliśmy obrazu tła za tym tekstem tytułu i na szczęście React Native sprawia, że

112
00:10:16,370 --> 00:10:23,930
dodanie takiego obrazu tła jest naprawdę bardzo proste. React Native dostarcza z wbudowanym komponentem, komponentem tła

113
00:10:23,990 --> 00:10:29,690
obrazu, którego możemy użyć do renderowania obrazu w tle, tak jak można

114
00:10:29,690 --> 00:10:36,020
by to sobie wyobrazić po nazwie. Dodajesz go obok komponentu, za którym chcesz go dodać, i dodajesz go przed tym

115
00:10:36,020 --> 00:10:43,520
komponentem, więc tutaj dodaję tło obrazu i na tle obrazu, tak jak na normalnym obrazie, ustawiasz źródło. Tutaj moim źródłem jest obraz internetowy, więc przekazujemy obiekt, jeśli

116
00:10:43,520 --> 00:10:49,220
byłby to obraz lokalny, użyłbyś wymagania i czego nauczyłeś się o obrazach lokalnych wcześniej, ale

117
00:10:49,220 --> 00:10:54,380
tutaj jest to obraz internetowy, więc przekazujemy obiekt z rekwizytem URI i tam

118
00:10:54,380 --> 00:11:00,560
używamy obrazu rekwizytów, gdzie spodziewam się uzyskać ten adres URL w tym komponencie, więc oczywiście musimy

119
00:11:00,560 --> 00:11:07,370
upewnić się, że podamy adres URL tego rekwizytu. Dodam też trochę

120
00:11:07,370 --> 00:11:15,000
stylizacji i będą to style. bg Obraz, który teraz dodamy do arkusza stylów tam, gdziekolwiek

121
00:11:15,720 --> 00:11:22,110
chcesz, może tutaj, nie ma tak naprawdę znaczenia. Ważną rzeczą jest tutaj ustawienie szerokości

122
00:11:22,110 --> 00:11:27,060
i wysokości, ponieważ jest to obraz z Internetu, a ja wykorzystam je

123
00:11:27,060 --> 00:11:36,350
w 100% dla obu, ponieważ powinien on wypełnić całą dostępną przestrzeń. Teraz musimy tylko upewnić się, że przekazujemy tę propozycję obrazu tutaj na ekranie kategorii

124
00:11:36,440 --> 00:11:45,560
posiłków, więc oprócz tytułu chcę tutaj również przekazać itemData. pozycja. imageUrl to jego nazwa, widać to w modelu,

125
00:11:45,560 --> 00:11:51,020
imageUrl, więc to właśnie przekazujemy i przekazujemy to do podpory obrazu, ponieważ tego właśnie oczekujemy

126
00:11:51,020 --> 00:11:56,960
i co ustawiamy tutaj w posiłku pozycja. A jeśli teraz to zapiszesz i pomieszajmy

127
00:11:56,970 --> 00:12:02,910
i przetestujmy to na Androidzie, ładowanie zajmuje trochę więcej czasu, dlatego zwykle używam tutaj iOS,

128
00:12:03,000 --> 00:12:10,410
ale teraz, jeśli to przetestujemy, zobaczymy tutaj naszego burgera. To, czego już

129
00:12:10,410 --> 00:12:19,010
nie widzimy, to nasz tytuł. Aby ponownie wyświetlić tytuł, upewnij się, że

130
00:12:19,010 --> 00:12:27,480
faktycznie otaczasz tło obrazu, w ten sposób mówisz React Native, która zawartość powinna znajdować

131
00:12:27,480 --> 00:12:34,320
się nad tym obrazem tła. Więc teraz, oto nasz tytuł, nie tak łatwy do odczytania i naprawimy to, ale znowu tam jest.

132
00:12:35,480 --> 00:12:41,050
Więc zaczynamy od tego przepisu tutaj, teraz upewnijmy się, że tytuł

133
00:12:41,050 --> 00:12:50,760
jest nieco łatwiejszy, nadając mu styl tutaj, tytuł stylów, który możemy teraz tam ustawić i chcę ustawić rodzinę czcionek otwartych

134
00:12:50,850 --> 00:12:52,210
bez pogrubienia,

135
00:12:52,220 --> 00:12:55,490
ma sens, ponieważ rejestrujemy tę czcionkę.

136
00:12:55,590 --> 00:12:59,380
Podaj rozmiar czcionki, który nieco zwiększymy, może 22, możesz

137
00:12:59,400 --> 00:13:01,310
oczywiście się tym pobawić.

138
00:13:01,440 --> 00:13:07,380
Nadaj mu kolor biały, aby był nieco łatwiejszy do odczytania, a także przypisz kolor tła, abyśmy zawsze

139
00:13:07,380 --> 00:13:10,600
mogli go zobaczyć, nawet jeśli obraz tła byłby biały,

140
00:13:10,620 --> 00:13:16,800
w takim przypadku biały tekst byłby trudny do odczytania, podając jest to kolor RGBA, który ma kolor,

141
00:13:16,800 --> 00:13:22,380
który ma wbudowaną przezroczystość, że tak powiem, a jest to po prostu czarny kolor, który

142
00:13:25,490 --> 00:13:28,400
jest nieco przezroczysty, a teraz również dodaj

143
00:13:28,390 --> 00:13:35,000
trochę wypełnienia, wypełnienie pionowe pięciu powinno wyglądać dobrze, aby kolorowe tło w tle nie znajduje się dokładnie na krawędziach

144
00:13:35,000 --> 00:13:42,950
tekstu wewnątrz pudełka, a wypełnienie może być ustawione poziomo na 12. Dzięki temu powinniśmy zawsze widzieć

145
00:13:42,950 --> 00:13:48,540
nasz tytuł i faktycznie możemy tutaj zwiększyć tę

146
00:13:48,560 --> 00:13:51,790
przezroczystość, zmniejszyć krycie, tak,

147
00:13:51,890 --> 00:13:53,630
jak

148
00:13:59,550 --> 00:14:06,420
sądzę, wygląda to trochę ładniej. I jedyne, co chcę teraz zrobić, to przesunąć

149
00:14:06,420 --> 00:14:10,250
ten tytuł w dół na dole tego obrazu,

150
00:14:12,450 --> 00:14:23,230
a zatem w stylu bgImage, który tu mam, ustawię justowanie zawartości, aby wygasła, ponieważ obraz tła automatycznie działa jako Flexbox, że tak powiem, jak

151
00:14:23,230 --> 00:14:27,970
widok, dzięki czemu możemy uzasadnić naszą zawartość, a teraz mamy

152
00:14:27,970 --> 00:14:30,400
ten tytuł na dole.

153
00:14:30,430 --> 00:14:39,460
Moglibyśmy teraz wyśrodkować tekst, przechodząc do tytułu tutaj i dodając wyrównywanie tekstu do środka, a jeśli jest zbyt długi,

154
00:14:39,580 --> 00:14:42,210
zbyt duży, oprócz oczywiście

155
00:14:42,310 --> 00:14:46,400
zmniejszenia rozmiaru czcionki, co zrobię trochę do 20, oczywiście

156
00:14:46,420 --> 00:14:53,080
możesz przejdź do tego tekstu, w którym podajesz tytuł, i ustaw liczbę wierszy na

157
00:14:53,080 --> 00:14:55,870
1, a to zapewni automatyczne skrócenie

158
00:14:55,870 --> 00:15:06,780
tekstu, jeśli jest zbyt duży, jak w przypadku sałatki z pomidorami koktajlowymi. Widzimy również dziwny efekt tutaj na iOS,

159
00:15:06,880 --> 00:15:15,150
gdzie mamy dodatkowe tło za tekstem, a nie tylko kolorowe pole w tle.

160
00:15:15,160 --> 00:15:22,880
To dlatego, że zastosowałem kolor tła i tak dalej, bezpośrednio na tekście, aby to naprawić, możemy wyciąć go z

161
00:15:22,880 --> 00:15:29,510
tytułu tutaj i tylko ustawić kolor itd. I zamiast tego dodać kontener tytułu tutaj, gdzie dodajemy

162
00:15:29,540 --> 00:15:37,100
ten kolor tła i tak dalej i owiń ten kontener wokół naszego tytułu, więc dodamy tutaj dodatkowy widok,

163
00:15:37,120 --> 00:15:42,580
a w React Native jest całkiem normalne, że zagnieżdżamy wiele takich widoków, a

164
00:15:42,580 --> 00:15:51,580
na tym widoku możemy teraz dodać styl, styl kontenera tytułu i jeśli to zapiszemy, powinniśmy pozbyć się tego dziwnego zachowania na iOS,

165
00:15:51,580 --> 00:15:52,860
tak, teraz

166
00:15:52,900 --> 00:15:55,590
nie mamy tego dodatkowego pola, zamiast

167
00:15:55,600 --> 00:16:00,380
tego mamy tylko jeden kolor tła i to samo na Androidzie.

168
00:16:00,520 --> 00:16:04,270
Więc teraz nie wygląda to tak źle, ale nie jestem

169
00:16:04,270 --> 00:16:10,480
do końca szczęśliwy, chciałbym również wyśrodkować tutaj moje szczegóły pionowo i dać trochę więcej miejsca, jak sądzę,

170
00:16:10,480 --> 00:16:17,560
i za to możemy dać nagłówek może 85% wysokości i szczegółów posiłku tutaj, pamiętaj, że naszym kierunkiem elastyczności jest

171
00:16:17,560 --> 00:16:23,650
rząd, ponieważ łączymy tutaj rząd posiłku i szczegół posiłku, a zatem nasza oś poprzeczna jest od

172
00:16:23,670 --> 00:16:26,080
góry do dołu, więc jeśli

173
00:16:26,080 --> 00:16:30,540
chcemy wyśrodkować w pionie, to znaczy oś poprzeczna, na której musimy wyśrodkować.

174
00:16:30,550 --> 00:16:37,540
Więc tutaj możemy ustawić wyrównywanie elementów, które ustawiają pozycjonowanie osi poprzecznej na środek,

175
00:16:37,540 --> 00:16:43,280
a także zmienić tutaj kolor na nieco ładniejszy kolor, ten

176
00:16:43,510 --> 00:16:49,170
bardzo jasny szary # f5f5f5 może wyglądać nieco lepiej, tak,

177
00:16:49,300 --> 00:16:50,800
zdecydowanie .

178
00:16:50,800 --> 00:16:56,610
Teraz, aby upewnić się, że naprawdę wyśrodkowujemy w pionie, musimy bardziej precyzyjnie określić

179
00:16:56,650 --> 00:16:58,660
wysokość, jaką powinny przyjmować

180
00:17:03,480 --> 00:17:09,590
nasze szczegóły posiłku, bierzemy 85% na nagłówek, więc tutaj, na szczegółach, możemy oczywiście ustawić

181
00:17:09,600 --> 00:17:17,230
wysokość 15% jeśli chodzi o resztę, tak i powiedziałbym, że tutaj wygląda to całkiem przyzwoicie, na pewno

182
00:17:17,420 --> 00:17:20,620
wypisz elementy, z którymi możemy tu pracować.

183
00:17:20,630 --> 00:17:25,670
Dodam teraz trochę promienia granicy, ponieważ wiesz, że lubię promienie

184
00:17:25,670 --> 00:17:33,500
granicy, więc dodam tutaj promień granicy 10, abyśmy mieli zaokrąglone rogi, a jeśli wrócisz, my ' już

185
00:17:33,500 --> 00:17:38,820
prawie tam jest, ale zauważysz, że obraz faktycznie nie przestrzega promienia granicy.

186
00:17:38,870 --> 00:17:46,780
Teraz, aby to naprawić, na elemencie posiłku musimy po prostu powiedzieć, że przepełnienie jest ukryte, aby żaden element podrzędny nie mógł wyjść poza

187
00:17:46,780 --> 00:17:49,130
to miejsce lub ten kształt, który tutaj

188
00:17:49,130 --> 00:17:49,910
budujemy.

189
00:17:53,550 --> 00:17:56,880
I z tym to początek, coś, z czym możemy

190
00:17:56,880 --> 00:18:02,070
pracować, teraz oczywiście chcemy się upewnić, że kiedy dotkniemy takiego elementu, faktycznie przejdziemy do strony szczegółów.