时间戳

首页 > 解决方案 > 如何使旋转的图像填充 Flutter 中的可用空间？

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

问题描述

我正在尝试将图像显示为圆形菱形。我可以让旋转工作，如果我使用 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,
            ),
          ),
        ),
      ),

标签： fluttertransform

解决方案

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

推荐阅读