裁剪小部件周围没有 space 的 Flutter 裁剪

Question

我想剪裁一个小部件并在布局中使用这个剪裁的图像，剪裁时边界应该是图像的可见部分。

使用这个自定义剪辑器

  @override
  Rect getClip(Size size) {
    Rect rect = Rect.fromLTRB(25,0,size.width - 25, size.height);
    return rect;
  }
  @override
  bool shouldReclip(CustomRect oldClipper) {
    return true;
  }
}

导致裁剪图像左侧 25 像素空白 space 和裁剪图像右侧 25 像素空白 space。

并且至少我们可以复制图像的特定区域并 scale/position 它完全在应用程序中... -> 更复杂的期望结果：

Answer 1

您需要添加转换以将小部件转换为新的空 space。请注意，在此示例中，小部件本身仍将占据相同的宽度 - 因此，如果一行中有一些兄弟，例如，它仍将获得 "pushed over" 相同数量的 space。如果您需要更改它，您需要将 SizedBox 添加到此示例的最后部分，以便您可以 trim 将小部件的大小缩小到您已剪裁的部分。

另请注意，这不是一个很好的做法 - 理想情况下，您应该获取实际想要显示的图像。 Flutter 仍然需要将你的整个图像加载到内存中，然后做一些重要的工作来添加你想要的剪辑。这会占用大量额外的 CPU 和内存。但我想有时候你别无选择。

此示例仅显示图像，然后应用自定义剪辑，然后应用翻译，这正是 OP 所需要的。

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart';

void main() {
  final Widget image = Image.network(
      'https://via.placeholder.com/300x60?text=This is just a placeholder');
  const double widthAmount = 100;
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Spacer(),
            image,
            Spacer(),
            ClipRect(
              clipper: CustomRect(widthAmount),
              child: image,
            ),
            Spacer(),
            Transform(
              transform: Matrix4.translation(Vector3(-widthAmount, 0.0, 0.0)),
              child: ClipRect(
                clipper: CustomRect(widthAmount),
                child: image,
              ),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
  ));
}

class CustomRect extends CustomClipper<Rect> {
  CustomRect(this.widthAmount);

  final double widthAmount;

  @override
  Rect getClip(Size size) {
    Rect rect =
        Rect.fromLTRB(widthAmount, 0, size.width - widthAmount, size.height);
    return rect;
  }

  @override
  bool shouldReclip(CustomRect oldClipper) {
    return oldClipper.widthAmount != widthAmount;
  }
}

Answer 2

好吧，上面的解决方案并没有真正起作用，就好像我们翻译剪裁的图像我们得到一些免费的space（我们翻译的数量）。

Flutter 中是否没有任何选项可以只定义一个小部件的区域并将该区域作为一个新的 Widget/Image 并具有定义区域的宽度和高度以便能够定位它（周围没有任何 paddings/white space)，要缩放它，...?

裁剪小部件周围没有 space 的 Flutter 裁剪

Flutter clip without space around the clipped widget

flutter

clipping