裁剪的剪辑周围没有空格的剪辑

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 px的空白，而剪切图像右侧留有25 px的空白。

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) {
    print(size);
    Rect rect =
        Rect.fromLTRB(widthAmount, 0, size.width - widthAmount, size.height);
    return rect;
  }

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