在Flutter中裁剪一个转换的小部件

Question

我有一个由3个容器组成的Column，中间的那个容器通过向后旋转变换了一下。

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
    ),
    Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)
        ..rotateX(pi / 3),
      child: Container(
        height: 100,
        width: 100,
        color: Colors.red,
      ),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
    )
  ],
),

由于Transform会使用它的子项的高度，所以现在中间的项就剩下一些上下空间。有什么办法可以把它去掉吗？

Answer 1

我想出的一个办法是用 SizedOverflowBox.

一个具有特定大小的小组件，但将其原始约束传递给其子节点，子节点可能会溢出。

使用这种方式，Column会认为中间Container的尺寸比实际尺寸小。

 child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        height: 100,
        width: 100,
        color: Colors.green,
      ),
      SizedOverflowBox(
        size: Size(100, cos(pi/3) * 100),
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001)
            ..rotateX(pi / 3),
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ),
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.green,
      )
    ],
  ),