🧩Column

Что такое Column

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

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

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

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Column Example')),
      body:  Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('First Item'),
            const Text('Second Item'),
            const Text('Third Item'),
            Container(
              color: Colors.red,
              height: 200,
              width: 200,
              child: const Text('Red Container'),

            ),
            const SizedBox(height: 20,),
            const TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter your name',
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

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

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

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

4. Text — это текстовые элементы, которые мы хотим показать, и они будут выстраиваться один под другим в колонне.

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

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

1. children

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

   • Пример:

     children: [
       Text('First Item'),
       Text('Second Item'),
     ] // Дочерние элементы, которые будут размещены в колонне

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

2. mainAxisAlignment

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

   • Пример:

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

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

3. crossAxisAlignment

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

   • Пример:

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

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

4. mainAxisSize

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

   • Пример:

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

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

Итог

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