Помогает заполнить строки и столбцы

Если вы еще не видели видео "Виджет недели" о расширении, посмотрите его в первую очередь.

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

Основы

Если у вас есть несколько виджетов в строке или столбце, вы можете обнять детей так:

Row(
  children: [
    MyWidget(),
    MyWidget(),
    MyWidget(),
  ],
),

Или пусть расслабятся:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    MyWidget(),
    MyWidget(),
    MyWidget(),
  ],
),

Если вы хотите, чтобы один из виджетов расширился, чтобы заполнить дополнительное пространство в строке или столбце, вы можете обернуть его расширенным виджетом:

Row(
  children: [
    MyWidget(),
    Expanded(
      child: MyWidget(),
    ),
    MyWidget(),
  ],
),

Если у вас есть пара виджетов, которым вы хотите разделить дополнительное пространство (но не поровну), вы можете установить коэффициент flex:

children: [
    MyWidget(),
    Expanded(
      flex: 2,
      child: MyWidget(),
    ),
    MyWidget(),
    Expanded(
      flex: 1,
      child: MyWidget(),
    ),
  ],
),

Первый и третий виджеты имеют фиксированный размер. Второй и четвертый виджеты в строке разделяют дополнительное пространство, потому что они заключены в Expanded. Однако, поскольку используются коэффициенты flex, второй виджет получает в два раза большую ширину, чем четвертый.

Углубляясь

Вот несколько моментов, о которых следует помнить:

  • Extended должен быть потомком виджета Flex. В противном случае ваше приложение выйдет из строя. Строка и столбец - это расширенные виджеты Flex, поэтому они учитываются.
  • Расширенный виджет - это то же самое, что и гибкий виджет с fit, установленным на FlexFit.tight. Это означает, что размер строго ограничен. То есть он должен заполнить доступное пространство. Использование гибкости с FlexFit.loose позволит детям выбирать свой размер.

Полный код

Если вы хотите поиграть с кодом самостоятельно, вот он:



Сообщество Flutter
Последние твиты от сообщества Flutter (@FlutterComm). Следуйте, чтобы получать уведомления о новых статьях и пакетах с… www.twitter.com