Na ekranie szczegółów produktu zaczęliśmy już nad tym pracować, ale tak naprawdę nie
wydajemy nic przydatnego, teraz nadszedł czas,
aby to zmienić.
W tym celu zastąpię obecnie używany kod jsx widokiem przewijania, ponieważ, jak wspomniałem wcześniej, wyświetlimy
tam nasz obraz, opis naszego
produktu, a może to być bardzo długi opis lub
po prostu oglądając to na mniejszym
urządzeniu lub w trybie poziomym, więc
zdecydowanie chcemy mieć tam przewijalną zawartość, a przy okazji nie potrzebujemy
tutaj płaskiej listy, ponieważ zawartość nie będzie nieskończenie
długa, wiemy dość, że nie będzie bądź z dużym wyprzedzeniem, więc widok przewijania jest
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,
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
tekst opisu. Więc dla obrazu musimy
ustawić rekwizyt źródłowy i jest to obiekt, który ma właściwość URI i oczywiście mamy tutaj
nasz wybrany produkt, więc źródło jest właśnie wybraneProdukt. imageUrl, ponieważ wybrany produkt jest
typu zdefiniowanego w naszym modelu produktów. Na przycisku tutaj możemy dodać tytuł dodawania
do koszyka, ponieważ w końcu to powinien zrobić ten przycisk, a onPress na razie nic
nie robi, ale później dodamy go do koszyka. Następnie tutaj chcę podać cenę, nie
musimy podawać
tytułu, ponieważ jest to już część nagłówka,
więc widzimy tam tytuł, ale tutaj chcę podać cenę w dolarach, odnosząc
się do wybranego produktu. cena do stałej 2,
co zrobiłem wcześniej, a następnie
tam też opis, więc tutaj wybraliśmy Produkt. opis, jak ten.
Okej,
więc to wygląda
dobrze, teraz nadszedł czas na stylizację.
Na przykład dla obrazu z pewnością będziemy musieli ustawić szerokość i wysokość, ponieważ
jest to obraz sieciowy, więc tutaj dodam styl obrazu, który muszę dodać do arkusza stylów.
Teraz dla tekstów tutaj, ten tekst powinien mieć styl ceny,
który możemy dodać, a następnie tutaj, ten tekst powinien mieć styl opisu, może brzmieć jak odpowiednia nazwa.
Teraz w arkuszu stylów musimy dodać wszystkie te rzeczy, więc zacznijmy od obrazu.
Tam dodam szerokość 100%, to powinno
naprawdę zająć pełną dostępną szerokość i wysokość 300, i oczywiście
możesz się z tym
bawić, możesz również użyć wartości procentowej lub użyć interfejsu API wymiarów do niejako obliczyć to dynamicznie.
Następnie chcę mieć swoją cenę, ten tekst ceny powinien
mieć czcionkę o wielkości 20, ponieważ ludzie powinni oczywiście być w stanie ją zobaczyć, kolor tego
szarawego, tego ciemnoszarego koloru, którego już użyłem wcześniej, i wyrównanie tekstu do środka tak,
aby zawsze był
wyśrodkowany, a także margines na osi pionowej 20, może więc wokół niego 20, a następnie opis.
Opis może mieć rozmiar czcionki powiedzmy 14, zobaczmy, czy to działa, a tam również użyj środka
wyrównania tekstu, coś w tym stylu. Jeśli to uratujemy, spójrzmy na
to, nie wygląda to tak źle. Teraz dla przycisku chcę ustawić inny kolor, więc dodam tutaj kolor i
ustawię go na kolory, które musimy oczywiście zaimportować z naszego folderu stałych, Kolory. podstawowy, a teraz, jeśli go uratujemy,
wygląda to całkiem ładnie. W Androidzie widać, że przycisk znajduje się bezpośrednio pod obrazem i
że jest to przycisk o pełnej szerokości.
Tak samo jest na iOS, tam
po prostu tego
nie widzimy, ale jeśli stuknę tutaj, zobaczysz również, że ten przycisk zostanie naciśnięty i tak naprawdę nie chcę tego tutaj.
Więc zawinę ten przycisk w widoku, który podam styl powiedzmy czynności, nawet jeśli jest to tylko jedna akcja
tutaj, możesz mieć tutaj wiele przycisków dla różnych rzeczy.
Więc dodam mój klucz akcji tutaj do arkusza stylów i tam
możemy ustawić jeden margines na osi pionowej 10 do góry i dołu i wyrównać twoje przedmioty na środku,
co, ponieważ
domyślnym kierunkiem wygięcia jest kolumna, środki poziomo, a teraz mamy tutaj więcej odstępów i widzimy to jeszcze lepiej
na Androidzie, więcej odstępów, a przycisk nie
rozciąga się tak, jak by to było, jego domyślne ustawienie wyrównania już teraz, ale zamiast
tego zajmuje tylko tyle szerokości, ile potrzebuje i jest wyrównane w centrum.
Więc to jest
konfiguracja,
z którą pójdę, oczywiście, nadal możesz modyfikować to na różne sposoby,
jeśli chcesz, dla mnie
nie wygląda to tak źle, zobaczmy również inny przedmiot, może także ten, tak
, to wszystko wygląda całkiem ładnie.
Teraz, jeśli chodzi o dłuższy tekst, widzisz, że to nie jest tak piękne, powinno być więcej odstępów.
Tak więc właściwie w opisie dodam także mały margines poziomy, powiedzmy 20, abyśmy mieli odstępy wokół tego,
abyśmy, jeśli spojrzymy na to jeszcze raz, zobaczycie, że automatycznie przeskakuje do nowej linii, którą
powinien .
Okej, więc to
wygląda dobrze, teraz mamy ekran szczegółów produktu.
Teraz, zanim przejdziemy dalej, chcę przynieść własne czcionki i użyć ich, ponieważ nie jestem zadowolony z czcionek
domyślnych.