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不会影响孩子的体型和位置，只会改变孩子的绘画方式。

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

Answer 2

如果您只需要按四分之一旋转图像小部件，您可以使用 RotatedBox 为您执行此自动调整大小：https://api.flutter.dev/flutter/widgets/RotatedBox-class.html

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

2 个答案: