Odpowiednik wrap_content i match_parent we flutter?

W systemie Android match_parenti wrap_contentsłużą do automatycznej zmiany rozmiaru widżetów w stosunku do ich rodzica w stosunku do zawartości, którą zawiera widżet.

We Flutterze wydaje się, że domyślnie wszystkie widżety są ustawione na wrap_content, jak bym to zmienił tak, aby mógł wypełnić jego widthi heightjego rodzica?

Możesz zrobić z małą sztuczką: załóżmy, że masz wymagania: (szerokość, wysokość)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

W celu uzyskania zachowanie dla match_parent i wrap_content musimy użyć mainAxisSize nieruchomość w wiersz / kolumna widget The mainAxisSize nieruchomość zajmuje MainAxisSize enum posiadający dwie wartości, które jest MainAxisSize.min który zachowuje się jak wrap_content i MainAxisSize.max która zachowuje się jak match_parent .

Link do oryginalnego artykułu

Krótka odpowiedź brzmi: rodzic nie ma rozmiaru, dopóki dziecko nie ma rozmiaru.

Sposób działania układu we Flutterze polega na tym, że każdy widżet zapewnia ograniczenia każdemu ze swoich elementów podrzędnych, na przykład „możesz mieć taką szerokość, musisz być tak wysoki, musisz mieć przynajmniej taką szerokość” lub cokolwiek (konkretnie uzyskaj minimalną szerokość, maksymalną szerokość, minimalną wysokość i maksymalną wysokość). Każde dziecko przyjmuje te ograniczenia, robi coś i wybiera rozmiar (szerokość i wysokość), który pasuje do tych ograniczeń. Następnie, gdy każde dziecko zrobi swoje, widżet może wybrać swój własny rozmiar.

Niektóre widżety starają się być tak duże, jak pozwala na to rodzic. Niektóre widżety starają się być tak małe, jak pozwala na to rodzic. Niektóre widżety próbują dopasować określony „naturalny” rozmiar (np. Tekst, obrazy).

Niektóre widżety informują dzieci, że mogą mieć dowolny rozmiar. Niektórzy dają swoim dzieciom te same ograniczenia, które dostali od rodziców.

W rzeczywistości jest kilka dostępnych opcji:

Możesz użyć SizedBox.expand, aby dopasować widżet do wymiarów nadrzędnych, lub SizedBox (width: double.infinity), aby dopasować tylko szerokość, lub SizedBox (heigth: double.infinity), aby dopasować tylko wysokość.

Jeśli chcesz zachować zachowanie wrap_content, zależy to od używanego widżetu nadrzędnego, na przykład jeśli umieścisz przycisk w kolumnie, będzie on zachowywał się jak wrap_content i aby używać go jak match_parent, możesz owinąć przycisk widżetem Expanded lub polem o rozmiarze.

W widoku ListView przycisk otrzymuje zachowanie match_parent i aby uzyskać zachowanie wrap_content, można go opakować widżetem Flex, takim jak Row.

Użycie widżetu Expanded powoduje, że element podrzędny Row, Column lub Flex rozszerza się, aby wypełnić dostępne miejsce na głównej osi (np. Poziomo w przypadku wiersza lub pionowo w przypadku kolumny). https://docs.flutter.io/flutter/widgets/Expanded-class.html

Użycie widżetu Elastyczny daje elementowi podrzędnemu Row, Column lub Flex elastyczność w rozszerzaniu w celu wypełnienia dostępnej przestrzeni na głównej osi (np. Poziomo dla wiersza lub pionowo dla kolumny), ale w przeciwieństwie do Expanded, Flexible nie wymagać od dziecka wypełnienia dostępnej przestrzeni. https://docs.flutter.io/flutter/widgets/F flexible-class.html

Proste obejście:

Jeśli kontener ma tylko jedno dziecko najwyższego poziomu, możesz określić właściwość wyrównania dla elementu podrzędnego i nadać mu dowolną dostępną wartość. wypełni całą przestrzeń w kontenerze.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

Inny sposób:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

Skorzystałem z tego rozwiązania, wysokość i szerokość ekranu musisz zdefiniować za pomocą MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

Użyj widżetu Wrap.

Aby uzyskać Columnpodobne zachowanie, spróbuj:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

Aby uzyskać Rowpodobne zachowanie, spróbuj:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

Więcej informacji: Wrap (Flutter Widget)

Użyj tej linii kodów wewnątrz kolumny. Dla wrap_content: mainAxisSize: MainAxisSize.min Dla match_parent:mainAxisSize: MainAxisSize.max

W rzeczywistości jest na to bardzo łatwy i zgrabny sposób.

Użyj FractionallySizedBoxwidżetu.

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

Ten widżet jest również bardzo przydatny, gdy chcesz zmienić rozmiar swojego dziecka na ułamek rozmiaru jego rodzica.

Przykład:

Jeśli chcesz, aby dziecko zajmowało 50% szerokości swojego rodzica, podaj widthFactorjako0.5

Aby dziecko wypełniło swojego rodzica, po prostu zawiń je w FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )