我一直在“手动”从Firestore阅读数据到列表视图中，并写入定制的ListTiles以显示在我的UI中。下面是当前的代码：

class FetchTransactionsByDate extends StatelessWidget {
  FetchTransactionsByDate({
    super.key,
    required this.dbRef,
  });

  final CollectionReference<Map<String, dynamic>> dbRef;
  final formatCurrency = NumberFormat.simpleCurrency();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      //* How to use Riverpod here?
      stream: dbRef.orderBy('date', descending: true).snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const Center(child: CircularProgressIndicator());
        }
        return ListView(
          children: snapshot.data!.docs.map((document) {
            //* Should be objects?
            return GestureDetector(
              onTap: () {
                Navigator.of(context)
                    .push(CupertinoPageRoute(builder: (BuildContext context) {
                  return TransactionDetailView(
                    title: "${document['payee']}",
                  );
                }));
              },
              child: TransactionTile(
                topLeft: "${document['payee']}",
                bottomLeft: "${document['date']}",
                topright: document['amount'],
                bottomRight: "${document['costcode']}",
              ),
            );
          }).toList(),);},);}}

下面是它生成的列表：

下面是FirestoreListView的代码（摘自pub.dev示例）：

class RecentTransactionsList extends StatelessWidget {
  RecentTransactionsList({super.key});

  final uid = FirebaseAuth.instance.currentUser?.uid;

  @override
  Widget build(BuildContext context) {
    final transactionsQuery = FirebaseFirestore.instance
        .collection('users/$uid/transactions')
        .orderBy('date', descending: true);
    return FirestoreListView<Map<String, dynamic>>(
      query: transactionsQuery,
      itemBuilder: (context, snapshot) {
        Map<String, dynamic> item = snapshot.data();
        return TransactionTile(
          topLeft: "${item['payee']}",
          bottomLeft: "${item['date']}",
          topright: item['amount'],
          bottomRight: "${item['job']}",
        );},);}}

这是产生的列表：

如何使FirestoreListView看起来像其他列表视图？而且，同样重要的是，当我使用相同的TransactionTile类来构建和返回ListTiles时，为什么它看起来如此不同？