Question

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

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

Answer 1

问题在于dismissible.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 2

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

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

Answer 3

当我试图弄圆角时遇到了同样的问题。

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

在'中创建background，而不是在Dismissible中放置Stack

Dismissible

Answer 4

这将不起作用，因为您要为整个Container设置边框，而应该使用BorderRadius.only

  return Dismissible(
  key: UniqueKey(),
  child: Container(
    height: 256,
    decoration: ShapeDecoration(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            bottomLeft: Radius.circular(20.0)),
      ),
    ),
  ),
);

现在，您可以专门选择要在哪一侧提供边框。

Answer 5

我也遇到了同样的问题，我通过大量自定义找到的最佳解决方案是以下包：flutter_slidable。该链接会将您导航到它提供的选项。我喜欢那个！

Answer 6

作为一种解决方法，您可以尝试使用这种方法：

用 ClipRRect 包裹你的 Dismissible 并给它一些适当的 borderRadius，作为你的 Dismissible 的孩子
将你的 Dismissible 的孩子包裹在一个额外的 Container 中，并为它提供一个从左到右的 LinearGradient 颜色，以及 Dismissible 的两个背景的颜色。

使用解决方法在 DartPad 上查看此示例：https://dartpad.dev/7224dd055bc7bdc73ab6eb66002db104

我仍然看到一些可能出现的问题，这取决于 Dismissible 的背景，但这在大多数情况下应该有效。

Workaround example

如何修复此可忽略的小部件边框

6 个答案: