Flutter Web中SfDataGrid按钮点击获取整行数据问题求助

核心思路 #

在EmployeeDataSource中保存原始的Employee列表，在buildRow方法中通过当前DataGridRow的索引匹配对应的Employee对象，即可直接获取整行详情和行索引。

修改后的完整代码 #

class EmployeeDataSource extends DataGridSource {
  // 保存原始员工列表，用于匹配行数据
  final List<Employee> _originalEmployees;
  List<DataGridRow> _employees = [];

  EmployeeDataSource({required List<Employee> employees})
      : _originalEmployees = employees {
    _employees = employees
        .map<DataGridRow>((e) => DataGridRow(cells: [
              DataGridCell<int>(columnName: 'id', value: e.id),
              DataGridCell<String>(columnName: 'status', value: e.status),
              DataGridCell<String>(columnName: 'name', value: e.name),
              DataGridCell<String>(columnName: 'heartbeat', value: e.heartbeat),
              DataGridCell<String>(columnName: 'visibility', value: e.visibility),
              DataGridCell<String>(columnName: 'location', value: e.location),
              DataGridCell<String>(columnName: 'connectors', value: e.connectors),
              DataGridCell<String>(columnName: 'actions', value: e.actions),
            ]))
        .toList();
  }

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

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    // 通过当前行找到对应的索引和原始员工对象
    final int rowIndex = _employees.indexOf(row);
    final Employee currentEmployee = _originalEmployees[rowIndex];

    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      if (dataGridCell.columnName == "status") {
        return Container(
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.all(16.0),
          child: Icon(
            Icons.circle,
            color: colorFromCssString(
              functions.getStatusColor(dataGridCell.value),
              defaultColor: Colors.black,
            ),
            size: 24,
          ),
        );
      } else if (dataGridCell.columnName == "actions") {
        return Row(
          children: [
            FlutterFlowIconButton(
              borderColor: Colors.transparent,
              borderRadius: 30,
              borderWidth: 1,
              buttonSize: 60,
              icon: Icon(
                Icons.edit,
                color: Color(0xFF13345B),
                size: 30,
              ),
              onPressed: () {
                // 获取行索引和员工数据
                print('编辑行索引：$rowIndex，员工ID：${currentEmployee.id}');
                // 执行编辑逻辑
              },
            ),
            FlutterFlowIconButton(
              borderColor: Colors.transparent,
              borderRadius: 30,
              borderWidth: 1,
              buttonSize: 60,
              icon: Icon(
                Icons.remove_red_eye,
                color: Color(0xFF13345B),
                size: 30,
              ),
              onPressed: () async {
                // 直接使用currentEmployee获取整行详情
                print('员工详情：${currentEmployee.name}，状态：${currentEmployee.status}');
                // 执行查看详情逻辑
              },
            ),
          ],
        );
      } else {
        return Container(
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.all(16.0),
          child: Text(
            dataGridCell.value.toString(),
            textAlign: TextAlign.start,
          ),
        );
      }
    }).toList());
  }
}

关键说明 #

1. 保存原始列表：新增_originalEmployees存储传入的原始Employee列表，确保和_employees（DataGridRow列表）的顺序完全一致。
2. 获取行索引和数据：在buildRow中通过_employees.indexOf(row)拿到当前行的索引，再用索引从_originalEmployees中取出对应的Employee对象，即可直接使用整行的所有字段。
3. 按钮事件绑定：在FlutterFlowIconButton的onPressed回调中，直接使用currentEmployee和rowIndex即可实现基于行数据的操作。

内容的提问来源于stack exchange，提问作者Vishal Parmar