Gibt es eine einfache Möglichkeit (ohne LayoutBuilder), ein Element relativ zur Bildschirmgröße (Breite / Höhe) zu dimensionieren? Beispiel: Wie stelle ich die Breite einer CardView auf 65% der Bildschirmbreite ein?
Es kann build
(offensichtlich) nicht innerhalb der Methode durchgeführt werden, daher müsste es bis zum Post-Build verschoben werden. Gibt es einen bevorzugten Ort, um solche Logik zu setzen?
Antworten:
FractionallySizedBox
kann auch nützlich sein. Sie können die Bildschirmbreite auch direkt auslesenMediaQuery.of(context).size
und darauf basierend eine Box mit Größe erstellenWenn Sie die Größe wirklich als Bruchteil des Bildschirms festlegen möchten, unabhängig vom Layout.
quelle
Dies ist eine ergänzende Antwort, die die Implementierung einiger der genannten Lösungen zeigt.
FractionallySizedBox
Wenn Sie ein einzelnes Widget haben, können Sie mithilfe eines
FractionallySizedBox
Widgets einen Prozentsatz des verfügbaren zu füllenden Speicherplatzes angeben. Hier wird das GrünContainer
so eingestellt, dass es 70% der verfügbaren Breite und 30% der verfügbaren Höhe ausfüllt.Erweitert
Mit dem
Expanded
Widget kann ein Widget den verfügbaren Platz horizontal ausfüllen, wenn es sich in einer Zeile befindet, oder vertikal, wenn es sich in einer Spalte befindet. Sie können dieflex
Eigenschaft mit mehreren Widgets verwenden, um ihnen Gewichte zu geben. Hier nimmt das GrünContainer
70% der Breite und das GelbContainer
30% der Breite ein.Wenn Sie es vertikal tun wollen, dann ersetzen Sie einfach
Row
mitColumn
.Ergänzungscode
Hier ist der
main.dart
Code als Referenz.quelle
Dialog
Styling geholfen :)Dies könnte etwas klarer sein:
Hoffe das hat dein Problem gelöst.
quelle
Sie können eine Spalte / Zeile mit flexiblen oder erweiterten untergeordneten Elementen erstellen , deren Flex-Werte sich zu den gewünschten Prozentsätzen addieren.
Möglicherweise ist das AspectRatio- Widget auch hilfreich.
quelle
quelle
Es gibt viele Möglichkeiten, dies zu tun
1. Verwenden von MediaQuery: Der zurückgegebene Vollbildmodus Ihres Geräts, einschließlich Appbar und Symbolleiste
2. Verwenden von Erweitert: Sie können das Verhältnis Breite / Höhe einstellen
3. Andere mögen Flexible und AspectRatio und FractionallySizedBox
quelle
Sie können MediaQuery mit dem aktuellen Kontext Ihres Widgets verwenden und danach Breite oder Höhe wie folgt abrufen.
double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height
Sie können es mit dem gewünschten Prozentsatz multiplizierenquelle
Ermitteln Sie zuerst die Größe des Bildschirms.
Danach können Sie es erhalten
width
und mit multiplizieren0.5
, um 50% der Bildschirmbreite zu erhalten.Aber das Problem tritt im Allgemeinen
height
standardmäßig auf, wenn wir es verwendenDie Höhe, die wir erhalten, ist die globale Höhe, die
StatusBar
+notch
+AppBar
Höhe enthält. Um die linke Höhe des Geräts zu erhalten, müssenpadding
Höhe (StatusBar
+notch
) undAppBar
Höhe von der Gesamthöhe abgezogen werden . So machen wir es.Jetzt können wir Folgendes verwenden, um 50% unseres Bildschirms in die Höhe zu bringen.
quelle
Wenn Sie GridView verwenden, können Sie so etwas wie die Lösung von Ian Hickson verwenden.
quelle
Verwenden Sie das LayoutBuilder-Widget, das Ihnen Einschränkungen gibt, mit denen Sie die Höhe ermitteln können, die die AppBar und die Auffüllung ausschließt. Verwenden Sie dann eine SizedBox und geben Sie die Breite und Höhe mithilfe der Einschränkungen aus dem LayoutBuilder an
quelle