Флаттер: розширене проти гнучкого

Я використовував 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, хоча ви можете змінити його за допомогою параметра Fit.

Віджет у розділі Розгорнуте - 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's YouTube лише для допомоги людям, які можуть шукати це у майбутньому ...

1. Розгорнуто:

2. Гнучкі:

Expanded () - це не що інше, як гнучке () за допомогою

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.