flutter - 容器 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 的子树将受到影响，角将被剪掉。

小部件本身及其子部件的 HitTest 将在遵守剪辑路径的情况下执行。这意味着小部件内的手势识别器(/按钮)将不会接收剪辑区域之外的点击。

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

---

Container 另一方面，当与 BoxDecoration and borderRadius 一起使用时/shape 设置，简单地在其背景上绘制一个圆角框。

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

Container 的 HitTest 将在遵守 borderRadius 的情况下执行，为容器本身提供“真正全面的”UI 智能点击体验。然而， child 手势识别器不会暴露于装饰设置 - 因此，即使在“裁剪”区域之外，手势也会像往常一样被接收。

带有 shape 或 borderRadius 设置的装饰容器是更可取的，因为它的绘制和维护成本相对较低，因为不需要子树的剪切掩码。

---

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

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

例如

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