Windows端Flutter中如何通过List<DataRow>实现DataTable点击弹窗

直接利用DataRow的onTap回调结合showDialog就能实现需求，以下是完整示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DataTable 点击示例')),
        body: const DataTableDemo(),
      ),
    );
  }
}

class DataTableDemo extends StatefulWidget {
  const DataTableDemo({super.key});

  @override
  State<DataTableDemo> createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  // 模拟表格数据
  final List<Map<String, dynamic>> tableData = [
    {'id': 1, 'name': '张三', 'age': 25},
    {'id': 2, 'name': '李四', 'age': 30},
    {'id': 3, 'name': '王五', 'age': 28},
  ];

  // 点击行触发的弹窗方法
  void _showRowDialog(Map<String, dynamic> rowData) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('行数据详情'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('ID: ${rowData['id']}'),
            Text('姓名: ${rowData['name']}'),
            Text('年龄: ${rowData['age']}'),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('关闭'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: DataTable(
        columns: const [
          DataColumn(label: Text('ID')),
          DataColumn(label: Text('姓名')),
          DataColumn(label: Text('年龄')),
        ],
        rows: tableData.map((row) {
          return DataRow(
            // 核心：添加行点击回调
            onTap: () => _showRowDialog(row),
            cells: [
              DataCell(Text(row['id'].toString())),
              DataCell(Text(row['name'])),
              DataCell(Text(row['age'].toString())),
            ],
          );
        }).toList(),
      ),
    );
  }
}

关键说明 #

• 行点击逻辑：给每个DataRow设置onTap属性，点击时调用自定义弹窗方法，同时传递当前行数据
• 弹窗定制：示例用AlertDialog做基础弹窗，你可以替换成自定义Widget实现更复杂的弹窗样式
• 单元格单独点击（可选）：如果需要点击单个单元格触发弹窗，给对应DataCell添加onTap回调即可，逻辑和行点击一致

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