Flutter语言 - 在sfdatagrid行选择(表中有来自firestore的数据)上导航到详细页面

Question

我设法用来自firestore的数据填充SfDatagrid表，这是到代码的链接:

https://github.com/SyncfusionExamples/How-to-load-data-from-firestore-to-Flutter-DataTable-SfDataGrid-

这段代码运行得很好，我得到了想要的结果。

但问题是，在一个表的选择，我希望应用程序在一个详细页面上导航，并显示更多的信息从firebase源选定行

但是我不知道如何在选择row时将文档快照或文档索引传递给详细页面。

请注意，我还不是专业人士，我才刚刚开始。

我试过了:

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

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

Answer 1

您可以通过查找选中的DataGridRow获得文档索引。从datagridsource . effecverows属性，然后查找索引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)));
}
},
);

在DataGridRowInfoPage:

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')}'),
),
);
}
}