如何使用按钮将行动态添加到 SFDataGrid

Question

我正在熟悉 SFDataGrid 包。我不知道如何从 UI 添加新行。有人可以给我一个提示吗？不知何故，我需要更新列表并刷新数据。

我想按下 MaterialButton 并添加新的行。现在可以硬编码。这会有所帮助。

我使用来自 syncfusion 的示例：

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



class DataGrid extends StatefulWidget {
  static String id = 'datagrid';
  DataGrid({Key? key}) : super(key: key);

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

class _DataGridState extends State<DataGrid> {


  List<Employee> employees = <Employee>[];
  late EmployeeDataSource employeeDataSource;

  @override
  void initState() {
    super.initState();
    employees = getEmployeeData();
    employeeDataSource = EmployeeDataSource(employeeData: employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter DataGrid'),
      ),
      body: Column(
        children: [
          SfDataGrid(
            source: employeeDataSource,
            columnWidthMode: ColumnWidthMode.fill,
            selectionMode: SelectionMode.multiple,
            columns: <GridColumn>[
              GridColumn(
                  columnName: 'id',
                  label: Container(
                      padding: EdgeInsets.all(16.0),
                      alignment: Alignment.center,
                      child: Text(
                        'ID',
                      ))),
              GridColumn(
                  columnName: 'name',
                  label: Container(
                      padding: EdgeInsets.all(8.0),
                      alignment: Alignment.center,
                      child: Text('Name'))),
              GridColumn(
                  columnName: 'designation',
                  label: Container(
                      padding: EdgeInsets.all(8.0),
                      alignment: Alignment.center,
                      child: Text(
                        'Designation',
                        overflow: TextOverflow.ellipsis,
                      ))),
              GridColumn(
                  columnName: 'salary',
                  label: Container(
                      padding: EdgeInsets.all(8.0),
                      alignment: Alignment.center,
                      child: Text('Salary'))),
            ],
          ),
          MaterialButton(
            color: Colors.red,
              onPressed: (){
                /// Add new Row
          })
        ],
      ),
    );
  }

}
  List<Employee> getEmployeeData() {
    return [
      Employee(10001, 'James', 'Project Lead', 20000),
      Employee(10002, 'Kathryn', 'Manager', 30000),
      Employee(10003, 'Lara', 'Developer', 15000),
      Employee(10004, 'Michael', 'Designer', 15000),
      Employee(10005, 'Martin', 'Developer', 15000),
      Employee(10006, 'Newberry', 'Developer', 15000),
      Employee(10007, 'Balnc', 'Developer', 15000),
      Employee(10008, 'Perry', 'Developer', 15000),
      Employee(10009, 'Gable', 'Developer', 15000),
      Employee(20202, 'Grimes', 'Developer', 15000),
    ];
  }


/// Custom business object class which contains properties to hold the detailed
/// information about the employee which will be rendered in datagrid.
class Employee {
  /// Creates the employee class with required details.
  Employee(this.id, this.name, this.designation, this.salary);

  /// Id of an employee.
  final int id;

  /// Name of an employee.
  final String name;

  /// Designation of an employee.
  final String designation;

  /// Salary of an employee.
  final int salary;
}

/// An object to set the employee collection data source to the datagrid. This
/// is used to map the employee data to the datagrid widget.
class EmployeeDataSource extends DataGridSource {

  EmployeeDataSource({required List<Employee> employeeData}) {


  _employeeData = employeeData
      .map<DataGridRow>((e) => DataGridRow(cells: [
    DataGridCell<int>(columnName: 'id', value: e.id),
    DataGridCell<String>(columnName: 'name', value: e.name),
    DataGridCell<String>(
        columnName: 'designation', value: e.designation),
    DataGridCell<int>(columnName: 'salary', value: e.salary),
  ]))
      .toList();
}



  List<DataGridRow> _employeeData = [];

  @override
  List<DataGridRow> get rows => _employeeData;

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

Answer 1

您没有要添加行的列表，

1. 在状态类中列出一个列表。

  List<Employee> myData = [];

1. 创建一个函数来填充列表。

  void fillTheData() {
    myData =[
      Employee(10001, 'James', 'Project Lead', 20000),
      Employee(10002, 'Kathryn', 'Manager', 30000),
      Employee(10003, 'Lara', 'Developer', 15000),
      Employee(10004, 'Michael', 'Designer', 15000),
      Employee(10005, 'Martin', 'Developer', 15000),
      Employee(10006, 'Newberry', 'Developer', 15000),
      Employee(10007, 'Balnc', 'Developer', 15000),
      Employee(10008, 'Perry', 'Developer', 15000),
      Employee(10009, 'Gable', 'Developer', 15000),
      Employee(20202, 'Grimes', 'Developer', 15000),
    ];
  }

1. 在initState中调用filldata函数。
2. 在“添加”按钮上，添加新行。

setState(() => {
  myData.add(Employee(9999, 'custom', ' some data ', 999999));
});