如何在 ListView.builder 中使用异步函数？答案

【问题标题】：How to use a async function inside a ListView.builder?如何在 ListView.builder 中使用异步函数？
【发布时间】：2022-10-24 07:39:35
【问题描述】：

显示列表时有没有未来？我有两个用户 ID 的列表（其中一个是登录的用户，另一个是与之聊天的用户）。

我的目标是在聊天中获取并显示其他用户的姓名。

我遇到的问题是您不能在列表中执行异步功能

我怎样才能解决这个问题？


typedef JobCallback = void Function(CloudChat job);

class ChatsListWidget extends StatelessWidget {
  final Iterable<CloudChat> cloudChats; // list of jobs
  final JobCallback onDeleteJob;
  final JobCallback onTap;
  String get userId => AuthService.firebase().currentUser!.id;

  const ChatsListWidget({
    Key? key,
    required this.cloudChats,
    required this.onDeleteJob,
    required this.onTap,
  }) : super(key: key);

  Future getOtherUsersName(userIdsArr) async {
    String? otherUserInChatId;
    for (var _userId in userIdsArr) {
      if (_userId != userId) {
        otherUserInChatId = _userId;
      }
    }
    var userData = await FirebaseFirestore.instance
        .collection('user')
        .doc(otherUserInChatId)
        .get();

    return userData[userFirstNameColumn];
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: cloudChats.length,
      itemBuilder: (context, index) {
        final job = cloudChats.elementAt(index);
        var otherUserName = await getOtherUsersName(job.userIdsArr);
;
        return ListTile(
          onTap: () {
            onTap(job);
          },
          title: Text(
            otherUserName,
            maxLines: 1,
            softWrap: true,
            overflow: TextOverflow.ellipsis,
          ),
          trailing: IconButton(
            onPressed: () async {
              //
            },
            icon: const Icon(Icons.delete),
          ),
        );
      },
    );
  }
}

我按照建议尝试了以下代码，但没有奏效::



import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

import '../../services/auth/auth_service.dart';
import '../../services/cloud/cloud_chat.dart';
import '../../services/cloud/cloud_storage_constants.dart';
typedef JobCallback = void Function(CloudChat job);

class ChatsListWidget extends StatelessWidget {
final Iterable<CloudChat> cloudChats; // list of jobs
final JobCallback onDeleteJob;
final JobCallback onTap;
String get userId => AuthService.firebase().currentUser!.id;

const ChatsListWidget({
Key? key,
required this.cloudChats,
required this.onDeleteJob,
required this.onTap,
}) : super(key: key);

Future getOtherUsersName(userIdsArr) async {
String? otherUserInChatId;
for (var _userId in userIdsArr) {
  if (_userId != userId) {
    otherUserInChatId = _userId;
  }
}
var userData = await FirebaseFirestore.instance
    .collection('user')
    .doc(otherUserInChatId)
    .get();

return userData[userFirstNameColumn];
}

@override
Widget build(BuildContext context) {
return FutureBuilder(
  future: getOtherUsersName(job.userIdsArr),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: cloudChats.length,
        itemBuilder: (context, index) {
          final job = cloudChats.elementAt(index);

          return ListTile(
            onTap: () {
              onTap(job);
            },
            title: Text(
              otherUserName,
              maxLines: 1,
              softWrap: true,
              overflow: TextOverflow.ellipsis,
            ),
            trailing: IconButton(
              onPressed: () async {
                //
              },
              icon: const Icon(Icons.delete),
            ),
          );
        },
      );
    } else if (snapshot.connectionState == ConnectionState.waiting) {
      Center(
        child: CircularProgressIndicator(),
      );
    }

    return Center(
      child: Text("Empty"),
    );
  },
);
}}

【问题讨论】：

标签： flutter dart listview flutter-future

【解决方案1】：

简单而简短的答案是使用 FutureBuilder，它将未来作为命名参数，并在通常称为快照的构建器参数中为您提供结果。

首先用未来的构建器包装你的列表视图：

  FutureBuilder(
      future: "you future funtion here",
      builder: (context, snapshot) {
        return ListView.builder(itemBuilder: itemBuilder);
      }
    )

现在你可以给未来的功能，在你的情况下

FutureBuilder(
  future: getOtherUsersName(job.userIdsArr),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: cloudChats.length,
        itemBuilder: (context, index) {
          final job = cloudChats.elementAt(index);

          return ListTile(
            onTap: () {
              onTap(job);
            },
            title: Text(
              otherUserName,
              maxLines: 1,
              softWrap: true,
              overflow: TextOverflow.ellipsis,
            ),
            trailing: IconButton(
              onPressed: () async {
                //
              },
              icon: const Icon(Icons.delete),
            ),
          );
        },
      );
    } else if (snapshot.connectionState == ConnectionState.waiting) {
      Center(
        child: CircularProgressIndicator(),
      );
    }
  
    return Center(
      child: Text("Empty"),
    );
  },
);

如果加载和清空数据的条件，请记住使用快照

完整代码

import 'package:flutter/material.dart';
typedef JobCallback = void Function(CloudChat job);

class ChatsListWidget extends StatelessWidget {
final Iterable<CloudChat> cloudChats; // list of jobs
final JobCallback onDeleteJob;
final JobCallback onTap;
String get userId => AuthService.firebase().currentUser!.id;

const ChatsListWidget({
Key? key,
required this.cloudChats,
required this.onDeleteJob,
required this.onTap,
}) : super(key: key);

Future getOtherUsersName(userIdsArr) async {
String? otherUserInChatId;
for (var _userId in userIdsArr) {
  if (_userId != userId) {
    otherUserInChatId = _userId;
  }
}
var userData = await FirebaseFirestore.instance
    .collection('user')
    .doc(otherUserInChatId)
    .get();

return userData[userFirstNameColumn];
}

@override
Widget build(BuildContext context) {
return FutureBuilder(
  future: getOtherUsersName(job.userIdsArr),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: cloudChats.length,
        itemBuilder: (context, index) {
          final job = cloudChats.elementAt(index);

          return ListTile(
            onTap: () {
              onTap(job);
            },
            title: Text(
              otherUserName,
              maxLines: 1,
              softWrap: true,
              overflow: TextOverflow.ellipsis,
            ),
            trailing: IconButton(
              onPressed: () async {
                //
              },
              icon: const Icon(Icons.delete),
            ),
          );
        },
      );
    } else if (snapshot.connectionState == ConnectionState.waiting) {
      Center(
        child: CircularProgressIndicator(),
      );
    }

    return Center(
      child: Text("Empty"),
    );
  },
);
}}

HopeFully 会对您有所帮助。

【讨论】：