Question

有没有一种方法可以实现将容器旋转90度以填充Stack内部可用空间的方法？当我尝试设置旋转小部件的子级大小时，似乎仍受父小部件的限制。我想知道是否有办法使它工作。

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)),
            ),
          );
        }),
      ),
    ],
  );
}

Answer 1

您可以使用OverflowBox代替SizedBox

来解决此问题

查看下面的SizedBox和OverflowBox之间的区别：

SizedBox

具有指定大小的盒子。

如果给孩子一个孩子，则此小部件将强制其孩子具有特定的宽度和/或高度（假定此小部件的父级允许使用值）。

溢出框

一个小部件，对其子对象施加的约束与从其父对象获得的约束不同，可能使子对象溢出父对象。

我希望这会有所帮助。

Answer 2

我刚刚发现有一个名为OverflowBox的小部件，可以用来实现此行为。我用一个OverflowBox小部件交换了SizedBox，一切开始按预期工作。

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)),
            ),
          );
        }),
      ),
    ],
  );
}

Answer 3

RotatedBox(
  quarterTurns: _rotateAngel,
  child: _yourChildWidget());

旋转时堆栈定位填充

3 个答案: