Flutter 溢出：隐藏的类比答案

【问题标题】：Flutter overflow: hidden analogueFlutter 溢出：隐藏的类比
【发布时间】：2018-11-01 18:00:40
【问题描述】：

是否有任何 Flutter 小部件以任何方式阻止孩子们在 Container 外绘画？

我的这个容器有一个孩子，它可能会进行一些变换（例如缩放和旋转），因此可以在外面绘制

我想将孩子的绘画限制在父容器内，就像带有 CSS overflow:hidden; 的 div 会表现一样。

一个样本：

return Container( // the one with overflow hidden -ish behavior
   height: 300.0,
   child: TheTransformingChild() // the one that can get bigger that container
)

【问题讨论】：

标签： dart flutter

【解决方案1】：

有 - 您正在寻找的是 OverflowBox 或 SizedOverflowBox 和 ClipRect、ClipOval、ClipPath 或 ClipRRect 等的组合。

我建议您查看 Flutter 小部件目录的 painting 和 layout 部分（以及其余部分），因为它通常可以很好地展示您需要的小部件。

【讨论】：

slidable_widget 也有同样的问题。我有一个选项卡式导航，一个选项卡包含一个可滑动列表（slidable_widget 插件）。当它们向一个方向滑动时，它们会溢出其父容器并在另一个选项卡上造成故障（它们是可见的）。作为解决方案，我将 TabBarView-Children 包裹在 ClipRect 中，故障就消失了。这相当于隐藏在 HTML 中的 z-index 和溢出。
用例：我将带有边框和图标装饰的 TextInput 包装到 Container 小部件中。当我将其高度设置为零时 - 边框和图标绘制在零高度容器之外。 ClipRect 正确隐藏所有子内容。感谢您的建议！
而不是 OverflowBox 小部件 ClipRect 对我来说效果很好。

【解决方案2】：

我认为使用clipBehavior：容器中的属性更容易

Container(
clipBehavior: Clip.hardEdge,
height: 400,
width: 400,
child :TheTransformingChild(),)

【讨论】：

这正是我所需要的。非常感谢。
完美！谢谢！

【解决方案3】：

一个简单的方法是使用Wrap 组件（下面是您的示例）。

return Container( // the one with overflow hidden -ish behavior
  height: 300.0,
  child: Wrap(
    children: [
      TheTransformingChild()
    ],
  )
)

在大多数情况下，它还替换了Column 组件：

使用列

使用包装

【讨论】：