Flutter: расширенный vs гибкий

Я использовал как Expandedи Flexibleвиджеты , и они , кажется, работают одинаково. Есть ли разница между двумя, которые я пропустил?

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

Expanded это просто сокращение для Flexible

Использование расширено таким образом:

Expanded(
  child: Foo(),
);

строго эквивалентно:

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

Вы можете использовать Flexibleover, Expandedесли вам нужен другой fit, полезный в некоторых адаптивных макетах.

Разница между FlexFit.tightи FlexFit.looseзаключается в том, что свободная форма позволяет ее дочернему элементу иметь максимальный размер, в то время как жесткое ограничение заставляет его заполнить все доступное пространство.

Виджет в разделе « Гибкие» по умолчанию имеет значение WRAP_CONTENT, хотя его можно изменить с помощью параметра «Подогнать».

Виджет в разделе Expanded - MATCH_PARENT, вы можете изменить его с помощью flex .

Expanded- Flexibleс комплектом

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

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

Тем временем Expanded изменяет ограничения, отправляемые дочерним элементам строк и столбцов ; это помогает заполнить там доступные места. Поэтому, когда вы помещаете своего ребенка в расширенный виджет, он заполняет пустые места.

Предоставление этих видео с официального канала Flutter на YouTube только для того, чтобы помочь людям, которые могут поискать это в ближайшем будущем ...

1. Расширенный:

2. Гибкость:

Expanded () - это не что иное, как Flexible () с

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

но fit :FlexFit.looseпо умолчанию используется гибкий .

FlexFit.tight = Хочет плотно прилегать к родителю, занимая как можно больше места.

FlexFit.loose = Хочет свободно вписаться в родительский элемент, занимая как можно меньше места для себя.

Единственное отличие, если вы используете Flexibleвместо Expanded, заключается в том, что Flexibleего дочерний элемент имеет такую ​​же или меньшую ширину, чем он Flexibleсам, в то время как Expandedзаставляет его дочерний элемент иметь точно такую ​​же ширину, что и Expanded. Но оба Expandedи Flexibleигнорируют ширину своих детей при определении размеров.

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

Примечание : это означает, что невозможно расширить Rowдетей пропорционально их размерам. Строка либо использует точную ширину дочернего элемента, либо полностью игнорирует ее, когда вы используете Expandedили Flexible.