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

PreviousSpacerNextStack

Last updated