容器边界半径与 ClipRRect 边界半径答案

【问题标题】：Container borderRadius vs ClipRRect borderRadius容器边界半径与 ClipRRect 边界半径
【发布时间】：2019-06-01 06:55:49
【问题描述】：

Container 和 ClipRRect 都具有 borderRadius 属性，但有时 Container 无法工作。这是示例。

不工作

Container(
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(100)),
  child: RaisedButton(onPressed: null),
),

工作

ClipRRect(
  borderRadius: BorderRadius.circular(100),
  child: RaisedButton(onPressed: null),
),

我想知道为什么Container 有时会失败，还有哪些地方会失败？

【问题讨论】：

【解决方案1】：

ClipRRect 插入一个渲染对象，该对象在其子树中修改小部件的渲染树。

ClipRRect 的子树会受到影响，角会被剪掉。

小部件本身及其子项的命中测试将在遵守剪辑路径的情况下执行。这意味着小部件内的手势识别器（/按钮）将不会接收到剪切区域之外的点击。

ClipRRect 相对昂贵，但适合裁剪图像或其他不提供圆角设置的复杂图形元素。

另一方面，Container 与 BoxDecoration and borderRadius / shape 集一起使用时，只需在其背景上绘制一个带圆角的框。

此类容器的子树不会受其父窗口小部件的背景装饰影响。

Container 的命中测试将在borderRadius 的尊重下执行，为容器本身提供“真正圆润的”UI 明智的点击体验。但是，儿童手势识别器不会暴露于装饰设置 - 因此，即使超出“剪辑”区域，手势也将照常接收。

带有shape 或borderRadius 集的装饰容器更可取，因为它的绘制和维护成本相对较低，因为不需要子树的剪贴蒙版。

最后，我必须指出，这里描述的任何一种方式都不是你情况的最佳方式。

要创建一个带圆角的RaisedButton，请使用RoundedRectangleBorder 作为按钮的shape 属性。

例如

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100))
  // ...,
)

【讨论】：