Небольшие хитрости Flutter: в ближайшее время Row/Column будут поддерживать Flex.spacing

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

Первое упоминание этой проблемы было сделано примерно в начале 2018 года в тема #16957. Причина заключалась в том, что в Flutter компонент Wrap имеет параметры runSpacing и spacing, которые используются для настройки вертикального и горизонтального отступов. Однако почему более универсальные компоненты Column и Row не имеют поддержки spacing?

Затем в 2020 году пользователи снова обратились с просьбой реализовать встроенный spacing для Row/Column в тема #55378. Однако менеджеры продукта сочли это не таким важным требованием и считали, что аналогичные требования могут быть удовлетворены через дополнительные реализации, а усложнение Flex для внедрения этого "необязательного" параметра было бы лишним.

На самом деле отсутствие параметров spacing в Column и Row не является уникальной проблемой Flutter. В ранних версиях Jetpack Compose также отсутствовал параметр itemSpacing. Только четыре года назад Jetpack Compose внёс изменения согласно пожеланию пользователей, после чего появилась поддержка Arrangement.spacedBy, что стало веским аргументом для того, чтобы Flutter тоже внёс поддержку spacing в Row/Column.

Кроме того, пользователи сообщили, что в настоящее время большинство UI-фреймворков поддерживают встроенные расстояния для строки/колонки, даже те, где ранее такого параметра не было, как в случае с Jetpack Compose. Поэтому отказ Flutter от внедрения такой простой в реализации возможности выглядит неразумным, и поэтому официальные лица начали согласиться с этим требованием.

И благодаря упорству и усилиям TahaTesser этот запрос был наконец-то принят. Поддержка расстояний прямо в Flex действительно значительно влияет на внутреннюю структуру кода.

Как программисты мы все должны понимать, что если из-за одного параметра расстояние может возникнуть конфликт с уже используемыми бизнес-приложениями, последствия могут быть серьёзными. Безусловно, TahaTesser очень настойчив, обычный человек скорее всего не стал бы заниматься этим. Исходя из результатов изменения, ключевой момент заключается в том, что была добавлена поддержка свойства расстояние для основной оси размещения, что отразилось на значении позицияДочернегоЭлементаСобственнойОси. В конечном итоге объём изменений был небольшим, поэтому они были успешно объединены, а уровень рисков был невысоким.

Наконец, после всего сказанного выше, для большинства разработчиков это означает возможность использования свойства spacing для настройки расстояния между дочерними элементами в компонентах Row и Column, используя главную ветку. Кроме того, был открыт запрос на добавление параметра для указания расстояния между страницами в компоненте PageView (#78200).На данный момент это положительно влияет на разработчиков Flutter, и можно предположить, что следующий стабильный выпуск будет уже содержать использование свойства spacing в компонентах Row и Column. Также видно, что если есть веские причины, то можно продвигать некоторые «необходимые функции», хотя, возможно, потребуется также человек, готовый настоять на своём.

const Column(
  spacing: 20.0,
  children: <Widget>[
    Row(
      spacing: 50.0,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        ColoredBox(
          color: Color(0xFFFF0000),
          child: SizedBox(
            width: 50.0,
            height: 75.0,
            child: Center(
              child: Text(
                'КРАСНЫЙ',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        ColoredBox(
          color: Color(0xFF00FF00),
          child: SizedBox(
            width: 50.0,
            height: 75.0,
            child: Center(
              child: Text(
                'ЗЕЛЁНЫЙ',
                style: TextStyle(color: Colors.black),
              ),
            ),
          ),
        ),
      ],
    ),
    Row(
      spacing: 100.0,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ColoredBox(
          color: Color(0xFFFF0000),
          child: SizedBox(
            width: 50.0,
            height: 75.0,
            child: Center(
              child: Text(
                'КРАСНЫЙ',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        ColoredBox(
          color: Color(0xFF00FF00),

Полностью сохранены все кавычки и текст внутри них, а также остались без изменений все числовые значения и структура кода.```markdown child: SizedBox( width: 50.0, height: 75.0, child: Center( child: Text( 'Зелёный', style: TextStyle(color: Colors.black), ), ), ), ), ], ), ], )

![](http://img.cdn.guoshuyu.cn/20240903_Flutter-N33/image8.png)