flutter 使用ContinuousRectangleBorder(AKA Squircle、Superellipse)作为扑动中的遮罩

gupuwyp2  于 2022-11-30  发布在  Flutter
关注(0)|答案(1)|浏览(118)

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层中其兄弟的整个宽度和高度

假设

  1. Stack:我认为这是我解决这个问题的最接近的方法,但它不是最好的解决方案,因为它模拟了结果。(我仍然无法使第1层容器填充堆栈中的所有可用空间。
    1.我读到了关于ClipPath小部件的信息,但它将路径作为参数,我无法将ShapeDecoration转换为该类型并将其用作遮罩。
    1.创建ContinuousRectangleBorder外观的另一种方法可能是将其用作遮罩和容器?我发现它也称为 squircle / superellipse,但重新创建它的包和解决方案使用ShapeDecoration,就像ContinuousRectangleBorder一样。
    1.也许有一种替代方法可以使掩码将ContinuousRectangleBorder作为参数并 Package 其子项?

公开讨论

我知道最后两个假设离最初的问题有点远,但我愿意用其他方式来解决问题。
谢谢大家的帮助。

8yoxcaq7

8yoxcaq71#

由于@pskink的建议,实现此目的的正确方法是使用ClipPath并将 ContinuousRectangleBorder 作为 ShapeBorderClipper 的形状传递
示例:

ClipPath(
      clipper: ShapeBorderClipper(
        shape: ContinuousRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(80),
          ),
        ),
      ),
      child: Text("Hola World"),
    );

相关问题