Во Flutter выравнивание виджетов является важной частью создания визуально привлекательных пользовательских интерфейсов. Одним из мощных вариантов выравнивания является выравнивание по «базовой линии», которое гарантирует, что базовая линия текста нескольких виджетов выравнивается по вертикали. В этой статье мы рассмотрим различные методы достижения выравнивания базовой линии во Flutter, сопровождаемые примерами кода.

Метод 1: Виджет базовой линии
Самый простой способ добиться выравнивания базовой линии — использовать виджет Baseline. Виджет Baselineпринимает параметр baseline, который определяет расстояние по вертикали от базовой линии до верха виджета. Вот пример:

Baseline(
  baseline: 20.0,
  baselineType: TextBaseline.alphabetic,
  child: Text(
    'Baseline Alignment',
    style: TextStyle(fontSize: 24.0),
  ),
)

Метод 2: собственный расчет базовой линии
В некоторых случаях может потребоваться выполнить специальные расчеты базовой линии. Flutter предоставляет виджет CustomSingleChildLayout, который позволяет вам определить собственную стратегию макета. Вот пример:

CustomSingleChildLayout(
  delegate: BaselineLayoutDelegate(baseline: 40.0),
  child: Text(
    'Custom Baseline Alignment',
    style: TextStyle(fontSize: 24.0),
  ),
)
class BaselineLayoutDelegate extends SingleChildLayoutDelegate {
  final double baseline;
  BaselineLayoutDelegate({required this.baseline});
  @override
  Size getSize(BoxConstraints constraints) {
    return Size(constraints.maxWidth, constraints.maxHeight);
  }
  @override
  Offset getPositionForChild(Size size, Size childSize) {
    final double y = baseline - childSize.height;
    return Offset(0.0, y);
  }
  @override
  bool shouldRelayout(BaselineLayoutDelegate oldDelegate) {
    return baseline != oldDelegate.baseline;
  }
}

Метод 3: выравнивание базовых линий внутри строк или столбцов
Чтобы выровнять базовые линии внутри строки или столбца, вы можете использовать свойство CrossAxisAlignment.baseline. Вот пример:

Column(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Text('Widget 1', style: TextStyle(fontSize: 20.0)),
    Text('Widget 2', style: TextStyle(fontSize: 16.0)),
    Text('Widget 3', style: TextStyle(fontSize: 24.0)),
  ],
)

Достижение базового выравнивания во Flutter имеет решающее значение для создания визуально согласованных пользовательских интерфейсов. В этой статье мы рассмотрели три различных метода: использование виджета Baseline, выполнение пользовательских расчетов базовой линии с помощью CustomSingleChildLayoutи выравнивание базовых линий внутри строк или столбцов. Используя эти методы, вы можете улучшить общий дизайн и читаемость ваших приложений Flutter.