Question

我想剪切一个小部件并在布局中使用此剪切的图像，并且剪切后边界应成为imgage的可见部分。

使用此自定义剪切器

  @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像素的空白空间，在剪切图像的右侧留出25像素的空白空间。

至少我们要复制图像的特定区域并将其精确地缩放/放置在应用程序中...->更复杂的所需结果：

Answer 1

您需要添加一个转换以将小部件平移到新的空白空间。请注意，在此示例中，小部件本身仍将占据相同的宽度-因此，例如，如果连续存在同级，则仍将“推翻”相同的空间量。如果需要更改，则需要在此示例的最后部分添加一个SizedBox，以便可以将小部件的尺寸缩小到已裁剪的部分。

还请注意，这不是一个很好的做法-理想情况下，您应该获取要实际显示的图像。 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

好的，上面的解决方案并不能真正发挥作用，就好像我们翻译裁剪后的图像会得到一些自由空间（我们翻译的数量）一样。

在Flutter中没有任何选项可以仅定义窗口小部件的区域并将该区域作为新的窗口小部件/图像使用，其宽度和高度恰好与所定义区域的宽度和高度能够放置（没有任何填充/周围的空白），以缩放比例，...？

颤动的剪辑，剪辑的小部件周围没有空间

2 个答案: