1
00:00:02,380 --> 00:00:08,860
Teraz na liście, którą tutaj renderujemy, nasze elementy listy są tak szerokie jak lista, ponieważ owijamy listę w

2
00:00:10,090 --> 00:00:12,140
tym widoku tutaj wokół naszego

3
00:00:12,140 --> 00:00:17,290
widoku przewijania, dlatego ustawia szerokość dla widoku przewijania dodawania, który ustawia szerokość dla przedmioty tam.

4
00:00:17,290 --> 00:00:22,330
Powiedzmy teraz, że mamy inną szerokość elementu listy, powiedzmy, że szerokość elementu listy powinna wynosić

5
00:00:22,330 --> 00:00:24,330
zaledwie 60% listy, więc nie

6
00:00:24,340 --> 00:00:30,760
jest to 100%, co jest wartością domyślną, ale tylko 60%. Jeśli to zrobimy i zaczniemy, zobaczysz, że

7
00:00:30,760 --> 00:00:35,570
teraz znajduje się po lewej stronie, co ma sens, domyślne ustawienie

8
00:00:35,620 --> 00:00:42,400
tutaj, jeśli ustawisz szerokość elementu znajdującego się w Flexbox, a elementy listy znajdują się w Flexbox,

9
00:00:42,400 --> 00:00:49,420
ponieważ widok przewijania wewnętrznie używa również Flexboksa na końcu, chociaż istnieją pewne różnice w porównaniu do

10
00:00:49,600 --> 00:00:55,550
normalnego Flexboksa i wrócę do nich, ale nadal używa Flexboksa i dlatego, ponieważ ustawiamy

11
00:00:55,580 --> 00:01:03,250
szerokość, domyślnie rozciąganie elementów potomnych wzdłuż osi poprzecznej a oś poprzeczna byłaby osią poziomą, ponieważ domyślnie mamy kolumnę

12
00:01:03,250 --> 00:01:08,950
kierunku wygięcia, ale domyślne rozciąganie jest nadpisywane, ponieważ mamy szerokość na naszym elemencie

13
00:01:08,950 --> 00:01:14,890
listy, a więc na elementach potomnych. Teraz nadal możemy chcieć wyśrodkować te

14
00:01:14,890 --> 00:01:20,620
elementy na liście i w tym celu możesz przejść do widoku przewijania i

15
00:01:20,620 --> 00:01:21,430
przypisać

16
00:01:21,430 --> 00:01:28,000
tam styl, choć nie za pomocą rekwizytu, którego możesz użyć, ale który nie pozwala na

17
00:01:28,000 --> 00:01:34,720
stylizowanie czegokolwiek ale aby stylizować zawartość w widoku przewijania i zastosować na przykład ustawienia elastyczności

18
00:01:34,720 --> 00:01:40,090
dla zawartości, musisz użyć stylu kontenera zawartości, a to po prostu

19
00:01:40,090 --> 00:01:47,260
coś do zapamiętania lub sprawdzenia w oficjalnych dokumentach. W przypadku widoku przewijania i FlatList masz styl kontenera zawartości, którego

20
00:01:47,260 --> 00:01:50,140
używasz do sterowania układem w tym widoku przewijania.

21
00:01:50,230 --> 00:01:56,620
Teraz w tym stylu kontenera treści możemy teraz odwoływać się do listy stylów i dlatego pozwól mi zmienić

22
00:01:56,620 --> 00:02:02,320
nazwę tego obecnego stylu listy, który stosujemy do tego zawijania widoku kontenera listy, ponieważ w końcu

23
00:02:02,320 --> 00:02:06,670
jest to kontener wokół naszej listy i tutaj jest sama lista.

24
00:02:06,670 --> 00:02:11,750
Ewentualnie mógłbyś oczywiście nazwać tę zawartość listy, ale ja po prostu nadam jej nazwę i

25
00:02:11,750 --> 00:02:16,810
zmienię nazwę innej rzeczy na kontener. Dlatego tutaj zostanie zmieniona nazwa na

26
00:02:16,810 --> 00:02:21,700
kontener listy, a teraz możemy dodać nową właściwość listy do arkusza stylów,

27
00:02:21,760 --> 00:02:28,060
która znajduje się teraz w widoku przewijania, stylizuje nasz kontener lub precyzyjnie układa zawartość kontenera, ponieważ

28
00:02:28,060 --> 00:02:34,750
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

29
00:02:34,810 --> 00:02:41,380
na środku, co powinno teraz upewnić się, że elementy są ponownie wyśrodkowane, jeśli są mniejsze, i

30
00:02:41,380 --> 00:02:43,440
tak właśnie się dzieje.

31
00:02:43,510 --> 00:02:50,170
Dzięki temu wiesz, jak kontrolować i rozmieszczać zawartość w widoku

32
00:02:50,170 --> 00:02:58,660
przewijania lub ogólnie na liście. Co teraz, jeśli chcesz kontrolować Flexbox wzdłuż głównej osi?

33
00:02:58,660 --> 00:03:06,520
Powiedzmy, że nasza lista tutaj nie powinna zaczynać się tuż pod tym polem z naszymi elementami sterującymi, ale nieco dalej

34
00:03:06,520 --> 00:03:11,620
w dół, powinna zaczynać się od dołu ekranu, a następnie wyrastać do góry,

35
00:03:11,620 --> 00:03:14,500
a następnie przewijać tylko, gdy osiągnie Top.

36
00:03:14,520 --> 00:03:21,590
Można to również kontrolować za pomocą naszego stylu listy, który jest stylem stosowanym do stylu kontenera

37
00:03:21,590 --> 00:03:27,350
zawartości, więc za pomocą tego stylu kontenera zawartości można również kontrolować to, dodając

38
00:03:27,350 --> 00:03:33,440
justifyContent, ponieważ justify content pozwala na pozycjonowanie zawartości wzdłuż głównej osi Flexbox i główną

39
00:03:33,440 --> 00:03:38,430
osią flexbox domyślnie jest oś pionowa, ponieważ domyślnym kierunkiem jest kolumna.

40
00:03:38,600 --> 00:03:45,410
Więc tutaj, użyjmy teraz elastycznego końca zamiast domyślnego, którym jest elastyczny początek, a elastyczny koniec powinien teraz faktycznie

41
00:03:45,410 --> 00:03:47,350
przenieść elementy na koniec listy.

42
00:03:47,360 --> 00:03:48,740
Zobaczmy więc, czy

43
00:03:49,870 --> 00:03:50,480
to

44
00:03:50,570 --> 00:03:52,590
działa, prawda, nie działa, prawda?

45
00:03:52,610 --> 00:03:59,670
Problem polega na tym, że widok przewijania powiększa tylko ten widok wewnętrzny, który jest zawijany na końcu, gdy dodawane są

46
00:03:59,670 --> 00:04:01,360
nowe elementy, teraz chcemy,

47
00:04:01,370 --> 00:04:06,310
aby ten widok wewnętrzny powiększał się automatycznie. W normalnym widoku

48
00:04:06,320 --> 00:04:08,800
osiągnęlibyśmy to, dodając flex one.

49
00:04:08,990 --> 00:04:14,170
Wypróbujmy to tutaj na tej stylistyce listy, którą dodajemy również do widoku przewijania.

50
00:04:14,180 --> 00:04:21,570
Jeśli dodamy to tutaj, teraz zobaczysz, że to działa poprawnie, zaczyna się tutaj na dole i teraz rozwijajmy to i

51
00:04:21,600 --> 00:04:23,860
mamy nadzieję, że nie rozwiążemy

52
00:04:24,450 --> 00:04:32,870
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

53
00:04:32,890 --> 00:04:39,000
tak, jak chcemy, ale zauważysz, że tak naprawdę nie możesz go przewijać,

54
00:04:39,000 --> 00:04:45,420
tak że zawsze widzisz najnowszy element. Możesz tam przewijać, ale potem odskakuje ponownie i

55
00:04:45,420 --> 00:04:48,270
prawdopodobnie nie tego chcemy, na Androida też

56
00:04:48,270 --> 00:04:50,370
nie działa. Tam,

57
00:04:50,370 --> 00:04:53,340
jeśli teraz zaczniemy zgadywać, zobaczysz to

58
00:04:53,340 --> 00:04:59,110
samo zachowanie, cóż, gdybym tam dotarł, jedyną różnicą jest to, że jest zepsuty

59
00:04:59,140 --> 00:05:05,320
z innego powodu, nie mogę nawet przewijać. Tak więc Flex One tak naprawdę nie wykonuje pracy, a zamiast tego

60
00:05:05,320 --> 00:05:11,170
możesz użyć tego, czego wcześniej nie używaliśmy, a Flex rośnie. Teraz Flex Grow również upewnij się, że

61
00:05:11,230 --> 00:05:17,230
element, do którego dodajesz, rośnie i zajmuje tyle miejsca, ile może, podobnie jak Flex

62
00:05:17,230 --> 00:05:23,150
One, różnica polega na tym, że Flex Grow działa wewnętrznie nieco inaczej, jest bardziej

63
00:05:23,260 --> 00:05:26,250
elastyczny niż Flex. Flex po prostu mówi,

64
00:05:26,290 --> 00:05:32,050
że weź całą dostępną przestrzeń we wszystkich kierunkach, które możesz uzyskać, flex wzrost w zasadzie

65
00:05:32,050 --> 00:05:38,980
instruuje pojemnik, aby mógł się rozwijać, aby mógł zająć tyle miejsca, ile może i będzie, ale zachowa inne

66
00:05:38,980 --> 00:05:39,580
zachowanie,

67
00:05:39,780 --> 00:05:45,280
jakie ma normalnie, w tym przypadku widoku przewijania, w którym jest on przewijany i

68
00:05:45,310 --> 00:05:47,300
może również przekraczać granice ekranu.

69
00:05:47,320 --> 00:05:53,080
Jest więc trochę bardziej elastyczny i prawdopodobnie nie potrzebujesz go tak często w normalnym widoku, ale w widoku przewijania,

70
00:05:53,080 --> 00:05:54,720
właśnie tego potrzebujemy i właśnie

71
00:05:54,820 --> 00:06:00,340
to pokazuję tutaj, ponieważ jest to szczególny przypadek, który musisz tylko wiesz, lub o co możesz się potknąć,

72
00:06:00,340 --> 00:06:01,680
a zwykle znajdziesz rozwiązania

73
00:06:01,760 --> 00:06:07,420
problemu z przepełnieniem stosu i tak dalej, tutaj znajdziesz to na tym kursie, ponieważ jest to scenariusz, z

74
00:06:07,660 --> 00:06:12,520
którym możesz się spotkać i dlatego, mam nadzieję, możesz przypomnieć sobie ten wykład i zobaczyć,

75
00:06:12,520 --> 00:06:14,140
jak to zrobić rozwiązać to.

76
00:06:14,170 --> 00:06:20,410
Dodałem więc flex do tej właściwości listy i teraz spróbujmy jeszcze raz. Tutaj na iOS, jeśli zaczniemy

77
00:06:20,530 --> 00:06:30,520
tutaj zgadywać liczby, teraz zobaczysz, że mogę przewijać tak, aby widoczny był najnowszy element, i nadal mogę przewijać tak,

78
00:06:30,610 --> 00:06:33,750
aby widoczny był najstarszy element, więc

79
00:06:33,760 --> 00:06:37,620
teraz pokazuje to pożądane zachowanie, dzięki elastycznie rosnąć.

80
00:06:37,750 --> 00:06:41,480
A na Androidzie będzie tak samo, jeśli zaczniemy tam

81
00:06:45,510 --> 00:06:52,140
grę. Widzisz, teraz mogę to tutaj przewinąć i mogę zobaczyć zarówno najnowsze przypuszczenie, jak i najstarsze przypuszczenie.

82
00:06:52,200 --> 00:06:58,860
To działa teraz tak, jak powinno, na Androidzie i iOS, a ja pokazałem to wszystko po prostu, abyś był świadomy

83
00:06:59,070 --> 00:07:05,490
tych wzorców, tego specjalnego stylu kontenera zawartości w widoku przewijania, a także chciałem się upewnić, że zdawali sobie

84
00:07:05,670 --> 00:07:09,960
sprawę z niektórych problemów, na które możesz natknąć się, kiedy zaczynasz stylizować

85
00:07:09,960 --> 00:07:15,180
lis ts i kiedy chcesz dodać własny układ, to są pewne sztuczki, które mogą być

86
00:07:15,180 --> 00:07:18,510
bardzo przydatne, jeśli napotkasz taką sytuację w swojej aplikacji.