容器 borderRadius 与 ClipRRect borderRadius

Question

双方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有时会失败，还有什么地方会失败？

Answer 1

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

的子树ClipRRect 将受到影响，角将被剪裁。

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

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

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

此类 Container 的子树不会受到其父小部件的背景装饰的影响。

Container将执行的命中测试borderRadius受尊重，为容器本身提供“真正全面”的 UI 智能点击体验。然而，儿童手势识别器不会暴露在装饰设置中——因此，即使在“剪裁”区域之外，也会照常接收手势。

使用shape或borderRadiusset装饰的容器是可取的，因为它的绘制和维护成本相对较低，因为不需要子树的剪贴蒙版。

最后，我必须注意，这里描述的两种方式都不是您的最佳方式。

要创建一个RaisedButton圆角使用RoundedRectangleBorder为shape您的按钮的财产。

例如

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