In der Liste, die wir hier rendern, sind unsere Listenelemente so breit wie die Liste, da wir die Liste in dieser Ansicht hier
um unsere Bildlaufansicht wickeln. Daher wird hiermit
die Breite für das Hinzufügen der Bildlaufansicht festgelegt, wodurch die Breite für das Bild festgelegt wird Gegenstände dort.
Nehmen wir nun an, wir hatten hier eine andere Breite für das Listenelement. Nehmen wir an,
die Breite eines Listenelements sollte nur
60% der Liste betragen, also nicht 100%, sondern nur 60%. Wenn wir das tun und loslegen, sehen Sie
jetzt, dass dies links angezeigt wird, was sinnvoll ist. Die Standardpositionierung hier,
wenn Sie eine Breite für ein Element festlegen, das sich innerhalb einer Flexbox befindet, und Listenelemente innerhalb einer
Flexbox, weil die Bildlaufansicht Intern wird am Ende auch Flexbox verwendet, obwohl es einige Unterschiede zur normalen Flexbox gibt,
und ich werde darauf zurückkommen, aber es wird immer noch Flexbox verwendet. Da wir also eine
Breite festlegen, wird standardmäßig untergeordnete Elemente entlang der Querachse gedehnt und die Querachse wäre die horizontale Achse, da standardmäßig die Spalte
für die Biegerichtung verwendet wird. Die Standarddehnung wird jedoch überschrieben, da unser Listenelement und damit
auch unsere untergeordneten Elemente eine Breite haben. Jetzt möchten wir diese Elemente möglicherweise trotzdem
in der Liste zentrieren. Dazu können Sie in die Bildlaufansicht gehen und dort einen
Stil
zuweisen, allerdings nicht über die Stil-Requisite, die Sie verwenden können, die es Ihnen jedoch nicht ermöglicht, etwas
zu stylen Um den Inhalt in einer Bildlaufansicht zu formatieren und beispielsweise Flex-Einstellungen für den Inhalt anzuwenden,
müssen Sie den Inhalt des Inhaltscontainers verwenden. Dies ist natürlich nur etwas, das Sie
sich merken oder in den offiziellen Dokumenten nachschlagen können. Für die Bildlaufansicht und für FlatList haben Sie den Inhaltscontainerstil, mit
dem Sie das Layout in dieser Bildlaufansicht steuern.
Hier in diesem Inhaltscontainer-Stil können wir jetzt auf die Stile-Liste verweisen. Lassen Sie mich daher diesen aktuellen Listenstil,
den wir auf diese Wrapping-Ansicht anwenden, den Listencontainer umbenennen, da es sich letztendlich um einen Container
um unsere Liste handelt und dies hier ist die Liste selbst.
Alternativ hätten Sie diesen Listeninhalt natürlich auch benennen können, aber ich werde ihn einfach benennen
und die andere Sache in Listencontainer umbenennen. Daher wird dies hier in Listencontainer umbenannt,
und jetzt können wir hier eine neue Listeneigenschaft zum Stylesheet hinzufügen. Diese befindet
sich jetzt in der Bildlaufansicht, um unseren Container zu gestalten oder unseren Containerinhalt genau zu gestalten, da dies
verwendet wird Intern mit Flexbox können Sie Elemente ausrichten verwenden, um die Ausrichtung entlang der Querachse zu steuern und
diese auf Mitte zu setzen. Dies sollte nun sicherstellen, dass Elemente wieder zentriert werden, falls sie kleiner sind,
und genau das passiert hier.
Damit wissen Sie, wie Sie den Inhalt einer Bildlaufansicht oder einer
Liste im Allgemeinen steuern und anordnen können. Was ist nun, wenn Sie die Flexbox auch entlang der Hauptachse steuern möchten?
Nehmen wir an, unsere Liste hier sollte hier mit unseren Steuerelementen eigentlich nicht direkt unter diesem Feld beginnen, aber etwas weiter unten
sollte sie am unteren Bildschirmrand beginnen und dann nach oben wachsen und erst dann
scrollbar sein, wenn sie das erreicht oben.
Dies kann auch mit unserem Listenstil gesteuert werden, der auf den Stil des Inhaltscontainers angewendet wird. Mit diesem
Stil des Inhaltscontainers können Sie dies auch steuern, indem Sie "rechtfertigenContent" hinzufügen, da Sie
mit dem Inhalt "rechtfertigen" Inhalte entlang der Hauptachse der Flexbox und positionieren können Die Hauptachse der
Flexbox ist standardmäßig die vertikale Achse, da die Standardrichtung die Spalte ist.
Verwenden wir hier nun das Flex-Ende anstelle des Standard-Flex-Starts, und das Flex-Ende sollte die Elemente nun tatsächlich an
das Ende der Liste verschieben.
Mal sehen,
ob das funktioniert, nicht wahr?
Das Problem hierbei ist, dass die Bildlaufansicht nur diese interne Ansicht vergrößert, die am Ende umbrochen wird, wenn neue Elemente
hinzugefügt werden. Jetzt möchten
wir, dass diese interne Ansicht automatisch wächst. Normalerweise würden wir dies
erreichen, indem wir Flex One hinzufügen.
Versuchen wir dies hier auf dieser Liste, die wir auch der Bildlaufansicht hinzufügen.
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
und hoffen, dass wir es nicht
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
Allgemeinen so, wie wir es möchten, aber Sie werden feststellen, dass Sie es nicht wirklich scrollen
können, sodass Sie immer das neueste Element sehen. Sie können dort scrollen, aber dann springt es wieder hoch und das
ist wahrscheinlich nicht das, was wir wollen. Unter Android funktioniert
es auch nicht. Wenn wir
jetzt anfangen zu raten, werden Sie das gleiche
Verhalten sehen. Wenn ich dorthin komme, besteht der einzige Unterschied darin, dass es aus einem anderen
Grund kaputt ist. Ich kann nicht einmal scrollen. Flex One macht den Job also nicht wirklich. Was Sie dort stattdessen verwenden
können, haben wir vorher noch nicht verwendet, und das ist Flex Grow. Jetzt stellen Sie auch sicher, dass das
Element, zu dem Sie dies hinzufügen, wächst und so viel Platz wie möglich einnimmt, genau wie
Flex One. Der Unterschied besteht darin, dass Flex Grow intern etwas anders funktioniert, es ist
flexibler als Flex. Flex sagt einfach, nimm
den gesamten verfügbaren Platz in alle Richtungen, die du bekommen kannst. Flex Grow weist den Container
an, wachsen zu können, so viel Platz wie möglich zu nehmen und es wird, aber es behält das andere Verhalten
bei,
das er hat Normalerweise in diesem Fall der Bildlaufansicht, wo dieser scrollbar ist und auch
die Grenzen des Bildschirms überschreiten kann.
Es ist also etwas flexibler und Sie brauchen es wahrscheinlich nicht so oft in einer normalen Ansicht, aber in einer Bildlaufansicht
ist es genau das, was wir
brauchen, und ich zeige dies hier nur, weil dies ein Sonderfall ist, den Sie nur müssen wissen oder über was
Sie möglicherweise stolpern, und
in der Regel finden Sie dann Lösungen für Stapelüberlauf usw. Hier finden Sie sie in diesem Kurs, da es sich um
ein Szenario handelt, auf das Sie möglicherweise stoßen. Daher können Sie sich hoffentlich an diese Vorlesung erinnern und
sehen, wie es geht löse das.
Also habe ich dieser Listeneigenschaft flex grow hinzugefügt und jetzt versuchen wir es noch einmal. Wenn wir hier unter iOS
anfangen, Zahlen zu erraten, können Sie jetzt tatsächlich so scrollen, dass das neueste Element sichtbar ist, und ich kann trotzdem so scrollen,
dass das älteste Element sichtbar ist. Jetzt
zeigt dies das gewünschte Verhalten, danke flex flex wachsen.
Und unter Android ist es dasselbe, wenn wir dort ein
Spiel starten. Jetzt kann ich auch hier scrollen und sowohl die neueste als auch die älteste Vermutung sehen.
Das funktioniert jetzt so, wie es hier auf Android und iOS sein sollte, und ich habe das alles einfach gezeigt, damit Sie
sich dieser Muster, dieses speziellen Inhaltscontainer-Stils in der Bildlaufansicht bewusst sind, und ich wollte auch sicherstellen, dass Sie Wenn Sie sich
einiger Probleme bewusst sind, die auftreten können, wenn Sie mit dem Stylen von Listen
beginnen und wenn Sie dort Ihr eigenes Layout hinzufügen möchten, sind dies einige Tricks, die sehr praktisch sein
können, wenn Sie in Ihrer App auf diese Situation stoßen.