Как я могу отображать виджеты на основе размера родителя?

Допустим, у вас есть родительский виджет, который может иметь переменный размер.

Например:

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(), 
);

И, возможно, вы хотите, чтобы дочерний родительский контейнер отображал что-то другое в зависимости от того, какой размер он дал.

Подумайте о контрольных точках контрольной точки, если ширина превышает X, используйте этот макет, если ширина находится под X, используйте этот макет.

Какой лучший способ сделать это в Flutter?

Ответы

Ответ 1

Вы захотите использовать виджет LayoutBuilder, который будет создаваться во время макета и обеспечивает ограничения родительского виджета.

LayoutBuilder принимает функцию build() которая имеет стандартный BuildContext вместе с BoxConstraints в качестве параметров, которые можно использовать для динамической визуализации виджетов в зависимости от размера.

Давайте создадим простой пример виджета, который отображает "LARGE", если родительская ширина больше 200px, и "SMALL", если родительская ширина меньше или равна этому.

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