Flattern: Erweitert gegen flexibel

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

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

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.

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 .

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
    );
}

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:

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.

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!’))),
  ]
)

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.