1
00:00:02,380 --> 00:00:08,860
In der Liste, die wir hier rendern, sind unsere Listenelemente so breit wie die Liste, da wir die Liste in dieser Ansicht hier

2
00:00:10,090 --> 00:00:12,140
um unsere Bildlaufansicht wickeln. Daher wird hiermit

3
00:00:12,140 --> 00:00:17,290
die Breite für das Hinzufügen der Bildlaufansicht festgelegt, wodurch die Breite für das Bild festgelegt wird Gegenstände dort.

4
00:00:17,290 --> 00:00:22,330
Nehmen wir nun an, wir hatten hier eine andere Breite für das Listenelement. Nehmen wir an,

5
00:00:22,330 --> 00:00:24,330
die Breite eines Listenelements sollte nur

6
00:00:24,340 --> 00:00:30,760
60% der Liste betragen, also nicht 100%, sondern nur 60%. Wenn wir das tun und loslegen, sehen Sie

7
00:00:30,760 --> 00:00:35,570
jetzt, dass dies links angezeigt wird, was sinnvoll ist. Die Standardpositionierung hier,

8
00:00:35,620 --> 00:00:42,400
wenn Sie eine Breite für ein Element festlegen, das sich innerhalb einer Flexbox befindet, und Listenelemente innerhalb einer

9
00:00:42,400 --> 00:00:49,420
Flexbox, weil die Bildlaufansicht Intern wird am Ende auch Flexbox verwendet, obwohl es einige Unterschiede zur normalen Flexbox gibt,

10
00:00:49,600 --> 00:00:55,550
und ich werde darauf zurückkommen, aber es wird immer noch Flexbox verwendet. Da wir also eine

11
00:00:55,580 --> 00:01:03,250
Breite festlegen, wird standardmäßig untergeordnete Elemente entlang der Querachse gedehnt und die Querachse wäre die horizontale Achse, da standardmäßig die Spalte

12
00:01:03,250 --> 00:01:08,950
für die Biegerichtung verwendet wird. Die Standarddehnung wird jedoch überschrieben, da unser Listenelement und damit

13
00:01:08,950 --> 00:01:14,890
auch unsere untergeordneten Elemente eine Breite haben. Jetzt möchten wir diese Elemente möglicherweise trotzdem

14
00:01:14,890 --> 00:01:20,620
in der Liste zentrieren. Dazu können Sie in die Bildlaufansicht gehen und dort einen

15
00:01:20,620 --> 00:01:21,430
Stil

16
00:01:21,430 --> 00:01:28,000
zuweisen, allerdings nicht über die Stil-Requisite, die Sie verwenden können, die es Ihnen jedoch nicht ermöglicht, etwas

17
00:01:28,000 --> 00:01:34,720
zu stylen Um den Inhalt in einer Bildlaufansicht zu formatieren und beispielsweise Flex-Einstellungen für den Inhalt anzuwenden,

18
00:01:34,720 --> 00:01:40,090
müssen Sie den Inhalt des Inhaltscontainers verwenden. Dies ist natürlich nur etwas, das Sie

19
00:01:40,090 --> 00:01:47,260
sich merken oder in den offiziellen Dokumenten nachschlagen können. Für die Bildlaufansicht und für FlatList haben Sie den Inhaltscontainerstil, mit

20
00:01:47,260 --> 00:01:50,140
dem Sie das Layout in dieser Bildlaufansicht steuern.

21
00:01:50,230 --> 00:01:56,620
Hier in diesem Inhaltscontainer-Stil können wir jetzt auf die Stile-Liste verweisen. Lassen Sie mich daher diesen aktuellen Listenstil,

22
00:01:56,620 --> 00:02:02,320
den wir auf diese Wrapping-Ansicht anwenden, den Listencontainer umbenennen, da es sich letztendlich um einen Container

23
00:02:02,320 --> 00:02:06,670
um unsere Liste handelt und dies hier ist die Liste selbst.

24
00:02:06,670 --> 00:02:11,750
Alternativ hätten Sie diesen Listeninhalt natürlich auch benennen können, aber ich werde ihn einfach benennen

25
00:02:11,750 --> 00:02:16,810
und die andere Sache in Listencontainer umbenennen. Daher wird dies hier in Listencontainer umbenannt,

26
00:02:16,810 --> 00:02:21,700
und jetzt können wir hier eine neue Listeneigenschaft zum Stylesheet hinzufügen. Diese befindet

27
00:02:21,760 --> 00:02:28,060
sich jetzt in der Bildlaufansicht, um unseren Container zu gestalten oder unseren Containerinhalt genau zu gestalten, da dies

28
00:02:28,060 --> 00:02:34,750
verwendet wird Intern mit Flexbox können Sie Elemente ausrichten verwenden, um die Ausrichtung entlang der Querachse zu steuern und

29
00:02:34,810 --> 00:02:41,380
diese auf Mitte zu setzen. Dies sollte nun sicherstellen, dass Elemente wieder zentriert werden, falls sie kleiner sind,

30
00:02:41,380 --> 00:02:43,440
und genau das passiert hier.

31
00:02:43,510 --> 00:02:50,170
Damit wissen Sie, wie Sie den Inhalt einer Bildlaufansicht oder einer

32
00:02:50,170 --> 00:02:58,660
Liste im Allgemeinen steuern und anordnen können. Was ist nun, wenn Sie die Flexbox auch entlang der Hauptachse steuern möchten?

33
00:02:58,660 --> 00:03:06,520
Nehmen wir an, unsere Liste hier sollte hier mit unseren Steuerelementen eigentlich nicht direkt unter diesem Feld beginnen, aber etwas weiter unten

34
00:03:06,520 --> 00:03:11,620
sollte sie am unteren Bildschirmrand beginnen und dann nach oben wachsen und erst dann

35
00:03:11,620 --> 00:03:14,500
scrollbar sein, wenn sie das erreicht oben.

36
00:03:14,520 --> 00:03:21,590
Dies kann auch mit unserem Listenstil gesteuert werden, der auf den Stil des Inhaltscontainers angewendet wird. Mit diesem

37
00:03:21,590 --> 00:03:27,350
Stil des Inhaltscontainers können Sie dies auch steuern, indem Sie "rechtfertigenContent" hinzufügen, da Sie

38
00:03:27,350 --> 00:03:33,440
mit dem Inhalt "rechtfertigen" Inhalte entlang der Hauptachse der Flexbox und positionieren können Die Hauptachse der

39
00:03:33,440 --> 00:03:38,430
Flexbox ist standardmäßig die vertikale Achse, da die Standardrichtung die Spalte ist.

40
00:03:38,600 --> 00:03:45,410
Verwenden wir hier nun das Flex-Ende anstelle des Standard-Flex-Starts, und das Flex-Ende sollte die Elemente nun tatsächlich an

41
00:03:45,410 --> 00:03:47,350
das Ende der Liste verschieben.

42
00:03:47,360 --> 00:03:48,740
Mal sehen,

43
00:03:49,870 --> 00:03:52,590
ob das funktioniert, nicht wahr?

44
00:03:52,610 --> 00:03:59,670
Das Problem hierbei ist, dass die Bildlaufansicht nur diese interne Ansicht vergrößert, die am Ende umbrochen wird, wenn neue Elemente

45
00:03:59,670 --> 00:04:01,360
hinzugefügt werden. Jetzt möchten

46
00:04:01,370 --> 00:04:06,310
wir, dass diese interne Ansicht automatisch wächst. Normalerweise würden wir dies

47
00:04:06,320 --> 00:04:08,800
erreichen, indem wir Flex One hinzufügen.

48
00:04:08,990 --> 00:04:14,170
Versuchen wir dies hier auf dieser Liste, die wir auch der Bildlaufansicht hinzufügen.

49
00:04:14,180 --> 00:04:21,570
Wenn wir es hier hinzufügen, sehen Sie jetzt, dass es sich richtig verhält, es beginnt hier unten und jetzt wollen wir es erweitern

50
00:04:21,600 --> 00:04:23,860
und hoffen, dass wir es nicht

51
00:04:24,450 --> 00:04:32,870
zu früh lösen und Sie sehen, wir können scrollen. Das wächst also tatsächlich und funktioniert genau so, wie wir es wollen. Es ist scrollbar und funktioniert im

52
00:04:32,890 --> 00:04:39,000
Allgemeinen so, wie wir es möchten, aber Sie werden feststellen, dass Sie es nicht wirklich scrollen

53
00:04:39,000 --> 00:04:45,420
können, sodass Sie immer das neueste Element sehen. Sie können dort scrollen, aber dann springt es wieder hoch und das

54
00:04:45,420 --> 00:04:48,270
ist wahrscheinlich nicht das, was wir wollen. Unter Android funktioniert

55
00:04:48,270 --> 00:04:50,370
es auch nicht. Wenn wir

56
00:04:50,370 --> 00:04:53,340
jetzt anfangen zu raten, werden Sie das gleiche

57
00:04:53,340 --> 00:04:59,110
Verhalten sehen. Wenn ich dorthin komme, besteht der einzige Unterschied darin, dass es aus einem anderen

58
00:04:59,140 --> 00:05:05,320
Grund kaputt ist. Ich kann nicht einmal scrollen. Flex One macht den Job also nicht wirklich. Was Sie dort stattdessen verwenden

59
00:05:05,320 --> 00:05:11,170
können, haben wir vorher noch nicht verwendet, und das ist Flex Grow. Jetzt stellen Sie auch sicher, dass das

60
00:05:11,230 --> 00:05:17,230
Element, zu dem Sie dies hinzufügen, wächst und so viel Platz wie möglich einnimmt, genau wie

61
00:05:17,230 --> 00:05:23,150
Flex One. Der Unterschied besteht darin, dass Flex Grow intern etwas anders funktioniert, es ist

62
00:05:23,260 --> 00:05:26,250
flexibler als Flex. Flex sagt einfach, nimm

63
00:05:26,290 --> 00:05:32,050
den gesamten verfügbaren Platz in alle Richtungen, die du bekommen kannst. Flex Grow weist den Container

64
00:05:32,050 --> 00:05:38,980
an, wachsen zu können, so viel Platz wie möglich zu nehmen und es wird, aber es behält das andere Verhalten

65
00:05:38,980 --> 00:05:39,580
bei,

66
00:05:39,780 --> 00:05:45,280
das er hat Normalerweise in diesem Fall der Bildlaufansicht, wo dieser scrollbar ist und auch

67
00:05:45,310 --> 00:05:47,300
die Grenzen des Bildschirms überschreiten kann.

68
00:05:47,320 --> 00:05:53,080
Es ist also etwas flexibler und Sie brauchen es wahrscheinlich nicht so oft in einer normalen Ansicht, aber in einer Bildlaufansicht

69
00:05:53,080 --> 00:05:54,720
ist es genau das, was wir

70
00:05:54,820 --> 00:06:00,340
brauchen, und ich zeige dies hier nur, weil dies ein Sonderfall ist, den Sie nur müssen wissen oder über was

71
00:06:00,340 --> 00:06:01,680
Sie möglicherweise stolpern, und

72
00:06:01,760 --> 00:06:07,420
in der Regel finden Sie dann Lösungen für Stapelüberlauf usw. Hier finden Sie sie in diesem Kurs, da es sich um

73
00:06:07,660 --> 00:06:12,520
ein Szenario handelt, auf das Sie möglicherweise stoßen. Daher können Sie sich hoffentlich an diese Vorlesung erinnern und

74
00:06:12,520 --> 00:06:14,140
sehen, wie es geht löse das.

75
00:06:14,170 --> 00:06:20,410
Also habe ich dieser Listeneigenschaft flex grow hinzugefügt und jetzt versuchen wir es noch einmal. Wenn wir hier unter iOS

76
00:06:20,530 --> 00:06:30,520
anfangen, Zahlen zu erraten, können Sie jetzt tatsächlich so scrollen, dass das neueste Element sichtbar ist, und ich kann trotzdem so scrollen,

77
00:06:30,610 --> 00:06:33,750
dass das älteste Element sichtbar ist. Jetzt

78
00:06:33,760 --> 00:06:37,620
zeigt dies das gewünschte Verhalten, danke flex flex wachsen.

79
00:06:37,750 --> 00:06:41,480
Und unter Android ist es dasselbe, wenn wir dort ein

80
00:06:45,510 --> 00:06:52,140
Spiel starten. Jetzt kann ich auch hier scrollen und sowohl die neueste als auch die älteste Vermutung sehen.

81
00:06:52,200 --> 00:06:58,860
Das funktioniert jetzt so, wie es hier auf Android und iOS sein sollte, und ich habe das alles einfach gezeigt, damit Sie

82
00:06:59,070 --> 00:07:05,490
sich dieser Muster, dieses speziellen Inhaltscontainer-Stils in der Bildlaufansicht bewusst sind, und ich wollte auch sicherstellen, dass Sie Wenn Sie sich

83
00:07:05,670 --> 00:07:09,960
einiger Probleme bewusst sind, die auftreten können, wenn Sie mit dem Stylen von Listen

84
00:07:09,960 --> 00:07:15,180
beginnen und wenn Sie dort Ihr eigenes Layout hinzufügen möchten, sind dies einige Tricks, die sehr praktisch sein

85
00:07:15,180 --> 00:07:18,510
können, wenn Sie in Ihrer App auf diese Situation stoßen.