Flutter中Dismissible设置startToEnd删除列表项后背景上移如何解决

核心原因 #

背景向上偏移问题主要来自两处代码错误：

• Dismissible的子组件额外添加了底部20dp的margin，导致Dismissible自身渲染高度和子组件高度不一致，背景按照Dismissible的实际高度渲染，滑动时就会和子组件出现错位
• 滑动背景组件buildActionSwipeLeft没有指定撑满父容器高度，默认只会自适应内部图标的高度，进一步加重了位置偏移的问题

修复步骤 #

步骤1：删除子组件多余的底部margin #

找到Dismissible的child属性对应的Container，删掉下面这段margin配置即可：

// 删掉这段代码
margin: const EdgeInsets.only(
  bottom: 20.0,
),

你已经在Card外层的Padding配置了bottom:15.0作为列表项间距，这行margin本身就是多余的。

步骤2：修改滑动背景组件，撑满父容器高度 #

给buildActionSwipeLeft返回的Container新增height: double.infinity配置，修改后的代码如下：

Widget buildActionSwipeLeft() => Container(
    height: double.infinity, // 新增该行，让背景撑满Dismissible全高
    alignment: Alignment.centerLeft,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16.0),
      color: Colors.redAccent,
    ),
    padding: const EdgeInsets.symmetric(horizontal: 30),
    child: const Icon(Icons.delete, color: Colors.white, size: 30),
  );

修改完成后重新运行，滑动删除的背景就会按照预期从左到右平滑滑出，不会再出现向上偏移的问题。

内容的提问来源于stack exchange，提问作者Rohith Nambiar