In Android match_parent
und wrap_content
werden verwendet, um die Größe der Widgets automatisch relativ zu ihren übergeordneten Elementen auf den Inhalt des Widgets zu ändern.
In Flutter scheinen standardmäßig alle Widgets auf eingestellt zu sein wrap_content
. Wie würde ich es so ändern, dass ich es width
und height
das des übergeordneten Widgets füllen kann ?
Link zum Originalartikel
quelle
crossAxisAlignment
Feld für Zeilen und Spalten gibt, das so eingestellt werden kann, dass esCrossAxisAlignment.stretch
beispielsweise innerhalb einer Spalte horizontal erweitert wirdDie kurze Antwort lautet, dass der Elternteil keine Größe hat, bis das Kind eine Größe hat.
Die Art und Weise, wie das Layout in Flutter funktioniert, besteht darin, dass jedes Widget jedem seiner untergeordneten Elemente Einschränkungen bietet, z. B. "Sie können bis zu dieser Breite sein, Sie müssen so groß sein, Sie müssen mindestens so breit sein" oder was auch immer (speziell sie) eine minimale Breite, eine maximale Breite, eine minimale Höhe und eine maximale Höhe erhalten). Jedes Kind nimmt diese Einschränkungen an, unternimmt etwas und wählt eine Größe (Breite und Höhe) aus, die diesen Einschränkungen entspricht. Sobald jedes Kind seine Sache erledigt hat, kann das Widget seine eigene Größe auswählen.
Einige Widgets versuchen so groß zu sein, wie es die Eltern erlauben. Einige Widgets versuchen so klein zu sein, wie es das übergeordnete Element zulässt. Einige Widgets versuchen, einer bestimmten "natürlichen" Größe zu entsprechen (z. B. Text, Bilder).
Einige Widgets teilen ihren Kindern mit, dass sie jede gewünschte Größe haben können. Einige geben ihren Kindern die gleichen Einschränkungen, die sie von ihren Eltern erhalten haben.
quelle
PageView
Inside a habeColumn
, mit einem anderenColumn
innerhalb des Stromspage
, erhalte ich einen Rendering-Fehler, aber ich kann ihn beheben, indem ich dasPageView
Inside aExpanded
oder a umhülleFlexible
. Das Problem ist, dass diese beiden Optionen nur das Kind erweitern. Warum gibt es kein verwandtes Widget zum Verkleinern, wie z. B. "Inhalt umbrechen", um diese Art von Rendering-Problemen zu lösen?Es gibt tatsächlich einige Optionen:
Sie können SizedBox.expand verwenden, um Ihr Widget an die Abmessungen der Eltern anzupassen, oder SizedBox (Breite: double.infinity), um nur der Breite zu entsprechen, oder SizedBox (Höhe: double.infinity), um nur der Höhe zu entsprechen.
Wenn Sie ein wrap_content-Verhalten wünschen, hängt es vom übergeordneten Widget ab, das Sie verwenden. Wenn Sie beispielsweise eine Schaltfläche in eine Spalte einfügen, verhält es sich wie wrap_content. Um es wie match_parent zu verwenden, können Sie die Schaltfläche mit einem erweiterten Widget oder einer Sizebox umschließen.
Bei einer ListView erhält die Schaltfläche ein match_parent-Verhalten. Um ein wrap_content-Verhalten zu erhalten, können Sie sie mit einem Flex-Widget wie Row umschließen.
Durch die Verwendung eines erweiterten Widgets wird ein untergeordnetes Element einer Zeile, Spalte oder eines Flex erweitert, um den verfügbaren Platz auf der Hauptachse zu füllen (z. B. horizontal für eine Zeile oder vertikal für eine Spalte). https://docs.flutter.io/flutter/widgets/Expanded-class.html
Durch die Verwendung eines flexiblen Widgets kann ein untergeordnetes Element einer Zeile, Spalte oder eines Flex flexibel erweitert werden, um den verfügbaren Platz auf der Hauptachse auszufüllen (z. B. horizontal für eine Zeile oder vertikal für eine Spalte), im Gegensatz zu "Erweitert" jedoch nicht Das Kind muss den verfügbaren Platz ausfüllen. https://docs.flutter.io/flutter/widgets/Flexible-class.html
quelle
Eine einfache Problemumgehung:
Wenn ein Container nur ein untergeordnetes Element der obersten Ebene hat, können Sie die Ausrichtungseigenschaft für das untergeordnete Element angeben und ihm einen beliebigen verfügbaren Wert zuweisen. es wird den gesamten Raum im Container füllen.
Ein anderer Weg:
quelle
BoxConstraints.expand(height: 100.0)
funktioniert hervorragend als Android-width="match_parent"
ÄquivalentIch habe diese Lösung verwendet. Sie müssen die Höhe und Breite Ihres Bildschirms mit MediaQuery definieren:
quelle
quelle
Verwenden Sie das Widget
Wrap
.Für
Column
ähnliches Verhalten versuchen Sie:Für
Row
ähnliches Verhalten versuchen Sie:Weitere Informationen: Wrap (Flutter Widget)
quelle
Verwenden Sie diese Codezeile in der Spalte. Für wrap_content:
mainAxisSize: MainAxisSize.min
Für match_parent:mainAxisSize: MainAxisSize.max
quelle
Es gibt tatsächlich einen sehr einfachen und ordentlichen Weg, dies zu tun.
Verwenden Sie
FractionallySizedBox
Widget.Dieses Widget ist auch sehr nützlich, wenn Sie Ihr Kind auf einen Bruchteil der Größe seines Elternteils skalieren möchten.
quelle
Um ein Kind dazu zu bringen, sein Elternteil zu füllen, wickeln Sie es einfach in eine FittedBox ein
quelle