flutter data table 使用动态内容显示网格列

Question

当我尝试在列表中显示数据时

但我无法在数据中显示它 table。

列表视图

import 'package:flutter/material.dart';
import 'package:flutter_sample/src/data/models/emp_data.dart';

class ListingData extends StatelessWidget {
final List<ListData> emp;

const ListingData({Key? key,required this.emp}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
  itemCount: emp.length,
  itemBuilder: (context, index) {
    final empData = emp[index];
    return ListTile(
      title: Text('${empData.emp_name}'),
      subtitle: Text('${empData.designation}'),
    );
  },
);
}
}

我想尝试使用数据 table 相同的数据

示例代码

return DataTable(

  columns: const <DataColumn>[
    DataColumn(
      label: Text(
        'ID',
      ),
    ),
    DataColumn(
      label: Text(
        'Name',
      ),
    ),
    DataColumn(
      label: Text(
        'Role',
      ),
    ),
  ],


  rows: const <DataRow>[
    DataRow(
      cells: <DataCell>[
        DataCell(Text('${empData.id}'),
        DataCell(Text('${empData.emp_name}')),
   
      ],
    ),


  ],
);

我不知道如何获取索引值和数据来设置列。

这个东西怎么设置为数据table

itemCount: emp.length,
itemBuilder: (context, index) {
final empData = emp[index];

谁能给我建议正确的方法

Answer 1

定义行如下：

  rows: List.generate(
        emp.length,
        (index) => empDataRow(
            emp[index],
            )),

并如下定义数据行（此处为 empDataRow），其中 Employee your empData's class:

   DataRow empDataRow(Employee empData) {
     return DataRow(
            cells: <DataCell>[
               DataCell(Text('${empData.id}'),
               DataCell(Text('${empData.emp_name}')),
             ],),

flutter data table 使用动态内容显示网格列

flutter data table using dynmic content to show grid column

dart

flutter

flutter-layout

flutter-web