一尘不染

容器borderRadius与ClipRRect borderRadius

flutter

双方ContainerClipRRect拥有borderRadius财产,但有时Container无法正常工作。这是例子。

不工作

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

加工

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

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


阅读 287

收藏
2020-08-13

共1个答案

一尘不染

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

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

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

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


Container另一方面,当与BoxDecorationborderRadius
/ shape设置一起使用时,只需在背景上绘制一个带有圆角的框即可。

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

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

shapeborderRadius设置装饰的容器是优选的,因为不需要子树的剪切蒙版,绘画和维护相对较便宜。


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

要创建RaisedButton带有圆角RoundedRectangleBordershape,请使用按钮的属性。

例如

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100))
  // ...,
)
2020-08-13