flutter - 如何使旋转图像填充 Flutter 中的可用空间？

Question

我正在尝试将图像显示为圆形菱形。我可以让旋转工作，如果我使用 debugPaintSizeEnabled，它会显示菱形，但图像不会填充该空间。我怎样才能让它膨胀以填充钻石？

截图如下:

这是创建菱形小部件的代码:

Transform.rotate(
        angle: math.pi / 4,
        child: ClipRRect(
          borderRadius: new BorderRadius.circular(24.0),
          child: Transform.rotate(
            angle: - math.pi / 4,
            child: Image(
              image: AssetImage("img/kitten_200_1.jpeg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),

Answer 1

1) Transform.rotate 不会影响 child 的大小和位置——它只会改变 child 的绘画方式。

2) 因为您的屏幕截图中没有白色“三角形”中的图像数据，所以要用图像填充它们，我们应该放大图像。但随后它会与相邻的小部件重叠，因此我们也会缩小菱形。

double L = 100; // image side length
double R = 24; // rounding radius
double k = sqrt(2) - R / L * 2 * (sqrt(2) - 1); // a little bit of geometry

现在缩放!

Transform.rotate(
  angle: pi / 4,
  child: Transform.scale(
    scale: 1 / k,
    child: ClipRRect(
      borderRadius: new BorderRadius.circular(R),
      child: Transform.rotate(
        angle: - pi / 4,
        child: Transform.scale(
          scale: k,
          child: Image(
            image: ...,
            width: L,
            height: L,
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
  ),
);