🧩Row

Что такое Row

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

Пример использования

В этом примере мы создадим интерфейс с несколькими кнопками, расположенными горизонтально.

import 'package:flutter/material.dart';

class RowExample extends StatelessWidget {
  const RowExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Row Example')),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center, // Центрируем элементы по горизонтали
        children: [
          ElevatedButton(
            onPressed: () {},
            child: const Text('Button 1'),
          ),
          const SizedBox(width: 10), // Пробел между кнопками
          ElevatedButton(
            onPressed: () {},
            child: const Text('Button 2'),
          ),
          const SizedBox(width: 10), // Пробел между кнопками
          ElevatedButton(
            onPressed: () {},
            child: const Text('Button 3'),
          ),
        ],
      ),
    );
  }
}

Как работает код

1. Scaffold — это основа для нашего интерфейса, как холст для художника.

2. AppBar — верхняя панель, где написано название приложения.

3. Row — используется для горизонтального размещения дочерних виджетов.

4. ElevatedButton — кнопки, которые будут расположены в строке.

5. mainAxisAlignment — устанавливает, как дочерние элементы будут выровнены вдоль главной оси (в нашем случае — горизонтально по центру).

6. SizedBox — используется для создания пространства между кнопками.

Все настройки Row

1. children

   • Описание: Список дочерних виджетов, которые будут расположены горизонтально.

   • Пример:

     children: [
       ElevatedButton(...), // Первая кнопка
       ElevatedButton(...), // Вторая кнопка
     ] 

   • Применение: Позволяет вам указать, какие элементы вы хотите отобразить в строке.

2. mainAxisAlignment

   • Описание: Определяет, как дочерние элементы будут выровнены вдоль главной оси (горизонтально).

   • Пример:

     mainAxisAlignment: MainAxisAlignment.center // Элементы будут выровнены по центру

   • Применение: Позволяет контролировать выравнивание элементов внутри Row. Можно использовать различные значения, такие как start, end, spaceBetween, spaceAround и другие.

3. crossAxisAlignment

   • Описание: Определяет, как дочерние элементы будут выровнены вдоль поперечной оси (вертикально).

   • Пример:

     crossAxisAlignment: CrossAxisAlignment.start // Элементы будут выровнены по верхнему краю

   • Применение: Используется для управления вертикальным выравниванием элементов в строке.

4. mainAxisSize

   • Описание: Определяет, насколько большую ширину займет Row. Может быть MainAxisSize.max (максимальная ширина) или MainAxisSize.min (минимальная ширина).

   • Пример:

     mainAxisSize: MainAxisSize.min // Row займет только минимально необходимое пространство

   • Применение: Полезно, когда нужно контролировать размер Row в зависимости от его содержимого.

Итог

Row — это отличный инструмент для организации элементов горизонтально в вашем интерфейсе. Если вам нужно расположить виджеты один рядом с другим, используйте Row, и он поможет вам создать аккуратный и структурированный дизайн.