Flutter中无法将Widget数组赋值给Dismissible的child参数的解决方案咨询

问题 #

需要把图片+文字组成的内容组做成可滑动删除的单元，但直接将Widget列表赋值给Dismissible的child参数会报错——因为child要求传入单个Widget，而非Widget列表。

原错误代码 #

class _PhotosListState extends State<PhotosList> {
  @override
  Widget build(BuildContext context) {
    return _buildBody();
  }
  Widget _buildBody() {
    return SizedBox(
        height: 485,
        child: ListView.builder(
            itemCount: Photos.length,
            itemBuilder: (context,i){
              return Dismissible(
                  background: Container(
                    color: Colors.green,
                  ),
                  key: ValueKey<Object>(Photos.items[i]),
                  onDismissed: (DismissDirection direction) {
                    setState(() {
                      Photos.items.removeAt(i);
                    });
                  },
                  child: SizedBox(
                    child: <Widget> [ // 直接传Widget列表不符合参数要求
                      Image.asset(Photos.items[i].image),
                      Text(Photos.items[i].task,
                          textAlign: TextAlign.center,
                          style: const TextStyle(color: Colors.grey, fontWeight: FontWeight.bold, fontSize: 19.5)
                      ),
                    ]
                  )
              );
            }
        )
    );
  }
}

解决办法 #

Dismissible的child必须是单个Widget，所以需要用布局组件（如Column、Row、Stack）把图片和文字包裹成一个整体，根据排版需求选择合适的布局：

修改后的代码示例 #

class _PhotosListState extends State<PhotosList> {
  @override
  Widget build(BuildContext context) {
    return _buildBody();
  }
  Widget _buildBody() {
    return SizedBox(
        height: 485,
        child: ListView.builder(
            itemCount: Photos.items.length, // 修正计数对象：原代码Photos.length应为Photos.items.length
            itemBuilder: (context,i){
              return Dismissible(
                  background: Container(
                    color: Colors.green,
                  ),
                  key: ValueKey<Object>(Photos.items[i]),
                  onDismissed: (DismissDirection direction) {
                    setState(() {
                      Photos.items.removeAt(i);
                    });
                  },
                  // 用Column垂直排列图片和文字，作为单个Widget传入child
                  child: Column(
                    children: [
                      Image.asset(Photos.items[i].image),
                      Text(Photos.items[i].task,
                          textAlign: TextAlign.center,
                          style: const TextStyle(color: Colors.grey, fontWeight: FontWeight.bold, fontSize: 19.5)
                      ),
                    ],
                  )
              );
            }
        )
    );
  }
}

关键修改点 #

1. 用Column（垂直排版）替换原Widget列表，将图片和文字作为Column的children传入，满足Dismissible对单个Widget的要求；如果需要水平排版可以用Row，重叠布局用Stack。
2. 修正了itemCount的错误：原代码Photos.length应为Photos.items.length，避免列表计数异常。

样式扩展（可选） #

如果需要给组合单元加内边距、背景等样式，可以在Column外层包裹Container：

child: Container(
  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
  decoration: BoxDecoration(
    border: Border(bottom: BorderSide(color: Colors.grey.shade200))
  ),
  child: Column(
    children: [
      Image.asset(Photos.items[i].image),
      Text(Photos.items[i].task),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Harshal Janjani