Flutter -导航到sfdatagrid行选择的详细信息页(表包含来自firestore的数据)

lnlaulya  于 2022-12-14  发布在  Flutter
关注(0)|答案(1)|浏览(277)

我设法用firestore中的数据填充了一个SfDatagrid表,这是指向代码的链接:
https://github.com/SyncfusionExamples/How-to-load-data-from-firestore-to-Flutter-DataTable-SfDataGrid-
这段代码运行得很好,我得到了想要的结果。
但问题是,在表选择上,我希望应用程序在详细信息页面上导航,并在所选行上显示来自firebase源的更多信息。
但我不知道如何在选择行时将文档快照或文档索引传递到详细页。
请注意,我还不是一个专业人士,我只是刚刚开始。
我试过这个:

onCellTap: (DataGridCellTapDetails details) {

              final DataGridRow row = employeeDataGridSource
                 .effectiveRows[details.rowColumnIndex.rowIndex - 1];
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => DataGridRowInfoPage(row: row)));

            },

但它只显示表上的信息,但在firestore文档中,我有很多字段,我不能在表上显示它们,我希望只在详细信息页面上显示它们。

t8e9dugd

t8e9dugd1#

您可以从DataGridSource.effectiveRows属性中寻找单击的DataGridRow,然后使用该行从DataGridSource.dataGridRows属性中寻找索引,以取得文件索引。现在,您可以使用该索引从快照撷取文件详细数据。

程式码片段:

SfDataGrid(
            source: employeeDataSource,
            columns: getColumns,
            onCellTap: (details) {
              if (details.rowColumnIndex.rowIndex != 0) {
                final DataGridRow row = employeeDataSource
                    .effectiveRows[details.rowColumnIndex.rowIndex - 1];
                int index = employeeDataSource.dataGridRows.indexOf(row);
                var data = snapshot.data!.docs[index];
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => DataGridRowInfoPage(data)));
              }
            },
          );

在数据网格行信息页中:

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

class DataGridRowInfoPage extends StatefulWidget {
  const DataGridRowInfoPage(this.data, {Key? key}) : super(key: key);

  final QueryDocumentSnapshot<Object?> data;

  @override
  DataGridRowInfoPageState createState() => DataGridRowInfoPageState();
}

class DataGridRowInfoPageState extends State<DataGridRowInfoPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter DataGrid'),
      ),
      body: Center(
        child: Text('Employee salary: ${widget.data.get('salary')}'),
      ),
    );
  }
}

相关问题