Глубокое погружение в макеты Flutter: Row, Column, Stack и Expanded

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Flutter, Google's UI toolkit for building natively compiled applications, offers a rich set of widgets for creating flexible, responsive…

Flutter, Google's UI toolkit for building natively compiled applications, offers a rich set of widgets for creating flexible, responsive, and beautiful layouts. Among the most fundamental of these are Row, Column, Stack, and Expanded. Understanding these core widgets is essential for any Flutter developer aiming to build clean and maintainable UIs.

In this deep dive, we'll explore how each of these layout widgets works, when to use them, and how to combine them effectively.

1. Виджет Row

Обзор

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

Ключевые свойства

• mainAxisAlignment: Выравнивает дочерние элементы горизонтально (например, start, center, spaceBetween).
• crossAxisAlignment: Выравнивает дочерние элементы вертикально внутри строки.
• children: Список виджетов для отображения в горизонтальном массиве.

Пример

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.star),
    Icon(Icons.star_border),
    Icon(Icons.star_half),
  ],
)

Случаи использования

• Горизонтальные меню навигации
• Панели с кнопками
• Кастомные карточки с иконками и текстом

2. Виджет Column

Обзор

Виджет Column работает так же, как и Row, но располагает свои дочерние элементы вертикально. Он часто используется для размещения виджетов, таких как текст, изображения и поля формы.

Ключевые свойства

• mainAxisAlignment: Выравнивает дочерние элементы вертикально.
• crossAxisAlignment: Выравнивает дочерние элементы горизонтально внутри колонки.
• children: Список виджетов для вертикального размещения.

Пример

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
    SizedBox(height: 10),
    Text('Subtitle or description goes here'),
  ],
)

Области применения

• Формы и поля ввода
• Списки меток и контента
• Макеты для страниц деталей

3. Виджет Stack

Обзор

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

Ключевые свойства

• alignment: Управляет выравниванием дочерних элементов.
• fit: Определяет, как размеры непозиционированных дочерних элементов.
• children: Список виджетов для наложения.

Пример

Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Text('Overlay Text', style: TextStyle(color: Colors.white)),
  ],
)

Области применения

• Бейджи на иконках
• Плавающие кнопки действий поверх контента
• Фоновые изображения с виджетом переднего плана

4. Виджет Expanded

Обзор

Виджет Expanded используется внутри Row, Column, или Flex для заполнения доступного пространства. Он гибко изменяет размер дочернего элемента макета, растягивая его, чтобы заполнить оставшееся пространство.

Ключевые свойства

• flex: Определяет, сколько места должен занимать этот дочерний элемент по сравнению с другими.

Пример

Row(
  children: [
    Expanded(
      child: Container(color: Colors.red, height: 50),
    ),
    Container(width: 100, color: Colors.green, height: 50),
  ],
)

В этом примере красный контейнер заполняет оставшееся пространство после выделения 100 пикселей для зеленого.

Области применения

• Адаптивные макеты
• Равное расстояние между виджетами
• Растягивание виджетов для заполнения ширины/высоты экрана

Комбинирование виджетов для сложных макетов

Пример макета

Вот как можно использовать эти виджеты вместе для более динамичного макета:

Column(
  children: [
    Row(
      children: [
        Expanded(child: Text('Item 1')),
        Text('Price'),
      ],
    ),
    SizedBox(height: 10),
    Stack(
      children: [
        Container(height: 100, color: Colors.grey[300]),
        Positioned(
          bottom: 10,
          right: 10,
          child: FloatingActionButton(onPressed: () {}),
        ),
      ],
    ),
  ],
)

Этот макет объединяет Column, Row, Expanded и Stack для создания современного интерфейса, который адаптируется под различные размеры экранов и взаимодействия.

Лучшие практики

• Не используйте чрезмерное вложение: Глубокое вложение может привести к нечитаемому коду. Рассмотрите возможность разбиения на переиспользуемые виджеты.
• Используйте Expanded с умом: Он должен использоваться только внутри гибких виджетов (Row, Column).
• Используйте Spacer: Когда вам просто нужен пустой пространство в гибком макете, Spacer() — это более чистая альтернатива Expanded с пустым Container.

Заключение

Овладение Row, Column, Stack и Expanded дает вам возможность создать практически любой макет в Flutter. Эти строительные блоки, используемые осознанно, составляют основу визуально привлекательных и адаптивных приложений. С горячей перезагрузкой Flutter не бойтесь экспериментировать с разными макетами, пока не найдете тот, который работает лучше всего.

Начните с малого, быстро итерируйте, и вскоре вы будете создавать потрясающие интерфейсы с легкостью.