🧩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, и он поможет вам создать аккуратный и структурированный дизайн.

PreviousStackNextОтображение текста

Last updated