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

Posted 2023-03-23

【中文标题】颤振剪辑，剪辑的小部件周围没有空间

【英文标题】：Flutter clip without space around the clipped widget

【发布时间】：2020-08-13 16:41:03

【问题描述】：

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

使用此自定义剪辑器

  @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 的空白区域。

至少我们不希望复制图像的特定区域并在应用程序中精确地缩放/定位它... -> 更复杂的期望结果：

【问题讨论】：

发布具有所需结果的图像

见上图

【参考方案1】：

您需要添加一个转换来将小部件转换到新的空白空间。请注意，在此示例中，小部件本身仍将占据相同的宽度 - 因此，例如，如果连续有一些兄弟姐妹，它仍将被相同数量的空间“推过”。如果您需要更改它，您需要在此示例的最后部分添加SizedBox，以便您可以将小部件的大小缩小到您已剪裁的部分。

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

此示例显示仅显示图像，然后应用自定义剪辑，然后应用翻译，这正是 OP 正在寻找的。​​p>

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;
  

【参考方案2】：

好的，上面的解决方案并没有真正起作用，就像我们翻译剪切的图像一样，我们得到了一些空闲空间（我们翻译的数量）。

Flutter 中是否没有任何选项可以仅定义小部件的区域并将该区域作为新的小部件/图像，其宽度和高度与所定义区域的完全相同，以便能够定位它（没有任何填充/周围的空白），缩放它，...？