flutter - 如何检测小部件中的溢出

Question

我想知道是否有办法检测小部件中发生的溢出并返回一个 bool 值以根据true或false值进行一些更改。
例如，我有一个包含文本的容器。当文本溢出容器时，我想检测，然后在某些条件下使容器变大。我知道有一些类似auto_size_text的方法，但是这里的重点是检测到溢出。

Answer 1

尝试检测何时发生溢出，对我来说似乎是XY Problem。
在Flutter中，子小部件的大小受其父级的限制，很少有可能发生溢出的情况。例如，考虑以下代码:

Container(
  height: 100,
  width: 100,
  color: Colors.red,
  child: Container(
    width: 200,
    height: 800,
    color: Colors.green,
  ),
)

对于没有经验的Flutter开发人员来说，看起来内部容器(200x800)会溢出其父容器(100x100)，但是实际上，内部容器的大小会自动调整以匹配其父容器，因此您不会看到黑色/黄色溢出条纹，您只会在屏幕上看到绿色的100x100容器。
那么，我们什么时候可以期望 children 在Flutter中溢出呢？通常情况下，可能发生溢出的情况有4种:

Flex:非常常用的Column和Row小部件是从Flex小部件继承的，您也可以直接使用它们。在这些小部件中，执行布局时，它们将在主轴上传递“无界”约束。例如，在Column的情况下，其主轴为垂直轴，因此它将允许其子级变得他们想要的高(但不能宽)。如果其子级的组合高度超过了Column本身的布局限制(由Column的父级向下传递)，它将溢出。基本上，如果将Column放在100x100容器中，则Column的高度不能超过100，如果它的子级超过100，则它会溢出。

对于这些情况，检测是可行的，但通常是不必要的。例如，要进行检测，您可以首先使用 LayoutBuilder来获取 Column本身的 parent 约束，因此您知道最大可能的大小(例如100x100，因为该列放置在此类Container中)，那么您需要获取每个子元素的大小，这对于Column来说并不是一件容易的事，因为在布局过程完成之前您不会知道它们的大小。 (如果必须在完成布局之前知道它们的大小，则可以考虑研究 CustomMultiChildLayout或编写自定义 RenderBox)。您也许可以使用 GlobalKey来获取任何小部件的大小，但是一旦 child 被第一次布置，就必须在下一帧中完成。
在这里可能要问的一个更好的问题是:为什么要知道它是否会溢出？如果溢出，您该怎么办？如果您可以为Column分配更多空间，那么为什么不首先分配呢？您可以在Column上设置 MainAxisSize.min来告诉它缩小，除非确实需要，否则不要浪费所有这些额外的空间。或者，也许您想允许滚​​动？如果是这样，只需用 Column小部件包装整个 SingleChildScrollView，并且只要Column过高，它将自动开始滚动。 (顺便说一句，这与使用 ListView不同，如果要滚动的项目很多，则应使用 ListView。)

Stack:堆栈中的小部件，尤其是那些Positioned的部件，如果您有意这样做，可能会使堆栈溢出。例如，通过设置left: -10, top: -20，您将有意识地在绑定(bind)范围之外(左上角的一点)渲染一个小部件。但是堆栈会自动为您裁剪，因此您甚至都不会看到那些溢出的内容。要查看它们，您实际上需要手动更改堆栈的clipBehavior。如果您正在做所有的工作，我认为“检测算法”并不是绝对必要的。

文本:文本非常复杂，具体取决于字体大小(甚至可以由用户在系统级别上进行修改)，字体粗细，字体系列以及许多其他因素，很难计算出一个段落将占用多少空间。在这里TextPainter可用于帮助您进行所有计算，首先对文本进行layout，然后您可以读取其宽度和高度。

OverflowBox:在Flutter中溢出的其他可能方法是有意使用OverflowBox或SizedOverflowBox等小部件。这些小部件有意打破父级约束，但是如果您使用的是这些，我确定您知道自己在做什么。根据使用情况，在决定放置它们的位置之前，可以考虑使用CustomMultiChildLayout来获取每个 child 的大小。

最后说明:，因为您可能想要“通用解决方案”，所以这里是:在Flutter中，大多数事情都不会溢出。如果需要，可以使用 LayoutBuilder小部件来确定小部件的当前布局约束，因此您可以知道 parent 希望的最大和最小大小。要获得子窗口小部件的大小，最好的方法是在布局过程中使用 CustomSingleChildLayout或 CustomMultiChildLayout。要获取屏幕上已经存在的任何小部件的大小和位置，可以使用 GlobalKey。但是，通常更重要的是考虑为什么要知道这些大小，而不是如何获得它们。