Flutter：调整/放大使用 ClipRect 剪辑的图像

Posted 2023-02-23

【中文标题】Flutter：调整/放大使用 ClipRect 剪辑的图像

【英文标题】：Flutter: Resize/scale up an image clipped with ClipRect

【发布时间】：2020-11-09 10:00:55

【问题描述】：

我想要加载一张图片，但只显示了某个裁剪部分。我使用了这里的例子：https://educity.app/flutter/how-to-clip-images-in-flutter

我的（测试）小部件树如下所示：

return Scaffold(
  body: SafeArea(
    child: SingleChildScrollView(
      child: Stack(
        children: <Widget>[
          Text("Hello World"),
          Container(
            alignment: Alignment.topLeft,
            width: MediaQuery.of(context).size.width,
            child: ClipRect(
              child: Container(
                child: Align(
                  alignment: Alignment(-0.5, -0.2),
                  widthFactor: 0.6,
                  heightFactor: 0.5,

                  child: Image.network(
                      'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
                  ),
                ),
              ),
            )
          ),

模拟器（Pixel 3C）输出如下所示：

但是，我想放大裁剪后的图像以跨越窗口的整个宽度，我不知道该怎么做。我已经尝试将其包装在宽度设置为最大宽度的容器中，但这并不能放大图像。有什么建议吗？或者也许有更好的方法来做到这一点？

（我也不确定为什么图像仍然与模拟器顶部的缺口重叠？我以为 SafeArea 会处理这个问题，但没关系。一次一个问题。）

谢谢！

编辑：添加一个示例以更清楚地说明我想要什么（红色圆圈）：

（原谅我可怜的MS绘画技巧）

【参考方案1】：

以下小部件对我有用，适用于各种高度和宽度的照片：

ConstrainedBox(
          constraints: BoxConstraints(
              maxHeight: 300, minHeight: 200, maxWidth: 500, minWidth: 200),
          child: Container(
            child: Image.network("$path",
                height: 200.1, fit: BoxFit.fitWidth),
          ));

【参考方案2】：

只需将您的ClipRect 放入FittedBox 小部件中。

Container(
   width: MediaQuery.of(context).size.width,
   alignment: Alignment.topLeft,
   child: FittedBox(
      fit: BoxFit.fill,
      child: ClipRect(
         child: Container(
            child: Align(
               alignment: Alignment(-0.5, -0.2),
               widthFactor: 0.6,
               heightFactor: 0.5,
               child: Image.network(
                  'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'),
               ),
            ),
         ),
      ),
   )

【讨论】：

太好了，这就是我想要的。谢谢！