如何修复这个可关闭的小部件边框

Question

我在屏幕截图上标记的可关闭边框有问题

https://imgur.com/a/Jv0sdi2

return Dismissible(
    child: Container(
        height: 256,
        decoration: ShapeDecoration(
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(20.0)
            )
        )
    );
);

Answer 1

我找到了解决方案。使用 ClipRRect 小部件包裹Dismissible小部件，并从子小部件中删除 borderRadius。只有 ClipRRect 应该有 borderRadius。

ClipRRect(
  borderRadius: BorderRadius.circular(15.0),
  child: Dismissible(
    child: YourWidgetContainer();
 )
)

Answer 2

问题在于missible.dart 中的裁剪行为。我已经通过编辑 Dismissible 类本身解决了这个问题。在第 559 - 573 行中，您会发现一个如下所示的 if 语句：

if (background != null) {
      content = Stack(children: <Widget>[
        if (!_moveAnimation.isDismissed)
          Positioned.fill(
            child: ClipRect(
              clipper: _DismissibleClipper(
                axis: _directionIsXAxis ? Axis.horizontal : Axis.vertical,
                moveAnimation: _moveAnimation,
              ),
              child: background,
            ),
          ),
        content,
      ]);
    }

如果您只是注释掉 ClipRect 中的 Clipper 属性，背景将是透明的，并且您不会丢失折叠动画。

Answer 3

我在尝试圆角时遇到了同样的问题。

最终，一些解决方法成功了。

而不是background在 中Dismissible创建 aStack并将背景小部件放在Dismissible

Stack(
  overflow: Overflow.clip,
  children: <Widget>[
    MyBackgroundWidget(), // instead of background
    Dismissible(
      child: MyForegroundWidget(),
      // no background
    )
  ],
);