заполнение стопкой при повороте - PullRequest
Новая
       2

заполнение стопкой при повороте

0 голосов
/ 07 мая 2020

Есть ли способ реализовать повернутый на 90 градусов контейнер, который заполнит пространство, доступное внутри стека? Когда я пытаюсь установить размер дочернего элемента повернутого виджета, кажется, что он все еще ограничен родительским виджетом. Я хотел бы знать, есть ли способ заставить его работать. 

Widget build(BuildContext context) {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      // something with size to define the size of the stack
      Container(
        color: Colors.white,
        height: 600,
        width: 300,
      ),
      Positioned(
        child: LayoutBuilder(builder: (context, constraints) {
          return SizedBox(
            width: constraints.maxHeight,
            height: constraints.maxWidth,
            child: Transform.rotate(
              angle: math.pi / 2,
              // this should have height equal to constraints.maxWidth
              // and width equal to constraints.maxHeight
              // but the height is equal to constraints.maxWidth
              // and the width as well
              child: Container(color: Colors.black.withOpacity(0.5)),
            ),
          );
        }),
      ),
    ],
  );
}

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Вы можете исправить это, используя OverflowBox вместо SizedBox

См. Разницу между SizedBox и OverflowBox ниже:

SizedBox

Поле с указанным размером.

Если задан дочерний элемент, этот виджет заставляет его дочерний элемент иметь заданные c ширину и / или высоту (при условии, что значения разрешены родительским элементом этого виджета).

OverflowBox

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

Надеюсь, это поможет.

0 голосов
/ 07 мая 2020

Я только что подумал, что есть виджет OverflowBox, который можно использовать для получения такого поведения. Я заменил SizedBox виджетом OverflowBox, и все стало работать, как ожидалось. 

Widget build(BuildContext context) {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      // something with size to define the size of the stack
      Container(
        color: Colors.white,
        height: 600,
        width: 300,
      ),
      Positioned(
        child: LayoutBuilder(builder: (context, constraints) {
          return OverflowBox(
            maxWidth: constraints.maxHeight,
            maxHeight: constraints.maxWidth,
            child: Transform.rotate(
              angle: math.pi / 2,
              // has the expected size
              child: Container(color: Colors.black.withOpacity(0.5)),
            ),
          );
        }),
      ),
    ],
  );
}
...