Рубрики
Flutter

CustomSingleChildLayout пример работы

CustomSingleChildLayout — это виджет Flutter, который позволяет создавать кастомные макеты для одного дочернего виджета.

Вот пример использования CustomSingleChildLayout:

class MyCustomLayout extends SingleChildLayoutDelegate {
  @override
  Offset getPositionForChild(Size size, Size childSize) {
    // Рассчитываем позицию для дочернего виджета
    return Offset(size.width - childSize.width, 0);
  }

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    // Ограничиваем максимальный размер дочернего виджета
    return BoxConstraints(
      maxHeight: constraints.maxHeight,
      maxWidth: 100,
    );
  }

  @override
  bool shouldRelayout(MyCustomLayout oldDelegate) {
    // Возвращаем true, чтобы перестроить макет при каждом обновлении
    return true;
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CustomSingleChildLayout Example'),
      ),
      body: Center(
        child: CustomSingleChildLayout(
          delegate: MyCustomLayout(),
          child: Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

В этом примере мы создаем виджет MyWidget, который содержит CustomSingleChildLayout в качестве дочернего виджета. Мы создаем кастомный макет, наследуясь от SingleChildLayoutDelegate и определяя методы getPositionForChild и getConstraintsForChild.

Метод getPositionForChild определяет позицию для дочернего виджета относительно размеров и расположения родительского виджета. В нашем примере мы устанавливаем позицию дочернего виджета так, чтобы он был прижат к правому краю родительского виджета.

Метод getConstraintsForChild определяет ограничения для размера дочернего виджета. В нашем примере мы устанавливаем максимальную ширину дочернего виджета на 100 пикселей, а максимальную высоту на максимальную высоту родительского виджета.

Мы также определяем метод shouldRelayout, который возвращает true, чтобы перестроить макет при каждом обновлении.

Затем мы создаем CustomSingleChildLayout, передавая ему наш кастомный макет в качестве делегата, и контейнер в качестве дочернего виджета. Контейнер отображает простой синий прямоугольник размером 50х50 пикселей.

Таким образом, CustomSingleChildLayout располагает контейнер на правой стороне родительского виджета, ограничивая его ширину в 100 пикселей. В результате мы получаем кастомный макет для нашего дочернего виджета, который можно настроить на свое усмотрение.

CustomSingleChildLayout может быть полезен в случаях, когда вам нужно настроить расположение и размеры дочернего виджета в зависимости от контекста и других параметров. Кроме того, этот виджет может повысить производительность, так как он не использует медиа-запросы, чтобы получить размеры экрана, как это делает MediaQuery.of(context).size. Однако, в зависимости от конкретной ситуации, может оказаться, что использование MediaQuery.of(context).size более подходящее решение.