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

1. MainAxisAlignment и CrossAxisAlignment:
   Параметры MainAxisAlignment и CrossAxisAlignment определяют, как дочерние элементы виджетов «Строка» и «Столбец» выравниваются по главной и поперечной осям. Вот некоторые возможные значения этих параметров:

• MainAxisAlignment:

  • start: выравнивает дочерние элементы по началу главной оси.
  • end: выравнивает дочерние элементы по концу главной оси.
  • center: центрирует дочерние элементы по главной оси.
  • spaceBetween: равномерно распределяет свободное пространство между дочерними элементами.
  • spaceEvenly: равномерно распределяет свободное пространство между дочерними элементами, а также до и после первого и последнего дочернего элемента.
  • spaceAround: равномерно распределяет свободное пространство между дочерними элементами и половиной этого пространства до и после первого и последнего дочернего элемента.

• CrossAxisAlignment:

  • start: выравнивает дочерние элементы по началу поперечной оси.
  • end: выравнивает дочерние элементы по концу поперечной оси.
  • center: центрирует дочерние элементы по поперечной оси.
  • Растянуть: растягивает дочерние элементы по поперечной оси.
  • базовая линия: выравнивает дочерние элементы таким образом, чтобы их базовые линии совпадали.

Пример:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

1. MainAxisSize:
   Параметр MainAxisSize определяет, сколько места занимает виджет «Строка» или «Столбец» вдоль главной оси. Два возможных значения:

• MainAxisSize.max: виджет занимает все доступное пространство вдоль главной оси.
• MainAxisSize.min: виджет занимает только минимальное пространство, необходимое его дочерним элементам вдоль главной оси.

Пример:

Row(
  mainAxisSize: MainAxisSize.max,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

1. VerticalDirection:
   Параметр Вертикальное направление определяет порядок, в котором дочерние элементы виджета «Столбец» располагаются вдоль поперечной оси. Два возможных значения:

• VerticalDirection.down: дочерние элементы располагаются сверху вниз.
• VerticalDirection.up: дочерние элементы располагаются снизу вверх.

Пример:

Column(
  verticalDirection: VerticalDirection.up,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

1. TextDirection и TextAlign:
   Параметры TextDirection и TextAlign можно использовать для управления направлением и выравниванием текста в дочерних элементах виджетов «Строка» и «Столбец». Эти параметры особенно полезны при работе с интернационализацией и языками с письмом справа налево.

Пример:

Row(
  textDirection: TextDirection.rtl,
  children: [
    Text('Hello'),
    Text('مرحبا'),
  ],
)
Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Text('Line 1', textAlign: TextAlign.end),
    Text('Line 2', textAlign: TextAlign.end),
  ],
)

В этой статье мы рассмотрели универсальность виджетов «Строка» и «Столбец» во Flutter. Мы обсудили различные параметры, такие как MainAxisAlignment, CrossAxisAlignment, MainAxisSize, Вертикальное направление, TextDirection и TextAlign, и предоставили примеры кода, демонстрирующие их использование. Эффективно используя эти параметры, разработчики могут создавать гибкие и адаптивные макеты в своих приложениях Flutter.