Oczywiście ten ekran nie jest teraz tak przydatny,
dlatego przejdę do tekstu, którego użyłem jako manekina, i zastąpię go powiedzmy, zacznijmy nową grę, coś
takiego, a poniżej tego chcę mieć obszar wejściowy z lekkim cieniem, więc ten typowy wygląd karty możesz znać
z niektórych aplikacji i stron internetowych, w których masz pudełko z lekkim cieniem,
może zaokrąglonymi narożnikami.
Chcę to odtworzyć tutaj, więc dodam tutaj widok, widok, ponieważ znowu jest to bardzo elastyczny element, możemy zastosować
tam wiele stylów, możemy dodać nasz cień i zaokrąglone rogi, a następnie przytrzymać
zawartość w
tym widoku, więc świetnie nadaje się do ogólnej stylizacji kontenera, a teraz wewnątrz tego
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
użytkownicy może coś wprowadzić.
Dodam
więc komponent do wprowadzania tekstu, który jest wbudowanym komponentem, w którym użytkownicy mogą wprowadzać wartość za
pomocą klawiatury i tutaj powinni wprowadzić liczbę. Skonfigurujemy to i nadamy temu styl za
sekundę, na razie po prostu wrzucę to w ten sposób, a poniżej tego chcę, aby
dwa przyciski
siedziały obok siebie, a to ważne, obok siebie, a nie poniżej siebie inne, które pozwalają nam
zresetować dane wejściowe i wybrać nowe lub potwierdzić wybrane. Potrzebujemy więc tutaj widoku, ponieważ pozwala nam to pozycjonować elementy obok
siebie, podczas gdy te elementy są umieszczone nad sobą, ponieważ gdybym po prostu dodał tutaj
dwa przyciski, musiałbym zmienić kierunek elastycznego widoku, aby były obok do siebie, ale wtedy tekst i
wprowadzanie tekstu również będą siedzieć obok siebie.
Więc teraz dodam tutaj widok, aby w tym widoku widok otaczający, ten, ten i ten komponent widoku
znajdowały się nad sobą,
więc na osi pionowej, ale wewnątrz tego widoku, mogę teraz również upewnić się, że przedmioty tam leżą
następnie obok siebie, więc w osi poziomej i właśnie tego chcę tutaj.
Zaimportuję więc wbudowany przycisk, który jest jednym z komponentów widoku, który automatycznie dostosowuje się
do platformy bazowej, później w osobnym module dowiesz się, jak ręcznie dowiedzieć się,
na której platformie działasz, aby dostosować wygląd Twojej aplikacji.
Tutaj pójdziemy z wbudowanym przyciskiem i nadamy pierwszemu tytuł resetowania, a drugi, drugi przycisk tutaj tytuł
potwierdzenia, a następnie tutaj, onPress w tej
chwili nic nie zrobi, więc to tylko pusta funkcja, po prostu dodając ją, abyśmy mieli już
prop, dodamy logikę później i
na razie
będziemy mieć tutaj tylko przyciski.
Teraz jednak stylizacji będzie brakować, jak powiedziałem, przycisk powinien znajdować się obok siebie.
Dlatego przedstawię tutaj ten widok, w którym przyciski mają styl wskazujący na
obiekt stylów, a
tam, powiedzmy, pojemnik na guziki, ta nazwa
jak zawsze zależy wyłącznie od Ciebie, a także chcę nadać temu widokowi, który przechowuje moje dane wejściowe styl tutaj,
odnosząc się do obiektu styles i użyję powiedzmy
kontenera wejściowego, ta nazwa oczywiście także zależy od ciebie i tutaj, chcę nadać
temu stylowi specjalny tytuł, może z większym rozmiarem czcionki, więc tutaj przypiszę styl powiedzmy.
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
możemy zacząć dodawać tam niektóre style. Teraz, jeśli chodzi o tytuł, znowu
chcę ustawić rozmiar czcionki, więc ustawię rozmiar czcionki
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
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
ja wrócę do pojemnika wejściowego za sekundę, pojemnik z guzikiem otrzyma elastyczny kierunek rzędu,
domyślnie kolumna, ale teraz
chcę, aby przedmioty stały obok siebie, więc musimy
użyć wiersza tutaj.
Chcę tu ustawić szerokość, ponieważ jeśli nie ustawimy szerokości kontenera przycisków, będzie on tak
szeroki, jak oba przyciski są razem, zamiast tego chcę
użyć szerokości elementu nadrzędnego, więc w tym widoku tutaj a następnie umieść przyciski wewnątrz tego widoku,
więc chcę
zrobić odwrotnie, nie stylizuj widoku zgodnie z przyciskami, ale ustaw przyciski zgodnie z
widokiem.
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,
aby
ustawić je wzdłuż głównej osi, która dla rzędu kierunku wygięcia jest od lewej do prawej
i tam wybiorę spację pomiędzy tak, aby przyciski znajdowały się na lewej i prawej krawędzi tego
rzędu i rozdzieliły między nimi całą dostępną wolną przestrzeń. Dodaj też trochę paddingu poziomego, abyśmy mieli trochę odstępu
po lewej i prawej stronie naszego widoku, może 15, aby przyciski nie znajdowały się bezpośrednio na krawędziach po
lewej i prawej stronie, ale jest trochę odstępy
po lewej i prawej stronie. Okej, więc jeśli
to uratujemy, zobaczymy to, czego o tobie nie wiem,
ale co nie wygląda tak dobrze, prawda?
Problem polega na tym, że kontener wejściowy nie ma jeszcze stylów. Kontener wejściowy zawiera jednak wszystkie dane wejściowe,
dlatego stylizacje tam wyglądają nieco inaczej.
Powinniśmy więc nadać kontenerowi wejściowemu trochę stylu i tam, chcę dodać szerokość, a teraz
możesz użyć zakodowanej szerokości, powiedzmy 300 pikseli, lub użyć szerokości i wartości procentowej.
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
małe, to jest trochę responsywności, którą już tu dodam, jeśli urządzenie byłoby zbyt małe, upewniamy
się, że nasza szerokość nie przekracza 80%. A następnie chcę wyrównać elementy na
środku, pamiętaj, że pojemnik
wejściowy jest widokiem, dlatego używa Flexbox, używa domyślnej
kolumny kierunku wygięcia, a zatem w przypadku wyrównywania środka przedmiotów, pozycjonujemy elementy na
środku na osi poprzecznej, która jest od lewej
do prawej, więc elementy centrujemy poziomo. Teraz, dzięki temu wygląda to znacznie lepiej, nie
możemy tak naprawdę zobaczyć
danych wejściowych, ale to jest stare, prawda?
Będziemy musieli go stylizować, abyśmy mogli go naprawdę zobaczyć. Widzimy jednak przyciski i widzimy,
że nasz ogólny układ i styl nabiera pewnego kształtu.
Mimo to nie jestem jeszcze w 100% zadowolony z tego wyglądu.