Flutter中如何实现SfDataGrid行/单元格点击跳转页面？

方案一：使用SfDataGrid全局单元格点击回调 #

直接给SfDataGrid添加onCellTap属性，监听所有单元格点击事件，根据行数据跳转对应页面：

SfDataGrid(
  source: umizanDataSource,
  columnWidthMode: ColumnWidthMode.fill,
  // 添加单元格点击监听
  onCellTap: (DataGridCellTapDetails details) {
    // 获取当前点击行的数据
    DataGridRow tappedRow = details.row;
    // 提取行ID（对应A、B、C）
    String rowId = tappedRow.getCells().firstWhere((cell) => cell.columnName == 'id').value.toString();
    
    // 根据ID跳转指定页面
    switch(rowId) {
      case 'A':
        Navigator.push(context, MaterialPageRoute(builder: (context) => PageA()));
        break;
      case 'B':
        Navigator.push(context, MaterialPageRoute(builder: (context) => PageB()));
        break;
      case 'C':
        Navigator.push(context, MaterialPageRoute(builder: (context) => PageC()));
        break;
    }
  },
  columns: <GridColumn>[
    // 补充完整列定义（原代码仅定义了Açıklama列，需匹配数据源字段）
    GridColumn(
        columnName: 'id',
        label: Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text('ID', style: TextStyle(fontFamily: 'Poppins')))),
    GridColumn(
        columnName: 'name',
        label: Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text('Name', style: TextStyle(fontFamily: 'Poppins')))),
    GridColumn(
        columnName: 'designation',
        label: Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text('Date', style: TextStyle(fontFamily: 'Poppins')))),
    GridColumn(
        columnName: 'Açıklama',
        label: Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text(
              'Açıklama',
              style: TextStyle(fontFamily: 'Poppins'),
            ))),
  ],
)

方案二：给单元格单独添加点击监听 #

如果需要仅让特定单元格可点击，或自定义点击区域样式，可在buildRow方法中用GestureDetector包裹单元格组件：

// 先在主页面定义全局导航Key，用于DataSource中获取上下文
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

// 在MaterialApp中配置：navigatorKey: navigatorKey,

// 修改UMizanDataSource的buildRow方法
@override
DataGridRowAdapter buildRow(DataGridRow row) {
  String rowId = row.getCells().firstWhere((cell) => cell.columnName == 'id').value.toString();
  
  return DataGridRowAdapter(
      color: Color.fromARGB(255, 0, 0, 0),
      cells: row.getCells().map<Widget>((e) {
        // 仅给ID列添加点击事件（可选，根据需求调整）
        final isClickable = e.columnName == 'id';
        return isClickable ? GestureDetector(
          onTap: () {
            switch(rowId) {
              case 'A':
                Navigator.push(navigatorKey.currentContext!, MaterialPageRoute(builder: (context) => PageA()));
                break;
              case 'B':
                Navigator.push(navigatorKey.currentContext!, MaterialPageRoute(builder: (context) => PageB()));
                break;
              case 'C':
                Navigator.push(navigatorKey.currentContext!, MaterialPageRoute(builder: (context) => PageC()));
                break;
            }
          },
          child: Container(
            color: Color.fromARGB(255, 217, 232, 245),
            alignment: Alignment.center,
            padding: EdgeInsets.all(8.0),
            child: Text(
              e.value.toString(),
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontFamily: 'Work Sans',
                  fontSize: 12,
                  fontWeight: FontWeight.w500),
            ),
          ),
        ) : Container(
            color: Color.fromARGB(255, 217, 232, 245),
            alignment: Alignment.center,
            padding: EdgeInsets.all(8.0),
            child: Text(
              e.value.toString(),
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontFamily: 'Work Sans',
                  fontSize: 12,
                  fontWeight: FontWeight.w500),
            ),
          );
      }).toList());
}

注意事项 #

• 需提前创建PageA、PageB、PageC等跳转目标页面
• 原代码中GridColumn仅定义了一列，需补充与数据源字段匹配的列，否则表格无法显示完整数据

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