容器borderRadius与ClipRRect borderRadius [英] Container borderRadius vs ClipRRect borderRadius

问题描述

容器和 ClipRRect 都具有 borderRadius 属性，但有时容器无法工作。这是例子。

Both Container and ClipRRect has borderRadius property, but sometimes Container fail to work. Here is the example.

不起作用

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

工作

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

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

I want to know why Container fails sometimes and where else it can fail?

推荐答案

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

ClipRRect inserts a render object that modifies the render tree of the widgets in its subtree.

<$ c的子树$ c> ClipRRect 将受到影响，并且角点将被剪裁。

Subtree of ClipRRect will be affected and the corners will be clipped.

对小部件本身进行Hit测试以及对孩子的表演d遵守剪切路径。这意味着小部件中的手势识别器（/按钮）将不会在剪切区域之外接收点击。

Hit tests for the widget itself as well as for its children will be performed with the clip path respected. Meaning that gesture recognizers (/ buttons) within the widget will not receive taps outside of the clipped area.

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

ClipRRect is relatively expensive, but is suitable to clip an image or other complex graphic elements that do not provide rounded corners setting on their own.

容器与 BoxDecoration 和 borderRadius / shape 集，只需在背景上绘制一个带有圆角的框即可。

Container on the other hand, when used with BoxDecoration and borderRadius / shape set, simply draws a box with rounded corners on its background.

此类容器的子树将不受影响

容器的命中测试将使用尊重borderRadius 的要求，它为容器本身提供了真正圆润的UI方向点击体验。但是，儿童手势识别器不会受到装饰设置的影响，因此，即使在裁剪区域之外，手势也将照常接收。

Hit tests for the Container will be performed with borderRadius respected, providing "truly rounded" UI-wise tap experience for the container itself. However, children gesture recognizers are not exposed to the decoration settings - hence, gestures will be received as usual even beyond the "clipped" area.

装饰后的容器，<$ c最好使用$ c> shape 或 borderRadius 集合，因为它的绘制和维护成本相对较低，因为子树的剪切蒙版不是

Decorated container with shape or borderRadius set is preferable as it is relatively less expensive to draw and maintain, given that the clipping mask for the subtree is not needed.

最后，我确实要注意，此处描述的两种方法都不是您所用的最佳方法。

In the end, I do have to note that neither way described here is the best way in your case.

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

To create a RaisedButton with rounded corners use RoundedRectangleBorder for the shape property of your button.

例如

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

这篇关于容器borderRadius与ClipRRect borderRadius的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！