Flutter: rozszerzony vs elastyczny

Użyłem obu Expandedi Flexiblewidżetów i wydają się działać tak samo.

Jaka jest różnica między rozszerzoną a elastyczną?

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

Expanded to tylko skrót od Flexible

Korzystanie z rozszerzonego w ten sposób:

Expanded(
  child: Foo(),
);

jest ściśle równoważne z:

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

Możesz użyć Flexiblego, Expandedgdy chcesz innyfit , przydatnego w niektórych responsywnych układach.

Różnica między FlexFit.tighta FlexFit.loosepolega na tym, że luźne pozwoli dziecku mieć maksymalny rozmiar, a ciasne zmusi dziecko do wypełnienia całej dostępnej przestrzeni.

Widżety w obszarze Elastyczne są domyślnie WRAP_CONTENT, chociaż można to zmienić za pomocą parametru Dopasuj.

Widżet pod rozwiniętym ma MATCH_PARENT , możesz go zmienić za pomocą flex .

Expanded- jest Flexiblez dopasowanym krojem

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

Możesz użyć opcji Elastyczny, aby zmienić rozmiar widżetów w wierszach i kolumnach . Służy głównie do dostosowywania przestrzeni różnych widżetów podrzędnych przy zachowaniu relacji z ich widżetami nadrzędnymi.

W międzyczasie Expanded zmienia ograniczenia wysyłane do elementów podrzędnych wierszy i kolumn ; pomaga wypełnić dostępne tam przestrzenie. Dlatego po umieszczeniu dziecka w widżecie rozszerzonym wypełnia on puste przestrzenie.

Udostępnianie tych filmów z oficjalnego kanału Flutter na YouTube tylko po to, aby pomóc ludziom, którzy mogą tego szukać w nadchodzącej przyszłości ...

1. Rozszerzony:

2. Elastyczne:

Jedyną różnicą, jeśli użyjesz Flexiblezamiast Expanded, jest to, że Flexiblejego element podrzędny ma taką samą lub mniejszą szerokość niż on Flexiblesam, a Expandedzmusza jego dziecko do posiadania dokładnie tej samej szerokości Expanded. Ale oboje Expandedi Flexibleignoruj ​​szerokość swoich dzieci podczas określania rozmiaru.

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

Uwaga : Oznacza to, że nie można rozwijać Rowdzieci proporcjonalnie do ich rozmiarów. Wiersz używa dokładnej szerokości dziecka lub całkowicie ją ignoruje, gdy używasz Expandedlub Flexible.

Expanded () to nic innego jak Flexible () with

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

ale Elastyczne używa fit :FlexFit.loosedomyślnie.

FlexFit.tight = Chce ciasno dopasować się do rodzica, zajmując jak najwięcej miejsca.

FlexFit.loose = Chce luźno dopasować się do rodzica, zajmując jak najmniej miejsca dla siebie.