Flattern: Erweitert gegen flexibel

99

Ich habe beide Expandedund FlexibleWidgets verwendet und sie scheinen gleich zu funktionieren. Gibt es einen Unterschied zwischen den beiden, die ich verpasst habe?


quelle

Antworten:

118
Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

Geben Sie hier die Bildbeschreibung ein

Raouf Rahiche
quelle
6
Flexibel nimmt nur den benötigten Platz ein, und Expanded nimmt den gesamten verfügbaren Platz ein, wobei der flexFaktor berücksichtigt wird. Weitere Informationen finden Sie in den Dokumenten des ExpandedWidgets .
Aleksandar
100

Expanded ist nur eine Abkürzung für Flexible

Verwenden Sie auf diese Weise erweitert:

Expanded(
  child: Foo(),
);

ist streng gleichbedeutend mit:

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

Möglicherweise möchten Sie Flexibleover verwenden, Expandedwenn Sie ein anderes verwenden möchten fit, das in einigen reaktionsschnellen Layouts nützlich ist.

Der Unterschied zwischen FlexFit.tightund FlexFit.loosebesteht darin, dass locker das Kind eine maximale Größe haben kann, während das Kind durch Zwang gezwungen wird, den gesamten verfügbaren Platz zu füllen.

Rémi Rousselet
quelle
1
nicht Maximum sizeund Available spacebedeutet hier das Gleiche?
CopsOnRoad
Nein, mit Maximumsize meinte ich so etwas wie als Kind von Flexible eine ConstrainedBox mit einer maximalen Höhe in einer Spalte
Rémi Rousselet
25
Mit einfachen Worten, Flexible.tightzwingt die Kinder, den verfügbaren gesamten Raum einzunehmen, und Flexible.looselässt die Kinder tun, was sie wollen. Einige Kinder nehmen möglicherweise den gesamten Raum ein, andere nicht, je nachdem, um welchen Typ es sich handelt.
CopsOnRoad
30

Widget unter Flexibel sind standardmäßig WRAP_CONTENT, obwohl Sie es mit dem Parameter Anpassen ändern können.

Das Widget unter Erweitert ist MATCH_PARENT. Sie können es mit flex ändern .

Parvesh Khan
quelle
1
Tolle Erklärung für Android-Entwickler!
SwiftiSwift
19

Expanded- Es ist Flexiblemit fester Passform

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}
Andrey Turkovsky
quelle
16

Sie können Flexible verwenden, um die Größe der Widgets in Zeilen und Spalten zu ändern . Es wird hauptsächlich verwendet, um den Speicherplatz der verschiedenen untergeordneten Widgets anzupassen und gleichzeitig die Beziehung zu den übergeordneten Widgets beizubehalten.

In der Zwischenzeit ändert Expanded die Einschränkungen, die an die untergeordneten Elemente von Zeilen und Spalten gesendet werden . es hilft, die verfügbaren Plätze dort zu füllen. Wenn Sie Ihr Kind in ein erweitertes Widget einbinden, werden daher die leeren Bereiche ausgefüllt.

Bereitstellung dieser Videos aus dem offiziellen YouTube-Kanal von Flutter , um Menschen zu helfen, die in der kommenden Zukunft danach suchen könnten ...

  1. Erweitert:

  2. Flexibel:

Onosekunde
quelle
0

Expanded () ist nichts anderes als Flexible () mit

Flexible (fit: FlexFit.tight) = Expanded()

Flexibel fit :FlexFit.loosewird jedoch standardmäßig verwendet.

FlexFit.tight = Möchte eng in die Eltern passen und so viel Platz wie möglich einnehmen.

FlexFit.loose = Möchte locker in die Eltern passen und so wenig Platz wie möglich für sich selbst nehmen.

Yash
quelle
0

Der einzige Unterschied, den Sie Flexibleanstelle von verwenden Expanded, besteht darin, dass das Flexibleuntergeordnete Element dieselbe oder eine kleinere Breite als das Flexibleselbst hat, während das Expandeduntergeordnete Element gezwungen wird, genau die gleiche Breite wie das selbst zu haben Expanded. Aber beide Expandedund Flexibleignorieren die Breite ihrer Kinder, wenn sie sich selbst dimensionieren.

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Flexible(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

Geben Sie hier die Bildbeschreibung ein

Hinweis : Dies bedeutet, dass es unmöglich ist, RowKinder proportional zu ihrer Größe zu erweitern. Die Zeile verwendet entweder die genaue Breite des untergeordneten Elements oder ignoriert sie vollständig, wenn Sie Expandedoder verwenden Flexible.

Paresh Mangukiya
quelle