ContinuousRectangleBorder(又称Squircle、Superellipse)形状是否可以用作遮罩另一个小部件的模板?
上下文
我尝试使用 ClipRRect 遮罩一个小部件,但是它提供的自定义选项只包括传统的边框半径,这与使用 ContinuousRectangleBorder 装饰的容器生成的形状不太一样
示例:
- 在此方法中,如果半径太大,ClipRRect会完全破坏ContinuousRectangleBorder的原始形状;如果半径太小,则不会适当地裁剪筛选器和容器。我尝试使用椭圆半径,但它看起来仍然不如预期 *
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(40)),
child: BackdropFilter(
// Filter
filter: ImageFilter.blur(
sigmaX: 20,
sigmaY: 20,
),
// Container with ContinuousRectangleBorder
child: Container(
constraints: BoxConstraints(maxWidth: 600),
decoration: ShapeDecoration(
color: Colors.blue,
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(80)),
),
),
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Text("Hola World"),
),
),
),
);
我的尝试
我尝试使用具有两层的Stack:
堆栈
**|- 第1层:**BackdropFilter位于传统ClipRRect中,希望模拟实际ContinuousRectangleBorder后面的ContinuousRectangleBorder的形状,而不影响它的实际几何形状。
**|- 第2层:**ContinuousRectangleBorder装饰到最终容器。
这种方法的问题是,我无法找到一种方法,让第1层中的小部件占据第2层中其兄弟的整个宽度和高度
假设
- Stack:我认为这是我解决这个问题的最接近的方法,但它不是最好的解决方案,因为它模拟了结果。(我仍然无法使第1层容器填充堆栈中的所有可用空间。
1.我读到了关于ClipPath小部件的信息,但它将路径作为参数,我无法将ShapeDecoration转换为该类型并将其用作遮罩。
1.创建ContinuousRectangleBorder外观的另一种方法可能是将其用作遮罩和容器?我发现它也称为 squircle / superellipse,但重新创建它的包和解决方案使用ShapeDecoration,就像ContinuousRectangleBorder一样。
1.也许有一种替代方法可以使掩码将ContinuousRectangleBorder作为参数并 Package 其子项?
公开讨论
我知道最后两个假设离最初的问题有点远,但我愿意用其他方式来解决问题。
谢谢大家的帮助。
1条答案
按热度按时间8yoxcaq71#
由于@pskink的建议,实现此目的的正确方法是使用ClipPath并将 ContinuousRectangleBorder 作为 ShapeBorderClipper 的形状传递
示例: