1
00:00:02,180 --> 00:00:07,440
Na ekranie szczegółów produktu zaczęliśmy już nad tym pracować, ale tak naprawdę nie

2
00:00:07,850 --> 00:00:10,240
wydajemy nic przydatnego, teraz nadszedł czas,

3
00:00:10,250 --> 00:00:11,600
aby to zmienić.

4
00:00:11,690 --> 00:00:17,570
W tym celu zastąpię obecnie używany kod jsx widokiem przewijania, ponieważ, jak wspomniałem wcześniej, wyświetlimy

5
00:00:17,570 --> 00:00:19,790
tam nasz obraz, opis naszego

6
00:00:19,790 --> 00:00:23,510
produktu, a może to być bardzo długi opis lub

7
00:00:23,510 --> 00:00:25,790
po prostu oglądając to na mniejszym

8
00:00:25,850 --> 00:00:28,410
urządzeniu lub w trybie poziomym, więc

9
00:00:28,640 --> 00:00:33,020
zdecydowanie chcemy mieć tam przewijalną zawartość, a przy okazji nie potrzebujemy

10
00:00:33,100 --> 00:00:36,420
tutaj płaskiej listy, ponieważ zawartość nie będzie nieskończenie

11
00:00:36,440 --> 00:00:42,020
długa, wiemy dość, że nie będzie bądź z dużym wyprzedzeniem, więc widok przewijania jest

12
00:00:42,020 --> 00:00:50,210
całkowicie w porządku, a w tym widoku przewijania możesz teraz dodać komponent obrazu, który wyświetla ten obraz produktu u góry powiedzmy,

13
00:00:50,220 --> 00:01:01,560
a poniżej tego, możemy następnie dodać nasz przycisk, aby pozwolić nam dodaj to do koszyka, a poniżej tego możemy mieć nasz tekst, na przykład wyświetlającą cenę, a następnie może

14
00:01:01,560 --> 00:01:04,260
tekst opisu. Więc dla obrazu musimy

15
00:01:04,270 --> 00:01:08,980
ustawić rekwizyt źródłowy i jest to obiekt, który ma właściwość URI i oczywiście mamy tutaj

16
00:01:09,330 --> 00:01:14,530
nasz wybrany produkt, więc źródło jest właśnie wybraneProdukt. imageUrl, ponieważ wybrany produkt jest

17
00:01:14,620 --> 00:01:20,680
typu zdefiniowanego w naszym modelu produktów. Na przycisku tutaj możemy dodać tytuł dodawania

18
00:01:20,680 --> 00:01:26,530
do koszyka, ponieważ w końcu to powinien zrobić ten przycisk, a onPress na razie nic

19
00:01:26,620 --> 00:01:32,970
nie robi, ale później dodamy go do koszyka. Następnie tutaj chcę podać cenę, nie

20
00:01:33,010 --> 00:01:34,390
musimy podawać

21
00:01:34,390 --> 00:01:37,600
tytułu, ponieważ jest to już część nagłówka,

22
00:01:37,600 --> 00:01:43,630
więc widzimy tam tytuł, ale tutaj chcę podać cenę w dolarach, odnosząc

23
00:01:43,630 --> 00:01:47,810
się do wybranego produktu. cena do stałej 2,

24
00:01:48,100 --> 00:01:50,410
co zrobiłem wcześniej, a następnie

25
00:01:50,410 --> 00:01:56,170
tam też opis, więc tutaj wybraliśmy Produkt. opis, jak ten.

26
00:01:56,200 --> 00:01:56,560
Okej,

27
00:01:56,590 --> 00:01:57,670
więc to wygląda

28
00:01:57,670 --> 00:01:59,380
dobrze, teraz nadszedł czas na stylizację.

29
00:01:59,380 --> 00:02:04,270
Na przykład dla obrazu z pewnością będziemy musieli ustawić szerokość i wysokość, ponieważ

30
00:02:04,270 --> 00:02:09,350
jest to obraz sieciowy, więc tutaj dodam styl obrazu, który muszę dodać do arkusza stylów.

31
00:02:09,460 --> 00:02:15,040
Teraz dla tekstów tutaj, ten tekst powinien mieć styl ceny,

32
00:02:15,580 --> 00:02:24,490
który możemy dodać, a następnie tutaj, ten tekst powinien mieć styl opisu, może brzmieć jak odpowiednia nazwa.

33
00:02:24,490 --> 00:02:31,690
Teraz w arkuszu stylów musimy dodać wszystkie te rzeczy, więc zacznijmy od obrazu.

34
00:02:31,980 --> 00:02:34,580
Tam dodam szerokość 100%, to powinno

35
00:02:34,580 --> 00:02:38,730
naprawdę zająć pełną dostępną szerokość i wysokość 300, i oczywiście

36
00:02:38,740 --> 00:02:40,570
możesz się z tym

37
00:02:40,570 --> 00:02:46,810
bawić, możesz również użyć wartości procentowej lub użyć interfejsu API wymiarów do niejako obliczyć to dynamicznie.

38
00:02:48,000 --> 00:02:52,970
Następnie chcę mieć swoją cenę, ten tekst ceny powinien

39
00:02:53,080 --> 00:03:01,810
mieć czcionkę o wielkości 20, ponieważ ludzie powinni oczywiście być w stanie ją zobaczyć, kolor tego

40
00:03:01,870 --> 00:03:09,670
szarawego, tego ciemnoszarego koloru, którego już użyłem wcześniej, i wyrównanie tekstu do środka tak,

41
00:03:09,670 --> 00:03:11,780
aby zawsze był

42
00:03:11,850 --> 00:03:20,640
wyśrodkowany, a także margines na osi pionowej 20, może więc wokół niego 20, a następnie opis.

43
00:03:21,240 --> 00:03:30,660
Opis może mieć rozmiar czcionki powiedzmy 14, zobaczmy, czy to działa, a tam również użyj środka

44
00:03:30,680 --> 00:03:38,810
wyrównania tekstu, coś w tym stylu. Jeśli to uratujemy, spójrzmy na

45
00:03:38,810 --> 00:03:47,420
to, nie wygląda to tak źle. Teraz dla przycisku chcę ustawić inny kolor, więc dodam tutaj kolor i

46
00:03:47,450 --> 00:03:56,170
ustawię go na kolory, które musimy oczywiście zaimportować z naszego folderu stałych, Kolory. podstawowy, a teraz, jeśli go uratujemy,

47
00:03:56,200 --> 00:04:03,500
wygląda to całkiem ładnie. W Androidzie widać, że przycisk znajduje się bezpośrednio pod obrazem i

48
00:04:03,680 --> 00:04:06,300
że jest to przycisk o pełnej szerokości.

49
00:04:06,320 --> 00:04:07,900
Tak samo jest na iOS, tam

50
00:04:07,910 --> 00:04:08,830
po prostu tego

51
00:04:08,840 --> 00:04:13,940
nie widzimy, ale jeśli stuknę tutaj, zobaczysz również, że ten przycisk zostanie naciśnięty i tak naprawdę nie chcę tego tutaj.

52
00:04:14,150 --> 00:04:23,310
Więc zawinę ten przycisk w widoku, który podam styl powiedzmy czynności, nawet jeśli jest to tylko jedna akcja

53
00:04:23,310 --> 00:04:28,160
tutaj, możesz mieć tutaj wiele przycisków dla różnych rzeczy.

54
00:04:28,350 --> 00:04:32,890
Więc dodam mój klucz akcji tutaj do arkusza stylów i tam

55
00:04:33,030 --> 00:04:40,530
możemy ustawić jeden margines na osi pionowej 10 do góry i dołu i wyrównać twoje przedmioty na środku,

56
00:04:41,930 --> 00:04:43,260
co, ponieważ

57
00:04:43,430 --> 00:04:50,740
domyślnym kierunkiem wygięcia jest kolumna, środki poziomo, a teraz mamy tutaj więcej odstępów i widzimy to jeszcze lepiej

58
00:04:50,740 --> 00:04:53,750
na Androidzie, więcej odstępów, a przycisk nie

59
00:04:53,780 --> 00:05:00,100
rozciąga się tak, jak by to było, jego domyślne ustawienie wyrównania już teraz, ale zamiast

60
00:05:00,100 --> 00:05:05,230
tego zajmuje tylko tyle szerokości, ile potrzebuje i jest wyrównane w centrum.

61
00:05:05,240 --> 00:05:06,310
Więc to jest

62
00:05:06,440 --> 00:05:07,050
konfiguracja,

63
00:05:07,070 --> 00:05:11,480
z którą pójdę, oczywiście, nadal możesz modyfikować to na różne sposoby,

64
00:05:11,480 --> 00:05:13,150
jeśli chcesz, dla mnie

65
00:05:13,160 --> 00:05:18,360
nie wygląda to tak źle, zobaczmy również inny przedmiot, może także ten, tak

66
00:05:18,440 --> 00:05:20,820
, to wszystko wygląda całkiem ładnie.

67
00:05:20,870 --> 00:05:25,790
Teraz, jeśli chodzi o dłuższy tekst, widzisz, że to nie jest tak piękne, powinno być więcej odstępów.

68
00:05:26,240 --> 00:05:34,700
Tak więc właściwie w opisie dodam także mały margines poziomy, powiedzmy 20, abyśmy mieli odstępy wokół tego,

69
00:05:34,700 --> 00:05:42,600
abyśmy, jeśli spojrzymy na to jeszcze raz, zobaczycie, że automatycznie przeskakuje do nowej linii, którą

70
00:05:42,600 --> 00:05:43,890
powinien .

71
00:05:44,970 --> 00:05:46,290
Okej, więc to

72
00:05:46,290 --> 00:05:48,380
wygląda dobrze, teraz mamy ekran szczegółów produktu.

73
00:05:48,480 --> 00:05:53,970
Teraz, zanim przejdziemy dalej, chcę przynieść własne czcionki i użyć ich, ponieważ nie jestem zadowolony z czcionek

74
00:05:53,970 --> 00:05:54,420
domyślnych.