Teraz na liście, którą tutaj renderujemy, nasze elementy listy są tak szerokie jak lista, ponieważ owijamy listę w
tym widoku tutaj wokół naszego
widoku przewijania, dlatego ustawia szerokość dla widoku przewijania dodawania, który ustawia szerokość dla przedmioty tam.
Powiedzmy teraz, że mamy inną szerokość elementu listy, powiedzmy, że szerokość elementu listy powinna wynosić
zaledwie 60% listy, więc nie
jest to 100%, co jest wartością domyślną, ale tylko 60%. Jeśli to zrobimy i zaczniemy, zobaczysz, że
teraz znajduje się po lewej stronie, co ma sens, domyślne ustawienie
tutaj, jeśli ustawisz szerokość elementu znajdującego się w Flexbox, a elementy listy znajdują się w Flexbox,
ponieważ widok przewijania wewnętrznie używa również Flexboksa na końcu, chociaż istnieją pewne różnice w porównaniu do
normalnego Flexboksa i wrócę do nich, ale nadal używa Flexboksa i dlatego, ponieważ ustawiamy
szerokość, domyślnie rozciąganie elementów potomnych wzdłuż osi poprzecznej a oś poprzeczna byłaby osią poziomą, ponieważ domyślnie mamy kolumnę
kierunku wygięcia, ale domyślne rozciąganie jest nadpisywane, ponieważ mamy szerokość na naszym elemencie
listy, a więc na elementach potomnych. Teraz nadal możemy chcieć wyśrodkować te
elementy na liście i w tym celu możesz przejść do widoku przewijania i
przypisać
tam styl, choć nie za pomocą rekwizytu, którego możesz użyć, ale który nie pozwala na
stylizowanie czegokolwiek ale aby stylizować zawartość w widoku przewijania i zastosować na przykład ustawienia elastyczności
dla zawartości, musisz użyć stylu kontenera zawartości, a to po prostu
coś do zapamiętania lub sprawdzenia w oficjalnych dokumentach. W przypadku widoku przewijania i FlatList masz styl kontenera zawartości, którego
używasz do sterowania układem w tym widoku przewijania.
Teraz w tym stylu kontenera treści możemy teraz odwoływać się do listy stylów i dlatego pozwól mi zmienić
nazwę tego obecnego stylu listy, który stosujemy do tego zawijania widoku kontenera listy, ponieważ w końcu
jest to kontener wokół naszej listy i tutaj jest sama lista.
Ewentualnie mógłbyś oczywiście nazwać tę zawartość listy, ale ja po prostu nadam jej nazwę i
zmienię nazwę innej rzeczy na kontener. Dlatego tutaj zostanie zmieniona nazwa na
kontener listy, a teraz możemy dodać nową właściwość listy do arkusza stylów,
która znajduje się teraz w widoku przewijania, stylizuje nasz kontener lub precyzyjnie układa zawartość kontenera, ponieważ
używa Flex Box wewnętrznie, możesz użyć wyrównywania elementów, aby kontrolować wyrównanie wzdłuż osi poprzecznej i ustawić to
na środku, co powinno teraz upewnić się, że elementy są ponownie wyśrodkowane, jeśli są mniejsze, i
tak właśnie się dzieje.
Dzięki temu wiesz, jak kontrolować i rozmieszczać zawartość w widoku
przewijania lub ogólnie na liście. Co teraz, jeśli chcesz kontrolować Flexbox wzdłuż głównej osi?
Powiedzmy, że nasza lista tutaj nie powinna zaczynać się tuż pod tym polem z naszymi elementami sterującymi, ale nieco dalej
w dół, powinna zaczynać się od dołu ekranu, a następnie wyrastać do góry,
a następnie przewijać tylko, gdy osiągnie Top.
Można to również kontrolować za pomocą naszego stylu listy, który jest stylem stosowanym do stylu kontenera
zawartości, więc za pomocą tego stylu kontenera zawartości można również kontrolować to, dodając
justifyContent, ponieważ justify content pozwala na pozycjonowanie zawartości wzdłuż głównej osi Flexbox i główną
osią flexbox domyślnie jest oś pionowa, ponieważ domyślnym kierunkiem jest kolumna.
Więc tutaj, użyjmy teraz elastycznego końca zamiast domyślnego, którym jest elastyczny początek, a elastyczny koniec powinien teraz faktycznie
przenieść elementy na koniec listy.
Zobaczmy więc, czy
to
działa, prawda, nie działa, prawda?
Problem polega na tym, że widok przewijania powiększa tylko ten widok wewnętrzny, który jest zawijany na końcu, gdy dodawane są
nowe elementy, teraz chcemy,
aby ten widok wewnętrzny powiększał się automatycznie. W normalnym widoku
osiągnęlibyśmy to, dodając flex one.
Wypróbujmy to tutaj na tej stylistyce listy, którą dodajemy również do widoku przewijania.
Jeśli dodamy to tutaj, teraz zobaczysz, że to działa poprawnie, zaczyna się tutaj na dole i teraz rozwijajmy to i
mamy nadzieję, że nie rozwiążemy
tego zbyt wcześnie i widzimy, że możemy przewijać. Tak naprawdę rośnie i działa dokładnie tak, jak chcemy. Jest przewijalny i ogólnie działa
tak, jak chcemy, ale zauważysz, że tak naprawdę nie możesz go przewijać,
tak że zawsze widzisz najnowszy element. Możesz tam przewijać, ale potem odskakuje ponownie i
prawdopodobnie nie tego chcemy, na Androida też
nie działa. Tam,
jeśli teraz zaczniemy zgadywać, zobaczysz to
samo zachowanie, cóż, gdybym tam dotarł, jedyną różnicą jest to, że jest zepsuty
z innego powodu, nie mogę nawet przewijać. Tak więc Flex One tak naprawdę nie wykonuje pracy, a zamiast tego
możesz użyć tego, czego wcześniej nie używaliśmy, a Flex rośnie. Teraz Flex Grow również upewnij się, że
element, do którego dodajesz, rośnie i zajmuje tyle miejsca, ile może, podobnie jak Flex
One, różnica polega na tym, że Flex Grow działa wewnętrznie nieco inaczej, jest bardziej
elastyczny niż Flex. Flex po prostu mówi,
że weź całą dostępną przestrzeń we wszystkich kierunkach, które możesz uzyskać, flex wzrost w zasadzie
instruuje pojemnik, aby mógł się rozwijać, aby mógł zająć tyle miejsca, ile może i będzie, ale zachowa inne
zachowanie,
jakie ma normalnie, w tym przypadku widoku przewijania, w którym jest on przewijany i
może również przekraczać granice ekranu.
Jest więc trochę bardziej elastyczny i prawdopodobnie nie potrzebujesz go tak często w normalnym widoku, ale w widoku przewijania,
właśnie tego potrzebujemy i właśnie
to pokazuję tutaj, ponieważ jest to szczególny przypadek, który musisz tylko wiesz, lub o co możesz się potknąć,
a zwykle znajdziesz rozwiązania
problemu z przepełnieniem stosu i tak dalej, tutaj znajdziesz to na tym kursie, ponieważ jest to scenariusz, z
którym możesz się spotkać i dlatego, mam nadzieję, możesz przypomnieć sobie ten wykład i zobaczyć,
jak to zrobić rozwiązać to.
Dodałem więc flex do tej właściwości listy i teraz spróbujmy jeszcze raz. Tutaj na iOS, jeśli zaczniemy
tutaj zgadywać liczby, teraz zobaczysz, że mogę przewijać tak, aby widoczny był najnowszy element, i nadal mogę przewijać tak,
aby widoczny był najstarszy element, więc
teraz pokazuje to pożądane zachowanie, dzięki elastycznie rosnąć.
A na Androidzie będzie tak samo, jeśli zaczniemy tam
grę. Widzisz, teraz mogę to tutaj przewinąć i mogę zobaczyć zarówno najnowsze przypuszczenie, jak i najstarsze przypuszczenie.
To działa teraz tak, jak powinno, na Androidzie i iOS, a ja pokazałem to wszystko po prostu, abyś był świadomy
tych wzorców, tego specjalnego stylu kontenera zawartości w widoku przewijania, a także chciałem się upewnić, że zdawali sobie
sprawę z niektórych problemów, na które możesz natknąć się, kiedy zaczynasz stylizować
lis ts i kiedy chcesz dodać własny układ, to są pewne sztuczki, które mogą być
bardzo przydatne, jeśli napotkasz taką sytuację w swojej aplikacji.