Когда вы думаете об обтекании, вы обязательно скажете «корректировка». Что ж, правильно. Виджет Flutter Wrap фактически делает то же самое с примененными виджетами. В этой статье мы узнаем, как работает этот виджет, а также другие свойства, так что давайте приступим к нему.

Содержание

Структура проекта

Выполнение

Структура проекта

Допустим, у нас есть 3

Контейнер имеет круглую форму, имеет набивку и обернут.

Внутри виджета строки

Вот фрагмент

Row(
 children: [
   buildContainer(context),
   buildContainer(context),
   buildContainer(context),
  ],
),

///Function
Widget buildContainer(BuiltContext context) {
  return Container(
    padding: const EdgeInsets.all(5),
    decoration: BoxDecoration(
      color: Colors.blue,
      shape: BoxShape.circle,
    ),
   height: 90,
   width: 90,
),

Вот пользовательский интерфейс

Выполнение

Wrap делает переход для вашего следующего элемента пользовательского интерфейса

В продолжение…

Здесь, если я увеличим счетчик этой функции до 5 или, может быть, до 6, это приведет к

Теперь вы определенно поняли концепцию Wrap. Наверное…

Теперь, если я заменю «Row» на Wrap, тот же самый UI теперь будет выглядеть так:

Вот обновленный фрагмент

Wrap(
 children: [
   buildContainer(context),
   buildContainer(context),
   buildContainer(context), 
   buildContainer(context), 
   buildContainer(context),
  ],
),

Использование Wrap автоматически настраивает указанные вами элементы пользовательского интерфейса.

Давайте посмотрим, что еще мы можем сделать с Wrap.

- Изучение свойств обертки

Чтобы применить пространство по горизонтали, по вертикали, мы используем

интервал (двойной)

runSpacing (двойной)

Чтобы выровнять все дочерние элементы, которые мы используем

выравнивание: WrapAlignment… yourChoice

Это интересно

Чтобы обтекание действовало как столбец (вертикально), ряд (горизонтально), нам нужно указать направление как

направление: Axis.vertical

направление: Axis.horizontal

Вот измененный интерфейс

Вот обновленный фрагмент

Wrap(
 spacing: 18,
 runSpacing: 10, 
 alignment: WrapAlignment.spaceEvenly, 
 direction: Axis.vertical,
 children: [
   buildContainer(context),
   buildContainer(context),
   buildContainer(context), 
   buildContainer(context), 
   buildContainer(context),
  ],
),

Пора заканчивать эту статью. Надеюсь, это поможет вам!

- Вот отсылка с моего канала на YouTube

- Узнайте больше об обертывании



Класс Wrap — библиотека виджетов — Dart API
Виджет, который отображает дочерние элементы в нескольких горизонтальных или вертикальных прогонах. Wrap размещает каждый дочерний элемент и пытается…api.flutter.dev



Вот и все!

Если этот краткий обзор был вам полезен, 👏.

Не стесняйтесь задавать свои вопросы здесь или Twitter. Я постараюсь ответить как можно скорее.



Мустафа Тахир — Разработчик мобильных приложений — Parazelsus Pakistan Pvt. ООО | LinkedIn
Ассаламу о алейкум, это Мустафа Тахир, активно занимающийся разработкой мобильных приложений…www.linkedin.com





мустафатахирхуссейн — обзор
Энтузиаст-компьютерщик. Мобильный инженер-программист Flutter. 😉 Flutter Engineer Найдите видео Flutter на Youtube…github.com