Flutter SFDataGrid 在单独的屏幕而不是警报框中显示行详细信息

问题描述 投票：0回答：3
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

void main() {
  runApp(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const SfDataGridDemo()));
}

class SfDataGridDemo extends StatefulWidget {
  const SfDataGridDemo({Key? key}) : super(key: key);

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

class SfDataGridDemoState extends State<SfDataGridDemo> {
  late EmployeeDataSource _employeeDataSource;
  List<Employee> _employees = <Employee>[];

  @override
  void initState() {
    super.initState();
    _employees = getEmployeeData();
    _employeeDataSource = EmployeeDataSource(_employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter SfDataGrid'),
        ),
        body: SfDataGrid(
            source: _employeeDataSource,
            columns: getColumns,
            columnWidthMode: ColumnWidthMode.fill,
            onCellTap: ((details) {
              if (details.rowColumnIndex.rowIndex != 0) {
                int selectedRowIndex = details.rowColumnIndex.rowIndex - 1;
                var row = _employeeDataSource.effectiveRows
                    .elementAt(selectedRowIndex);

                showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                        shape: const RoundedRectangleBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(32.0))),
                        content: SizedBox(
                          height: 200,
                          width: 200,
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: [
                                Text(
                                    'ID: ${row.getCells()[0].value.toString()}'),
                                Text(
                                    'Name: ${row.getCells()[1].value.toString()}'),
                                Text(
                                    'Designation: ${row.getCells()[2].value.toString()}'),
                                Text(
                                    'Salary: ${row.getCells()[3].value.t`your text`oString()}'),
                                SizedBox(
                                    width: 200,
                                    child: ElevatedButton(
                                        onPressed: () {
                                          Navigator.pop(context);
                                        },
                                        child: const Text("OK"))),
                              ]),
                        )));
              }
            })));
  }

  List<GridColumn> get getColumns {
    return [
      GridColumn(
          columnName: 'id',
          label: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              alignment: Alignment.center,
              child: const Text(
                'ID',
                overflow: TextOverflow.ellipsis,
              ))),
      GridColumn(
          columnName: 'name',
          label: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              alignment: Alignment.center,
              child: const Text('Name', overflow: TextOverflow.ellipsis))),
      GridColumn(
          columnName: 'designation',
          label: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              alignment: Alignment.center,
              child:
                  const Text('Designation', overflow: TextOverflow.ellipsis))),
      GridColumn(
          columnName: 'salary',
          label: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              alignment: Alignment.center,
              child: const Text('Salary', overflow: TextOverflow.ellipsis)))
    ];
  }

  List<Employee> getEmployeeData() {
    return [
      Employee(10001, 'James', 'Project Lead', 70000),
      Employee(10002, 'Kathryn', 'Manager', 99000),
      Employee(10003, 'Lara', 'Developer', 33000),
      Employee(10004, 'Michael', 'Designer', 35000),
      Employee(10005, 'Martin', 'Developer', 45000),
      Employee(10006, 'Newberry', 'Developer', 29000),
      Employee(10007, 'Balnc', 'Designer', 33000),
      Employee(10008, 'Perry', 'Developer', 31000),
      Employee(10009, 'Gable', 'Developer', 29500),
      Employee(10010, 'Grimes', 'Developer', 28000)
    ];
  }
}

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource(List<Employee> employees) {
    buildDataGridRow(employees);
  }

  void buildDataGridRow(List<Employee> employeeData) {
    dataGridRow = employeeData.map<DataGridRow>((employee) {
      return DataGridRow(cells: [
        DataGridCell<int>(columnName: 'id', value: employee.id),
        DataGridCell<String>(columnName: 'name', value: employee.name),
        DataGridCell<String>(
            columnName: 'designation', value: employee.designation),
        DataGridCell<int>(columnName: 'salary', value: employee.salary),
      ]);
    }).toList();
  }

  List<DataGridRow> dataGridRow = <DataGridRow>[];

  @override
  List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow;

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: Text(dataGridCell.value.toString()),
      );
    }).toList());
  }
}

class Employee {
  Employee(this.id, this.name, this.designation, this.salary);
  final int id;
  final String name;
  final String designation;
  final int salary;
}

我使用上面的代码在警报框中显示行详细信息。

问题是，在选择表格时，我希望页面导航到详细信息页面并在单独的页面中显示详细信息。

我不知道如何在选择行时将数据快照传递到详细信息页面。 我正在使用 Syncfusion Flutter Datagrid 示例来实现此功能。任何答案都可能有帮助。 谢谢。

flutter syncfusion flutter-datatable sfdatagrid
3个回答
0
投票
    onCellTap: ((details) {
      if (details.rowColumnIndex.rowIndex != 0) {
        int selectedRowIndex = details.rowColumnIndex.rowIndex - 1;
        var row = _employeeDataSource.effectiveRows.elementAt(selectedRowIndex);

        // Uncomment if you need a transition when tapping on a line
        /*Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DataView(row: row)),
          );*/

        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(32.0))),
            content: SizedBox(
              height: 200,
              width: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Text('ID: ${row.getCells()[0].value.toString()}'),
                  Text('Name: ${row.getCells()[1].value.toString()}'),
                  Text('Designation: ${row.getCells()[2].value.toString()}'),
                  Text('Salary: ${row.getCells()[3].value.toString()}'),
                  SizedBox(
                    width: 200,
                    child: ElevatedButton(
                      onPressed: () {
                        // Open a new page when you click on the button
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => DataView(row: row)),
                        );
                      },
                      child: const Text("OK"),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }),
0
投票

要在 Flutter 应用程序中的页面之间导航，您可以使用 Navigator 小部件。您可以使用 Navigator.push 方法将新页面推送到导航堆栈上，提供上下文和要导航到的所需页面。导航时使用的过渡动画类型可以使用 MaterialPageRoute 指定。通过将 DataGridRow 传递到 DetailsPage 小部件，可以检索该行的详细信息以进行显示。如需进一步说明，请参阅以下示例。

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

void main() {
  runApp(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const SfDataGridDemo()));
}

class SfDataGridDemo extends StatefulWidget {
  const SfDataGridDemo({Key? key}) : super(key: key);

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

class SfDataGridDemoState extends State<SfDataGridDemo> {
  late EmployeeDataSource _employeeDataSource;
  List<Employee> _employees = <Employee>[];

  @override
  void initState() {
    super.initState();
    _employees = getEmployeeData();
    _employeeDataSource = EmployeeDataSource(_employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter SfDataGrid'),
      ),
      body: SfDataGrid(
        source: _employeeDataSource,
        columns: getColumns,
        columnWidthMode: ColumnWidthMode.fill,
        onCellTap: ((details) {
          if (details.rowColumnIndex.rowIndex != 0) {
            int selectedRowIndex = details.rowColumnIndex.rowIndex - 1;
            var row =
                _employeeDataSource.effectiveRows.elementAt(selectedRowIndex);
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => DetailsPage(dataGridRow: row)));
          }
        }),
      ),
    );
  }

  List<GridColumn> get getColumns {
    return [
      GridColumn(
          columnName: 'id',
          label: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              alignment: Alignment.center,
              child: const Text(
                'ID',
                overflow: TextOverflow.ellipsis,
              ))),
      GridColumn(
          columnName: 'name',
          label: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              alignment: Alignment.center,
              child: const Text('Name', overflow: TextOverflow.ellipsis))),
      GridColumn(
          columnName: 'designation',
          label: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              alignment: Alignment.center,
              child:
                  const Text('Designation', overflow: TextOverflow.ellipsis))),
      GridColumn(
          columnName: 'salary',
          label: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              alignment: Alignment.center,
              child: const Text('Salary', overflow: TextOverflow.ellipsis)))
    ];
  }

  List<Employee> getEmployeeData() {
    return [
      Employee(10001, 'James', 'Project Lead', 70000),
      Employee(10002, 'Kathryn', 'Manager', 99000),
      Employee(10003, 'Lara', 'Developer', 33000),
      Employee(10004, 'Michael', 'Designer', 35000),
      Employee(10005, 'Martin', 'Developer', 45000),
      Employee(10006, 'Newberry', 'Developer', 29000),
      Employee(10007, 'Balnc', 'Designer', 33000),
      Employee(10008, 'Perry', 'Developer', 31000),
      Employee(10009, 'Gable', 'Developer', 29500),
      Employee(10010, 'Grimes', 'Developer', 28000)
    ];
  }
}

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource(List<Employee> employees) {
    buildDataGridRow(employees);
  }

  void buildDataGridRow(List<Employee> employeeData) {
    dataGridRow = employeeData.map<DataGridRow>((employee) {
      return DataGridRow(cells: [
        DataGridCell<int>(columnName: 'id', value: employee.id),
        DataGridCell<String>(columnName: 'name', value: employee.name),
        DataGridCell<String>(
            columnName: 'designation', value: employee.designation),
        DataGridCell<int>(columnName: 'salary', value: employee.salary),
      ]);
    }).toList();
  }

  List<DataGridRow> dataGridRow = <DataGridRow>[];

  @override
  List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow;

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: Text(dataGridCell.value.toString()),
      );
    }).toList());
  }
}

class DetailsPage extends StatefulWidget {
  const DetailsPage({
    super.key,
    required this.dataGridRow,
  });
  final DataGridRow dataGridRow;
  @override
  State<DetailsPage> createState() => DetailsPageState();
}

class DetailsPageState extends State<DetailsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Details Page')),
        body: Center(
          child: SizedBox(
            height: 200,
            width: 200,
            child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                      'ID: ${widget.dataGridRow.getCells()[0].value.toString()}'),
                  Text(
                      'Name: ${widget.dataGridRow.getCells()[1].value.toString()}'),
                  Text(
                      'Designation: ${widget.dataGridRow.getCells()[2].value.toString()}'),
                  Text(
                      'Salary: ${widget.dataGridRow.getCells()[3].value.toString()}'),
                ]),
          ),
        ));
  }
}

class Employee {
  Employee(this.id, this.name, this.designation, this.salary);
  final int id;
  final String name;
  final String designation;
  final int salary;
}
0
投票

我可以导航到下一页，但我也希望当用户单击复选框时，它可以选择整行

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.