如何在 flutter 中旋转 CachedNetworkImage 的图像？答案

【问题标题】：How to rotate an image of CachedNetworkImage in flutter?如何在 flutter 中旋转 CachedNetworkImage 的图像？
【发布时间】：2023-01-14 09:27:02
【问题描述】：

这是颤动的应用程序。这是一个只有肖像模式的应用程序。

我想展示我的产品的一些图片。当用户触摸图像时，我想使用 CachedNetworkImage 在全屏上显示它。

但问题是，当宽度大于高度时，Boxfit.cover 只显示图像的中间部分（左侧和右侧未显示）。如果我让它显示所有图片，那么上面和下面就会有很多空白空间

我宁愿让图像（CachedNetworkImage）旋转 90 度，这样整个图像就可以适合全屏。

任何的想法？

【问题讨论】：

包裹在 RotatedBox 中进行旋转。
有很多方法可以实现它，简单的方法是将 Transform.rotate() 包裹起来并设置一个 angle:90

标签： flutter

【解决方案1】：

在 Flutter 中，您可以使用 Transform.rotate() 小部件来旋转图像。以下是如何使用它来旋转 CachedNetworkImage 的示例：

    Transform.rotate(
    angle: 0.1, // angle in radians
    child: CachedNetworkImage(
        imageUrl: 'your_image_url',
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
    ),
)

您可以调整角度属性以更改旋转角度。角度以弧度为单位，而不是度数。要将度数转换为弧度，可以使用公式弧度 = (度数 * pi) / 180。

您还可以使用 AnimatedContainer ，它具有可用于旋转图像的属性 rotation ，这是一个示例：

    AnimatedContainer(
    duration: Duration(seconds: 2),
    rotation: _angle,
    child: CachedNetworkImage(
        imageUrl: 'your_image_url',
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
    ),
)

您可以使用 AnimationController 来控制旋转并更新容器中使用的 _angle 的值。

您还可以使用 AnimatedBuilder 和 Animation 来旋转图像。将 CachedNetworkImage 包装在 Container 或 SizedBox 中以确保图像具有固定大小是一种很好的做法，这样旋转将更容易预测。

【讨论】：