Flutter待办应用Dismissible容器与ListView项高度不匹配及动画异常求助

问题解决方法 #

两个问题的核心诱因是组件布局结构不合理，Dismissible无法正确获取子项的完整高度，按照以下步骤修改即可：

1. 调整Dismissible布局结构 #

将原本包裹在Dismissible child外侧的Padding移到Dismissible外层，同时删除Card内部Container多余的bottom margin，保证Dismissible的高度和待办项内容高度完全匹配。另外你当前Dismissible的Key全部重复，会导致删除状态错乱，同步修改Key生成逻辑。

修改后的ListView.builder的itemBuilder代码如下：

itemBuilder: (BuildContext context, int index) {
  // 将Padding移到Dismissible外层
  return Padding(
    padding: const EdgeInsets.only(bottom: 15.0),
    child: Dismissible(
      background: buildActionSwipeLeft(),
      onDismissed: (direction) {
        setState(() {
          todos.removeAt(index);
          _titleController.removeAt(index);
          _detailController.removeAt(index);
          // 删掉原来无效的DismissDirection.startToEnd;语句
        });
      },
      direction: DismissDirection.startToEnd,
      // 替换重复的Key，这里用index.toString临时解决，正式环境建议用唯一ID
      key: Key(index.toString()),
      child: Card(
        color: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        ),
        elevation: 4,
        child: Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(
              vertical: 15.0,
              horizontal: 24.0
          ),
          // 移除原来多余的bottom:20的margin
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextField(
                cursorColor: Colors.black,
                controller: _titleController[index],
                style: const TextStyle(
                    fontSize: 22.0,
                    fontWeight: FontWeight.bold
                ),
                decoration: const InputDecoration(
                  hintText: "Enter a title",
                  border: InputBorder.none,
                ),
              ),
              const Divider(
                color: Colors.black,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 0.0),
                child: TextField(
                  controller: _detailController[index],
                  style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.grey[900],
                  ),
                  cursorColor: Colors.black,
                  maxLines: null,
                  decoration: const InputDecoration(
                      hintText: "Enter the description",
                      label: Text("description"),
                      border: InputBorder.none
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

2. 背景组件适配 #

buildActionSwipeLeft无需额外修改，调整Dismissible结构后背景会自动和待办项高度对齐，滑动时背景和待办项动画完全同步，不会出现上移问题。

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