Jak mogę tworzyć widżety układu na podstawie rozmiaru rodzica?

Question

Powiedzmy, że masz widżet nadrzędny, który może mieć zmienny rozmiar.

Na przykład:

var container = new Container(
    height: 200.0, // Imagine this might change 
    width: 200.0, // Imagine this might change 
    // Imagine content in this container will 
    // depend on the parent container 
    child: new Container(), 
); 

A może chcesz mieć dziecko z kontenera nadrzędnego, aby uczynić coś innego, na podstawie tego, co wielkość że to podane.

Pomyśl o responsywnych punktach przerw w projekcie, jeśli szerokość jest większa niż X, użyj tego układu, jeśli szerokość jest pod X, użyj tego układu.

Jaki jest najlepszy sposób na zrobienie tego w programie Flutter?

Answer 1

Będziesz chciał użyć widgetu LayoutBuilder, który będzie budował "w czasie układania i zapewnia ograniczenia widżetów nadrzędnych."

LayoutBuilder przyjmuje funkcję kompilacji, która ma standard BuildContext wraz z BoxConstraints jako parametrami, które można wykorzystać do dynamicznego renderowania widgetów na podstawie rozmiaru.

Umożliwia zbudowanie prostego przykładu widgetu, który renderuje "LARGE", jeśli szerokość nadrzędna jest większa niż 200dp i "SMALL", jeśli szerokość rodzica jest mniejsza lub równa.

var container = new Container(
    // Toggling width from 100 to 300 will change what is rendered 
    // in the child container 
    width: 100.0, 
    // width: 300.0 
    child: new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) { 
     if(constraints.maxWidth > 200.0) { 
     return new Text('BIG'); 
     } else { 
     return new Text('SMALL'); 
     } 
    } 
), 
);