Flutter 如何在Firestore数据映射生成的ListView末尾添加ElevatedButton

你可以通过Dart的扩展运算符将映射得到的列表项和末尾按钮合并为ListView的children数组，无需嵌套ListView，修改后的代码如下：

@override
Widget build(BuildContext context) {
  return StreamBuilder<QuerySnapshot>(
    stream: _usersStream,
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.hasError) {
        return Text('Something went wrong');
      }

      if (snapshot.connectionState == ConnectionState.waiting) {
        return Text("Loading");
      }

      return ListView(
        shrinkWrap: true,
        children: [
          // 用扩展运算符展开原有的文档映射列表
          ...snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data =
                document.data()! as Map<String, dynamic>;
            return ListTile(
              title: Text(data['num']),
              subtitle: Text(data['num']),
            );
          }).toList(),
          // 直接添加自定义ElevatedButton作为最后一项
          ElevatedButton(
            onPressed: () {
              // 自定义按钮的点击逻辑
            },
            child: Text('自定义按钮'),
          )
        ],
      );
    },
  );
}

实现说明 #

• 扩展运算符...会把遍历文档生成的ListTile列表平铺到ListView的children数组中
• 后续添加的ElevatedButton会自动成为列表的最后一项
• 整个列表共用同一个滚动区域，不会产生多滚动冲突的问题

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