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 and borderRadius / shape集一起使用时，只是在背景上绘制一个带有圆角的框。

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

针对Container的命中测试将在尊重borderRadius的情况下执行，从而为容器本身提供“真正圆润”的UI方向敲击体验。但是，儿童手势识别器不会受到装饰设置的影响-因此，即使在“剪切”区域之外，手势也将照常接收。

设置了shape或borderRadius的装饰容器比较可取，因为不需要子树的剪切蒙版，因此绘制和维护的开销相对较低。

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

要创建带有圆角的RaisedButton，请对按钮的RoundedRectangleBorder属性使用shape。

例如

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