Flutter中如何为Dismissible组件添加垃圾桶图标？

你只需要将background里的Text组件替换成Row组件，同时放入垃圾桶图标和文本即可，具体修改后的代码如下：

return Dismissible(
  key: UniqueKey(),
  background: Container(
    alignment: Alignment.center,
    color: Colors.redAccent,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Icon(
          Icons.delete,
          color: Colors.white,
        ),
        SizedBox(width: 8), // 控制图标和文本的间距
        Text(
          'Delete',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ],
    ),
  ),
  onDismissed: (direction) async {
    await deletePost(listpost![index].id.toString());
    setState(() {
      listpost!.removeAt(index);
      fetchAllPosts().then((value) => listpost = value);
    });
  },
);

关键说明 #

• 使用Row组件将图标和文本横向排列，通过mainAxisAlignment: MainAxisAlignment.center保证整体居中
• 用SizedBox设置图标与文本的间距，提升视觉体验
• 图标使用Flutter内置的Icons.delete，颜色和文本保持一致为白色，也可以根据需求添加size参数调整图标大小

内容的提问来源于stack exchange，提问作者Hana.HD