Question

我有一个由3个容器组成的列，中间的容器通过将其旋转回一点来进行转换。

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。

具有特定大小但通过其原始限制的小部件到它的孩子，然后可能会溢出。

通过使用此列，列将认为中间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,
      )
    ],
  ),

在Flutter中裁剪变形的小部件

1 个答案: